Code review updates

4 years ago · bd9fbb7d90
3 changed files with 55 additions and 59 deletions
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@ -74,65 +74,67 @@
  {/if}
 </div>

-<div>
-  <Modal bind:this={appLockModal}>
-    <ModalContent
-      title={lockedByHeading}
-      dataCy={"app-lock-modal"}
-      showConfirmButton={false}
-      showCancelButton={false}
-    >
-      <Layout noPadding>
-        <Body size="S">
-          Apps are locked to prevent work from being lost from overlapping
-          changes between your team.
-        </Body>
-        {#if lockedByYou && getExpiryDuration(app) > 0}
-          <span class="lock-expiry-body">
-            {processStringSync(
-              "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-              {
-                time: getExpiryDuration(app),
-              }
-            )}
-          </span>
-        {/if}
-        <div class="lock-modal-actions">
-          <ButtonGroup>
-            <Button
-              secondary
-              quiet={lockedBy && lockedByYou}
-              disabled={processing}
-              on:click={() => {
-                appLockModal.hide()
-              }}
-            >
-              <span class="cancel"
-                >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-              >
-            </Button>
-            {#if lockedByYou}
+{#key app}
+  <div>
+    <Modal bind:this={appLockModal}>
+      <ModalContent
+        title={lockedByHeading}
+        dataCy={"app-lock-modal"}
+        showConfirmButton={false}
+        showCancelButton={false}
+      >
+        <Layout noPadding>
+          <Body size="S">
+            Apps are locked to prevent work from being lost from overlapping
+            changes between your team.
+          </Body>
+          {#if lockedByYou && getExpiryDuration(app) > 0}
+            <span class="lock-expiry-body">
+              {processStringSync(
+                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
+                {
+                  time: getExpiryDuration(app),
+                }
+              )}
+            </span>
+          {/if}
+          <div class="lock-modal-actions">
+            <ButtonGroup>
              <Button
                secondary
+                quiet={lockedBy && lockedByYou}
                disabled={processing}
                on:click={() => {
-                  releaseLock()
                  appLockModal.hide()
                }}
              >
-                {#if processing}
-                  <ProgressCircle overBackground={true} size="S" />
-                {:else}
-                  <span class="unlock">Release Lock</span>
-                {/if}
+                <span class="cancel"
+                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+                >
              </Button>
-            {/if}
-          </ButtonGroup>
-        </div>
-      </Layout>
-    </ModalContent>
-  </Modal>
-</div>
+              {#if lockedByYou}
+                <Button
+                  secondary
+                  disabled={processing}
+                  on:click={() => {
+                    releaseLock()
+                    appLockModal.hide()
+                  }}
+                >
+                  {#if processing}
+                    <ProgressCircle overBackground={true} size="S" />
+                  {:else}
+                    <span class="unlock">Release Lock</span>
+                  {/if}
+                </Button>
+              {/if}
+            </ButtonGroup>
+          </div>
+        </Layout>
+      </ModalContent>
+    </Modal>
+  </div>
+{/key}

 <style>
  .lock-modal-actions {
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -6,7 +6,6 @@
  export let app
  export let editApp
  export let appOverview
-  export let idx
 </script>

 <div class="title" data-cy={`${app.devId}`}>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -381,13 +381,8 @@
          </div>

          <div class="appTable" class:unlocked>
-            {#each filteredApps as app, idx}
-              <AppRow
-                {app}
-                {editApp}
-                {appOverview}
-                idx={`${idx}_${app.appId}`}
-              />
+            {#each filteredApps as app (app.appId)}
+              <AppRow {app} {editApp} {appOverview} />
            {/each}
          </div>
        </Layout>