Update app access assignment and fix backups table

packages/builder/src/pages/builder/apps/index.svelte

@@ -104,7 +104,7 @@
                 <Icon size="XL" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
-                Update user information
+                My profile
               </MenuItem>
               <MenuItem
                 icon="LockClosed"

packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte

@@ -1,49 +0,0 @@
-<script>
-  import { PickerDropdown } from "@budibase/bbui"
-  import { groups } from "stores/portal"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  let filter = null
-  $: filteredGroups = !filter
-    ? $groups
-    : $groups.filter(group =>
-        group.name?.toLowerCase().includes(filter.toLowerCase())
-      )
-
-  $: optionSections = {
-    groups: {
-      data: filteredGroups,
-      getLabel: group => group.name,
-      getValue: group => group._id,
-      getIcon: group => group.icon,
-      getColour: group => group.color,
-    },
-  }
-
-  $: onChange = selected => {
-    const { detail } = selected
-    if (!detail || Object.keys(detail).length == 0) {
-      dispatch("change", null)
-      return
-    }
-
-    const groupSelected = $groups.find(x => x._id === detail)
-    const appRoleIds = groupSelected?.roles
-      ? Object.keys(groupSelected?.roles)
-      : []
-    dispatch("change", appRoleIds)
-  }
-</script>
-
-<PickerDropdown
-  autocomplete
-  bind:searchTerm={filter}
-  primaryOptions={optionSections}
-  placeholder={"Filter by access"}
-  on:pickprimary={onChange}
-  on:closed={() => {
-    filter = null
-  }}
-/>

packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte

@@ -14,6 +14,8 @@
 
   export let app
   export let appUsers = []
+  export let showUsers = false
+  export let showGroups = false
 
   const dispatch = createEventDispatcher()
   const usersFetch = fetchData({
@@ -41,7 +43,8 @@
   $: availableGroups = getAvailableGroups($groups, app.appId, search, data)
   $: valid = data?.length && !data?.some(x => !x.id?.length || !x.role?.length)
   $: optionSections = {
-    ...($licensing.groupsEnabled &&
+    ...(showGroups &&
+      $licensing.groupsEnabled &&
       availableGroups.length && {
         ["User groups"]: {
           data: availableGroups,
@@ -51,13 +54,15 @@
           getColour: group => group.color,
         },
       }),
-    users: {
+    ...(showUsers && {
-      data: availableUsers,
+      users: {
-      getLabel: user => user.email,
+        data: availableUsers,
-      getValue: user => user._id,
+        getLabel: user => user.email,
-      getIcon: user => user.icon,
+        getValue: user => user._id,
-      getColour: user => user.color,
+        getIcon: user => user.icon,
-    },
+        getColour: user => user.color,
+      },
+    }),
   }
 
   const addData = async appData => {
@@ -185,7 +190,7 @@
     </Layout>
   {/if}
   <div>
-    <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
+    <ActionButton on:click={addNewInput} icon="Add">Add more</ActionButton>
   </div>
 </ModalContent>
 

packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte

@@ -36,7 +36,7 @@
     },
     role: {
       displayName: "Access",
-      width: "160px",
+      width: "150px",
       borderLeft: true,
     },
   }
@@ -50,6 +50,8 @@
   let assignmentModal
   let appGroups
   let appUsers
+  let showAddUsers = false
+  let showAddGroups = false
 
   $: app = $overview.selectedApp
   $: devAppId = app.devId
@@ -153,6 +155,18 @@
     await usersFetch.refresh()
   }
 
+  const showUsersModal = () => {
+    showAddUsers = true
+    showAddGroups = false
+    assignmentModal.show()
+  }
+
+  const showGroupsModal = () => {
+    showAddUsers = false
+    showAddGroups = true
+    assignmentModal.show()
+  }
+
   setContext("roles", {
     updateRole,
     removeRole,
@@ -178,7 +192,7 @@
       <Layout noPadding gap="S">
         <div class="title">
           <Heading size="S">Users</Heading>
-          <Button secondary on:click={assignmentModal.show}>Assign user</Button>
+          <Button secondary on:click={showUsersModal}>Assign user</Button>
         </div>
         <Table
           customPlaceholder
@@ -207,9 +221,7 @@
       <Layout noPadding gap="S">
         <div class="title">
           <Heading size="S">Groups</Heading>
-          <Button secondary on:click={assignmentModal.show}>
+          <Button secondary on:click={showGroupsModal}>Assign group</Button>
-            Assign group
-          </Button>
         </div>
         <Table
           customPlaceholder
@@ -228,7 +240,13 @@
 </Layout>
 
 <Modal bind:this={assignmentModal}>
-  <AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
+  <AssignmentModal
+    {app}
+    {appUsers}
+    on:update={usersFetch.refresh}
+    showGroups={showAddGroups}
+    showUsers={showAddUsers}
+  />
 </Modal>
 
 <style>

packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte

@@ -90,7 +90,7 @@
     },
     actions: {
       displayName: null,
-      width: "5%",
+      width: "auto",
     },
   }