simplify UI

packages/builder/src/builderStore/store/backend.js

@@ -348,13 +348,6 @@ export const getBackendUiStore = () => {
         const json = await response.json()
         return json
       },
-      delete: async ({ role, resource, level }) => {
-        const response = await api.delete(
-          `/api/permission/${role}/${resource}/${level}`
-        )
-        const json = await response.json()
-        return json
-      },
     },
   }
 

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

@@ -4,42 +4,26 @@
   import { Roles } from "constants/backend"
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Label, Select, Spacer } from "@budibase/bbui"
+  import { Button, Label, Input, Select, Spacer } from "@budibase/bbui"
 
   export let resourceId
   export let permissions
-  export let levels
   export let onClosed
 
-  // Draft level and role for editing
+  async function changePermission(level, role) {
-  let level = levels[0]
-  let role = Roles.BASIC
-
-  $: permissionKeys = Object.keys(permissions)
-
-  async function addPermission() {
     await backendUiStore.actions.permissions.save({
       level,
       role,
       resource: resourceId,
     })
 
-    // Show updated permissions in UI
+    // Show updated permissions in UI: REMOVE
     permissions = await backendUiStore.actions.permissions.forResource(
       resourceId
     )
-    notifier.success("Access rule saved.")
+    notifier.success("Updated permissions.")
-
+    // TODO: update permissions
-    // Reset the draft permissions
+    // permissions[]
-    level = levels[0]
-    role = Roles.BASIC
-  }
-
-  async function deletePermission(level, role) {
-    await backendUiStore.actions.permissions.delete({ level, role, resourceId })
-    delete permissions[role]
-    notifier.danger("Removed access rule.")
-    permissions = permissions
   }
 </script>
 
@@ -49,39 +33,24 @@
   <div class="row">
     <Label extraSmall grey>Level</Label>
     <Label extraSmall grey>Role</Label>
-    <div />
+    {#each Object.keys(permissions) as level}
-    {#if permissionKeys.length === 0}
+      <Input secondary thin value={level} disabled={true} />
-      <Label extraSmall>Default Access Rules Applied.</Label>
+      <Select
-    {/if}
+        secondary
-    {#each permissionKeys as role}
+        thin
-      <Label small>{permissions[role]}</Label>
+        value={permissions[level]}
-      <Label small>{role}</Label>
+        on:change={e => changePermission(level, e.target.value)}>
-      <i
+        {#each $backendUiStore.roles as role}
-        class="ri-close-circle-line delete"
+          <option value={role._id}>{role.name}</option>
-        on:click={() => deletePermission(permissions[role], role)} />
+        {/each}
+      </Select>
     {/each}
   </div>
 
   <Spacer large />
 
-  <hr />
-  <Label small>Add Rule</Label>
-  <Spacer small />
-  <div class="draft-permission">
-    <Select label="Level" secondary thin bind:value={level}>
-      {#each levels as level}
-        <option value={level}>{level}</option>
-      {/each}
-    </Select>
-    <Select label="Role" secondary thin bind:value={role}>
-      {#each $backendUiStore.roles as role}
-        <option value={role._id}>{role.name}</option>
-      {/each}
-    </Select>
-  </div>
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={addPermission}>Edit Rules</Button>
   </div>
 </div>
 
@@ -107,19 +76,9 @@
     margin-top: var(--spacing-l);
   }
 
-  .draft-permission {
+  .row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: var(--spacing-m);
   }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr 20px;
-    grid-gap: var(--spacing-s);
-  }
-
-  .delete {
-    cursor: pointer;
-  }
 </style>