Ensure the row key is unique even when the rows are sorted.

4 years ago · e2f269bd1a
3 changed files with 71 additions and 59 deletions
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@ -6,6 +6,8 @@
    Modal,
    notifications,
    ProgressCircle,
+    Layout,
+    Body,
  } from "@budibase/bbui"
  import { auth, apps } from "stores/portal"
  import { processStringSync } from "@budibase/string-templates"
@ -29,6 +31,7 @@
    lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}`

  const getExpiryDuration = app => {
+    console.log("Testing")
    if (!app?.lockedBy?.lockedAt) {
      return -1
    }
@ -72,62 +75,65 @@
  {/if}
 </div>

-<Modal bind:this={appLockModal}>
-  <ModalContent
-    title={lockedByHeading}
-    dataCy={"app-lock-modal"}
-    showConfirmButton={false}
-    showCancelButton={false}
-  >
-    <p>
-      Apps are locked to prevent work from being lost from overlapping changes
-      between your team.
-    </p>
-
-    {#if lockedByYou && getExpiryDuration(app) > 0}
-      <span class="lock-expiry-body">
-        {processStringSync(
-          "This lock will expire in {{ duration time 'millisecond' }} from now.",
-          {
-            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}
-          <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>
+<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}
-      </ButtonGroup>
-    </div>
-  </ModalContent>
-</Modal>
+        <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}
+              <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>

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

 <div class="title" data-cy={`${app.devId}`}>
@ -29,8 +30,8 @@
    Never updated
  {/if}
 </div>
-<div class="desktop">
-  <AppLockModal {app} buttonSize="M" />
+<div class="desktop check">
+  <span><AppLockModal {app} buttonSize="M" /></span>
 </div>
 <div class="desktop">
  <div class="app-status">
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -381,8 +381,13 @@
          </div>

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