feat: add fab to admin settings and spaces overview

packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue

@@ -19,7 +19,7 @@
     </template>
     <oc-button
       :id="buttonId"
-      class="rounded-full size-14"
+      class="rounded-full size-12"
       appearance="filled"
       color-role="primary"
       :aria-label="computedAriaLabel"

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -7,7 +7,7 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="pb-2 px-4 top-0 z-20"
+            class="pb-2 px-4 top-0 z-20 bg-role-surface"
             :class="{ sticky: isSticky }"
           >
             <div class="flex justify-between items-center h-13">

packages/web-app-admin-settings/src/index.ts

@@ -5,15 +5,25 @@ import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
 import { urlJoin } from '@opencloud-eu/web-client'
 import {
+  activeApp,
   ApplicationInformation,
   AppMenuItemExtension,
   ClassicApplicationScript,
   defineWebApplication,
+  Extension,
+  FloatingActionButtonExtension,
   useAbility,
+  useRoute,
+  useSpaceActionsCreate,
   useUserStore
 } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import {
+  useGroupActionsCreateGroup,
+  useSpaceSettingsStore,
+  useUserActionsCreateUser
+} from './composables'
 
 const appId = 'admin-settings'
 
@@ -151,6 +161,19 @@ export default defineWebApplication({
     const { can } = useAbility()
     const userStore = useUserStore()
     const { $gettext } = useGettext()
+    const currentRoute = useRoute()
+    const { upsertSpace } = useSpaceSettingsStore()
+
+    const { actions: createUserActions } = useUserActionsCreateUser()
+    const createUserAction = computed(() => unref(createUserActions)[0])
+    const { actions: createGroupActions } = useGroupActionsCreateGroup()
+    const createGroupAction = computed(() => unref(createGroupActions)[0])
+    const { actions: createSpaceActions } = useSpaceActionsCreate({
+      onSpaceCreated: (space) => {
+        upsertSpace(space)
+      }
+    })
+    const createSpaceAction = computed(() => unref(createSpaceActions)[0])
 
     const appInfo: ApplicationInformation = {
       name: $gettext('Admin Settings'),
@@ -159,8 +182,8 @@ export default defineWebApplication({
       color: '#2b2b2b'
     }
 
-    const menuItems = computed<AppMenuItemExtension[]>(() => {
-      const items: AppMenuItemExtension[] = []
+    const extensions = computed<Extension[]>(() => {
+      const items: Extension[] = []
 
       const menuItemAvailable =
         userStore.user &&
@@ -170,17 +193,72 @@ export default defineWebApplication({
           can('read-all', 'Drive'))
 
       if (menuItemAvailable) {
-        items.push({
+        const menuItem: AppMenuItemExtension = {
           id: `app.${appInfo.id}.menuItem`,
           type: 'appMenuItem',
           label: () => appInfo.name,
           color: appInfo.color,
           icon: appInfo.icon,
           priority: 40,
           path: urlJoin(appInfo.id)
-        })
+        }
+
+        items.push(menuItem)
+      }
+
+      const floatingActionButton: FloatingActionButtonExtension = {
+        id: `com.github.opencloud-eu.web.${appInfo.id}.floating-action-button`,
+        extensionPointIds: ['global.floating-action-button'],
+        type: 'floatingActionButton',
+        icon: 'add',
+        label: () => $gettext('New'),
+        mode: () => 'handler',
+        handler: () => {
+          if (unref(currentRoute).name === 'admin-settings-spaces') {
+            return unref(createSpaceAction).handler()
+          }
+
+          if (unref(currentRoute).name === 'admin-settings-users') {
+            return unref(createUserAction).handler()
+          }
+
+          if (unref(currentRoute).name === 'admin-settings-groups') {
+            return unref(createGroupAction).handler()
+          }
+
+          return null
+        },
+        isActive: () => {
+          return activeApp(unref(currentRoute)) === appInfo.id
+        },
+        isDisabled: () => {
+          if (
+            unref(currentRoute).name === 'admin-settings-spaces' &&
+            unref(createSpaceAction).isVisible()
+          ) {
+            return false
+          }
+
+          if (
+            unref(currentRoute).name === 'admin-settings-users' &&
+            unref(createUserAction).isVisible()
+          ) {
+            return false
+          }
+
+          if (
+            unref(currentRoute).name === 'admin-settings-groups' &&
+            unref(createGroupAction).isVisible()
+          ) {
+            return false
+          }
+
+          return true
+        }
       }
 
+      items.push(floatingActionButton)
+
       return items
     })
 
@@ -189,7 +267,7 @@ export default defineWebApplication({
       routes,
       navItems,
       translations,
-      extensions: menuItems
+      extensions
     }
   }
 })

packages/web-app-admin-settings/src/views/Groups.vue

@@ -11,21 +11,6 @@
       :batch-action-items="selectedGroups"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <div>
-          <oc-button
-            id="create-group-btn"
-            v-oc-tooltip="limitedScreenSpace ? createGroupAction.label() : undefined"
-            :aria-label="limitedScreenSpace ? createGroupAction.label() : undefined"
-            class="mr-2"
-            appearance="filled"
-            @click="createGroupAction.handler()"
-          >
-            <oc-icon :name="createGroupActionIcon" />
-            <span v-if="!limitedScreenSpace" v-text="createGroupAction.label()" />
-          </oc-button>
-        </div>
-      </template>
       <template #mainContent>
         <app-loading-spinner v-if="isLoading" />
         <template v-else>
@@ -55,7 +40,7 @@ import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import GroupsList from '../components/Groups/GroupsList.vue'
 import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
 import { useGroupSettingsStore } from '../composables'
-import { useGroupActionsCreateGroup, useGroupActionsDelete } from '../composables/actions/groups'
+import { useGroupActionsDelete } from '../composables/actions/groups'
 import {
   AppLoadingSpinner,
   NoContentMessage,
@@ -98,13 +83,6 @@ export default defineComponent({
     const clientService = useClientService()
     const { $gettext } = useGettext()
 
-    const { actions: createGroupActions } = useGroupActionsCreateGroup()
-    const createGroupAction = computed(() => unref(createGroupActions)[0])
-    const createGroupActionIcon = computed(() => {
-      const action = unref(createGroupAction)
-      return typeof action.icon === 'function' ? action.icon() : action.icon
-    })
-
     const loadResourcesTask = useTask(function* (signal) {
       const loadedGroups = yield* call(
         clientService.graphAuthenticated.groups.listGroups(
@@ -186,8 +164,6 @@ export default defineComponent({
       batchActions,
       sideBarAvailablePanels,
       sideBarPanelContext,
-      createGroupAction,
-      createGroupActionIcon,
       groupSettingsStore,
       isLoading
     }

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -11,14 +11,6 @@
       :batch-action-items="selectedSpaces"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <create-space
-          v-if="hasCreatePermission"
-          :show-label="!limitedScreenSpace"
-          class="mr-2"
-          @space-created="(space: SpaceResource) => spaceSettingsStore.upsertSpace(space)"
-        />
-      </template>
       <template #sideBarHeader>
         <space-info v-if="selectedSpaces.length === 1" :space-resource="selectedSpaces[0]" />
       </template>
@@ -72,8 +64,7 @@ import {
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
   AppLoadingSpinner,
-  useAbility,
-  CreateSpace
+  useAbility
 } from '@opencloud-eu/web-pkg'
 import { call, SpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -113,8 +104,6 @@ const itemsPerPage = computed(() => {
   return parseInt(queryItemAsString(unref(itemsPerPageQuery)))
 })
 
-const hasCreatePermission = computed(() => can('create-all', 'Drive'))
-
 const loadResourcesTask = useTask(function* (signal) {
   const drives = yield* call(
     clientService.graphAuthenticated.drives.listAllDrives(

packages/web-app-admin-settings/src/views/Users.vue

@@ -11,22 +11,6 @@
       :batch-action-items="selectedUsers"
       :show-view-options="true"
     >
-      <template #topbarActions="{ limitedScreenSpace }">
-        <div>
-          <oc-button
-            v-if="createUserAction.isVisible()"
-            id="create-user-btn"
-            v-oc-tooltip="limitedScreenSpace ? createUserAction.label() : undefined"
-            :aria-label="limitedScreenSpace ? createUserAction.label() : undefined"
-            class="mr-2"
-            appearance="filled"
-            @click="createUserAction.handler()"
-          >
-            <oc-icon :name="createUserActionIcon" />
-            <span v-if="!limitedScreenSpace" v-text="createUserAction.label()" />
-          </oc-button>
-        </div>
-      </template>
       <template #mainContent>
         <users-list
           :is-loading="isLoading"
@@ -139,8 +123,7 @@ import {
   useUserActionsRemoveFromGroups,
   useUserActionsAddToGroups,
   useUserActionsEditLogin,
-  useUserActionsEditQuota,
-  useUserActionsCreateUser
+  useUserActionsEditQuota
 } from '../composables'
 import { User, Group, AppRole, Quota } from '@opencloud-eu/web-client/graph/generated'
 import {
@@ -208,13 +191,6 @@ export default defineComponent({
       return unref(groups).filter((g) => !g.groupTypes?.includes('ReadOnly'))
     })
 
-    const { actions: createUserActions } = useUserActionsCreateUser()
-    const createUserAction = computed(() => unref(createUserActions)[0])
-    const createUserActionIcon = computed(() => {
-      const action = unref(createUserAction)
-      return typeof action.icon === 'function' ? action.icon() : action.icon
-    })
-
     const { actions: deleteActions } = useUserActionsDelete()
     const { actions: removeFromGroupsActions } = useUserActionsRemoveFromGroups({
       groups: writableGroups
@@ -503,8 +479,6 @@ export default defineComponent({
       isFilteringMandatory,
       sideBarPanelContext,
       sideBarAvailablePanels,
-      createUserAction,
-      createUserActionIcon,
       userSettingsStore,
       isSideBarOpen
     }

packages/web-app-admin-settings/tests/unit/views/Users.spec.ts

@@ -88,8 +88,7 @@ const getClientService = () => {
 
 const selectors = {
   itemFilterGroupsStub: 'item-filter-stub[filtername="groups"]',
-  itemFilterRolesStub: 'item-filter-stub[filtername="roles"]',
-  createUserButton: '#create-user-btn'
+  itemFilterRolesStub: 'item-filter-stub[filtername="roles"]'
 }
 
 describe('Users view', () => {
@@ -108,24 +107,6 @@ describe('Users view', () => {
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
-  describe('create user button', () => {
-    it('should be displayed if action enabled', () => {
-      const { wrapper } = getMountedWrapper({
-        mountType: mount,
-        createUserActionEnabled: true
-      })
-      const createUserButton = wrapper.find(selectors.createUserButton)
-      expect(createUserButton.exists()).toBeTruthy()
-    })
-    it('should not be displayed if action disabled', () => {
-      const { wrapper } = getMountedWrapper({
-        mountType: mount,
-        createUserActionEnabled: false
-      })
-      const createUserButton = wrapper.find(selectors.createUserButton)
-      expect(createUserButton.exists()).toBeFalsy()
-    })
-  })
 
   describe('computed method "sideBarAvailablePanels"', () => {
     it('should contain EditPanel when one user is selected', () => {

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
@@ -14,9 +14,6 @@ exports[`Users view > list view > renders initially warning if filters are manda
             </div>
           </div>
           <div class="flex items-center mt-1 min-h-10">
-            <div>
-              <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="create-user-btn" class="mr-2"></oc-button-stub>
-            </div>
             <!--v-if-->
           </div>
         </div>
@@ -65,7 +62,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 bg-role-surface sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
@@ -74,9 +71,6 @@ exports[`Users view > list view > renders list initially 1`] = `
             </div>
           </div>
           <div class="flex items-center mt-1 min-h-10">
-            <div>
-              <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="create-user-btn" class="mr-2"></oc-button-stub>
-            </div>
             <!--v-if-->
           </div>
         </div>