refactor: create dedicated action for creating groups

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

@@ -43,14 +43,10 @@
               :placeholder="inputPlaceholder"
               :label="inputLabel"
               :type="inputType"
-              :password-policy="inputPasswordPolicy"
-              :generate-password-method="inputGeneratePasswordMethod"
               :description-message="inputDescription"
               :disabled="inputDisabled"
               :fix-message-line="true"
               :selection-range="inputSelectionRange"
-              @password-challenge-completed="$emit('passwordChallengeCompleted')"
-              @password-challenge-failed="$emit('passwordChallengeFailed')"
               @update:model-value="inputOnInput"
               @keydown.enter.prevent="confirm"
             />
@@ -107,7 +103,6 @@ import OcIcon from '../OcIcon/OcIcon.vue'
 import OcTextInput from '../OcTextInput/OcTextInput.vue'
 import { FocusTrap } from 'focus-trap-vue'
 import { FocusTargetOrFalse, FocusTargetValueOrFalse } from 'focus-trap'
-import { PasswordPolicy } from '../../helpers'
 
 /**
  * Modals are generally used to force the user to focus on confirming or completing a single action.
@@ -364,22 +359,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    /**
-     * Password policy for the input
-     */
-    inputPasswordPolicy: {
-      type: Object as PropType<PasswordPolicy>,
-      required: false,
-      default: () => ({})
-    },
-    /**
-     * Method to generate random password for the input
-     */
-    inputGeneratePasswordMethod: {
-      type: Function as PropType<(...args: unknown[]) => string>,
-      required: false,
-      default: null
-    },
     /**
      * Overwrite default focused element
      * Can be `#id, .class`.
@@ -397,15 +376,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: [
-    'cancel',
-    'confirm',
-    'confirm-secondary',
-    'input',
-    'checkbox-changed',
-    'passwordChallengeCompleted',
-    'passwordChallengeFailed'
-  ],
+  emits: ['cancel', 'confirm', 'confirm-secondary', 'input', 'checkbox-changed'],
   setup() {
     const primaryButton = ref(null)
     const secondaryButton = ref(null)

packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue

@@ -1,39 +1,47 @@
 <template>
-  <oc-modal
-    :title="$gettext('Create group')"
-    :button-cancel-text="$gettext('Cancel')"
-    :button-confirm-text="$gettext('Create')"
-    :button-confirm-disabled="isFormInvalid"
-    focus-trap-initial="#create-group-input-display-name"
-    @cancel="$emit('cancel')"
-    @confirm="$emit('confirm', group)"
-  >
-    <template #content>
-      <form autocomplete="off" @submit.prevent="onFormSubmit">
-        <oc-text-input
-          id="create-group-input-display-name"
-          v-model="group.displayName"
-          class="oc-mb-s"
-          :label="$gettext('Group name') + '*'"
-          :error-message="formData.displayName.errorMessage"
-          :fix-message-line="true"
-          @update:model-value="validateDisplayName"
-        />
-        <input type="submit" class="oc-hidden" />
-      </form>
-    </template>
-  </oc-modal>
+  <form autocomplete="off" @submit.prevent="onConfirm">
+    <oc-text-input
+      id="create-group-input-display-name"
+      v-model="group.displayName"
+      class="oc-mb-s"
+      :label="$gettext('Group name') + '*'"
+      :error-message="formData.displayName.errorMessage"
+      :fix-message-line="true"
+      @update:model-value="validateDisplayName"
+    />
+    <input type="submit" class="oc-hidden" />
+    <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
+      <oc-button
+        class="oc-modal-body-actions-cancel oc-ml-s"
+        appearance="outline"
+        variation="passive"
+        @click="onCancel"
+        >{{ $gettext('Cancel') }}
+      </oc-button>
+      <oc-button
+        class="oc-modal-body-actions-confirm oc-ml-s"
+        appearance="filled"
+        variation="primary"
+        :disabled="isFormInvalid"
+        @click="onConfirm"
+        >{{ $gettext('Confirm') }}
+      </oc-button>
+    </div>
+  </form>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { computed, defineComponent, ref, unref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { MaybeRef, useClientService } from '@ownclouders/web-pkg'
+import { MaybeRef, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
-  emits: ['cancel', 'confirm'],
-  setup() {
+  setup(props, { expose }) {
+    const { $gettext } = useGettext()
+    const store = useStore()
+    const eventBus = useEventBus()
     const clientService = useClientService()
 
     const group: MaybeRef<Group> = ref({ displayName: '' })
@@ -44,17 +52,48 @@ export default defineComponent({
       }
     })
 
+    const isFormInvalid = computed(() => {
+      return Object.keys(unref(formData))
+        .map((k) => !!unref(formData)[k].valid)
+        .includes(false)
+    })
+
+    const onConfirm = async () => {
+      if (unref(isFormInvalid)) {
+        return
+      }
+
+      try {
+        const client = clientService.graphAuthenticated
+        const response = await client.groups.createGroup(unref(group))
+        store.dispatch('showMessage', {
+          title: $gettext('Group was created successfully')
+        })
+        eventBus.publish('app.admin-settings.groups.add', { ...response?.data, members: [] })
+      } catch (error) {
+        console.error(error)
+        store.dispatch('showErrorMessage', {
+          title: $gettext('Failed to create group'),
+          error
+        })
+      } finally {
+        store.dispatch('hideModal')
+      }
+    }
+
+    const onCancel = () => {
+      store.dispatch('hideModal')
+    }
+
+    expose({ onConfirm, onCancel })
+
     return {
       clientService,
       group,
-      formData
-    }
-  },
-  computed: {
-    isFormInvalid() {
-      return Object.keys(this.formData)
-        .map((k) => !!this.formData[k].valid)
-        .includes(false)
+      formData,
+      isFormInvalid,
+      onConfirm,
+      onCancel
     }
   },
   methods: {
@@ -88,12 +127,6 @@ export default defineComponent({
       this.formData.displayName.errorMessage = ''
       this.formData.displayName.valid = true
       return true
-    },
-    onFormSubmit() {
-      if (this.isFormInvalid) {
-        return
-      }
-      this.$emit('confirm', this.group)
     }
   }
 })

packages/web-app-admin-settings/src/composables/actions/groups/index.ts

@@ -1,2 +1,3 @@
+export * from './useGroupActionsCreateGroup'
 export * from './useGroupActionsDelete'
 export * from './useGroupActionsEdit'

packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts

@@ -0,0 +1,35 @@
+import { useStore } from '@ownclouders/web-pkg'
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { UserAction } from '@ownclouders/web-pkg'
+import CreateGroupModal from '../../../components/Groups/CreateGroupModal.vue'
+
+export const useGroupActionsCreateGroup = () => {
+  const store = useStore()
+  const { $gettext } = useGettext()
+
+  const handler = () => {
+    return store.dispatch('createModal', {
+      variation: 'passive',
+      title: $gettext('Create group'),
+      hideActions: true,
+      customComponent: CreateGroupModal
+    })
+  }
+
+  const actions = computed((): UserAction[] => [
+    {
+      name: 'create-group',
+      icon: 'add',
+      componentType: 'button',
+      class: 'oc-groups-actions-create-group',
+      label: () => $gettext('New group'),
+      isEnabled: () => true,
+      handler
+    }
+  ])
+
+  return {
+    actions
+  }
+}

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

@@ -20,10 +20,10 @@
             class="oc-mr-s"
             variation="primary"
             appearance="filled"
-            @click="onToggleCreateGroupModal"
+            @click="createGroupAction.handler()"
           >
-            <oc-icon name="add" />
-            <span v-text="$gettext('New group')" />
+            <oc-icon :name="createGroupAction.icon" />
+            <span v-text="createGroupAction.label()" />
           </oc-button>
         </div>
       </template>
@@ -53,23 +53,17 @@
         </div>
       </template>
     </app-template>
-    <create-group-modal
-      v-if="createGroupModalOpen"
-      @cancel="onToggleCreateGroupModal"
-      @confirm="onCreateGroup"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import AppTemplate from '../components/AppTemplate.vue'
-import CreateGroupModal from '../components/Groups/CreateGroupModal.vue'
 import ContextActions from '../components/Groups/ContextActions.vue'
 import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import GroupsList from '../components/Groups/GroupsList.vue'
 import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
-import { useGroupActionsDelete } from '../composables'
+import { useGroupActionsDelete, useGroupActionsCreateGroup } from '../composables'
 import {
   NoContentMessage,
   SideBarPanel,
@@ -91,7 +85,6 @@ export default defineComponent({
     AppTemplate,
     GroupsList,
     NoContentMessage,
-    CreateGroupModal,
     ContextActions
   },
   provide() {
@@ -102,13 +95,17 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const groups = ref([])
-    let loadResourcesEventToken
     const template = ref()
     const selectedGroups = ref([])
-    const createGroupModalOpen = ref(false)
     const clientService = useClientService()
     const { $gettext } = useGettext()
 
+    let loadResourcesEventToken: string
+    let addGroupEventToken: string
+
+    const { actions: createGroupActions } = useGroupActionsCreateGroup()
+    const createGroupAction = computed(() => unref(createGroupActions)[0])
+
     const currentPageQuery = useRouteQuery('page', '1')
     const currentPage = computed(() => {
       return parseInt(queryItemAsString(unref(currentPageQuery)))
@@ -134,26 +131,6 @@ export default defineComponent({
       )
     })
 
-    const onToggleCreateGroupModal = () => {
-      createGroupModalOpen.value = !unref(createGroupModalOpen)
-    }
-    const onCreateGroup = async (group: Group) => {
-      try {
-        const client = clientService.graphAuthenticated
-        const response = await client.groups.createGroup(group)
-        onToggleCreateGroupModal()
-        store.dispatch('showMessage', {
-          title: $gettext('Group was created successfully')
-        })
-        groups.value.push({ ...response?.data, members: [] })
-      } catch (error) {
-        console.error(error)
-        store.dispatch('showErrorMessage', {
-          title: $gettext('Failed to create group'),
-          error
-        })
-      }
-    }
     const onEditGroup = async (editGroup: Group) => {
       try {
         const client = clientService.graphAuthenticated
@@ -233,26 +210,29 @@ export default defineComponent({
           currentPageQuery.value = pageCount.toString()
         }
       })
+
+      addGroupEventToken = eventBus.subscribe('app.admin-settings.groups.add', (group: Group) => {
+        groups.value.push(group)
+      })
     })
 
     onBeforeUnmount(() => {
       eventBus.unsubscribe('app.admin-settings.list.load', loadResourcesEventToken)
+      eventBus.unsubscribe('app.admin-settings.groups.add', addGroupEventToken)
     })
 
     return {
       ...useSideBar(),
       groups,
       selectedGroups,
-      createGroupModalOpen,
       template,
       loadResourcesTask,
       clientService,
       batchActions,
       sideBarAvailablePanels,
       sideBarPanelContext,
-      onCreateGroup,
-      onEditGroup,
-      onToggleCreateGroupModal
+      createGroupAction,
+      onEditGroup
     }
   },
   computed: {