Replace backend usages of dropdown menus with common components

packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte

@@ -1,10 +1,11 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
+  import { DropdownMenu, Modal } from "@budibase/bbui"
   import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
   import * as api from "../api"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let row
 
@@ -34,16 +35,13 @@
   <i class="ri-more-line" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <ul>
+  <DropdownContainer>
-    <li data-cy="edit-row" on:click={showModal}>
+    <DropdownItem icon="ri-edit-line" title="Edit" on:click={showModal} />
-      <Icon name="edit" />
+    <DropdownItem
-      <span>Edit</span>
+      icon="ri-delete-bin-line"
-    </li>
+      title="Delete"
-    <li data-cy="delete-row" on:click={showDelete}>
+      on:click={showDelete} />
-      <Icon name="delete" />
+  </DropdownContainer>
-      <span>Delete</span>
-    </li>
-  </ul>
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -59,36 +57,4 @@
   .ri-more-line:hover {
     cursor: pointer;
   }
-
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    font-size: var(--font-size-xs);
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -1,11 +1,9 @@
 <script>
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import screenTemplates from "builderStore/store/screenTemplates"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-  import api from "builderStore/api"
 
   export let table
 
@@ -31,9 +29,11 @@
 
   function showModal() {
     const screens = $store.screens
-    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
+    templateScreens = screens.filter(
+      (screen) => screen.autoTableId === table._id
+    )
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
+      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
     )
     hideEditor()
     confirmDeleteDialog.show()
@@ -57,7 +57,7 @@
     const tableName = evt.target.value
     if (
       originalName !== tableName &&
-      $backendUiStore.models?.some(model => model.name === tableName)
+      $backendUiStore.models?.some((model) => model.name === tableName)
     ) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
@@ -66,37 +66,36 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
+<div on:click|stopPropagation>
-  <i class="ri-more-line" />
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit Table</h5>
+        <Input
+          label="Table Name"
+          thin
+          bind:value={table.name}
+          on:input={checkValid}
+          {error} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary disabled={error} on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showModal} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit Table</h5>
-      <Input
-        label="Table Name"
-        thin
-        bind:value={table.name}
-        on:input={checkValid}
-        {error} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary disabled={error} on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-table" on:click={showModal}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Table"
@@ -155,29 +154,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -2,9 +2,9 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let view
 
@@ -46,32 +46,31 @@
   }
 </script>
 
-<div bind:this={anchor} class="icon" on:click={dropdown.show}>
+<div on:click|stopPropagation>
-  <i class="ri-more-line" />
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+    {#if editing}
+      <div class="actions">
+        <h5>Edit View</h5>
+        <Input label="View Name" thin bind:value={view.name} />
+        <footer>
+          <Button secondary on:click={hideEditor}>Cancel</Button>
+          <Button primary on:click={save}>Save</Button>
+        </footer>
+      </div>
+    {:else}
+      <DropdownContainer>
+        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showDelete} />
+      </DropdownContainer>
+    {/if}
+  </DropdownMenu>
 </div>
-<DropdownMenu align="left" {anchor} bind:this={dropdown}>
-  {#if editing}
-    <div class="actions">
-      <h5>Edit View</h5>
-      <Input label="View Name" thin bind:value={view.name} />
-      <footer>
-        <Button secondary on:click={hideEditor}>Cancel</Button>
-        <Button primary on:click={save}>Save</Button>
-      </footer>
-    </div>
-  {:else}
-    <ul>
-      <li on:click={showEditor}>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li data-cy="delete-view" on:click={showDelete}>
-        <Icon name="delete" />
-        Delete
-      </li>
-    </ul>
-  {/if}
-</DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
@@ -108,29 +107,4 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
 </style>