Merge pull request #10209 from owncloud/merge-stable-8.0-to-master-20…

…231219 chore: merge stable-8.0 to master
owncloud · Dec 19, 2023 · 2561f05 · 2561f05
2 parents 0fce6eb + 7232fd8
commit 2561f05
Show file tree

Hide file tree

Showing 57 changed files with 886 additions and 922 deletions.
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -51,14 +51,6 @@
               @keydown.enter.prevent="confirm"
             />
           </template>
-          <div v-if="checkboxLabel" class="oc-modal-body-actions oc-flex oc-flex-left">
-            <oc-checkbox
-              v-model="checkboxValue"
-              size="medium"
-              :label="checkboxLabel"
-              :aria-label="checkboxLabel"
-            />
-          </div>
         </div>
 
         <div v-if="!hideActions" class="oc-modal-body-actions oc-flex oc-flex-right">
@@ -70,15 +62,6 @@
             @click="cancelModalAction"
             v-text="buttonCancelText"
           />
-          <oc-button
-            v-if="buttonSecondaryText"
-            ref="secondaryButton"
-            class="oc-modal-body-actions-secondary oc-ml-s"
-            :variation="buttonSecondaryVariation"
-            :appearance="buttonSecondaryAppearance"
-            @click="secondaryModalAction"
-            v-text="buttonSecondaryText"
-          />
           <oc-button
             v-if="!withoutButtonConfirm"
             ref="primaryButton"
@@ -98,7 +81,6 @@
 <script lang="ts">
 import { defineComponent, PropType, ComponentPublicInstance, ref, onMounted, unref } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
-import OcCheckbox from '../OcCheckbox/OcCheckbox.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcTextInput from '../OcTextInput/OcTextInput.vue'
 import { FocusTrap } from 'focus-trap-vue'
@@ -126,7 +108,6 @@ export default defineComponent({
 
   components: {
     OcButton,
-    OcCheckbox,
     OcIcon,
     OcTextInput,
     FocusTrap
@@ -169,14 +150,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    /**
-     * Modal checkbox label
-     */
-    checkboxLabel: {
-      type: String,
-      required: false,
-      default: ''
-    },
     /**
      * Contextual helper label
      */
@@ -223,36 +196,6 @@ export default defineComponent({
         return ['outline', 'filled', 'raw'].includes(value)
       }
     },
-    /**
-     * Text of the secondary button
-     */
-    buttonSecondaryText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Variation type of the secondary button
-     */
-    buttonSecondaryVariation: {
-      type: String,
-      required: false,
-      default: 'passive',
-      validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning'].includes(value)
-      }
-    },
-    /**
-     * Appearance of the secondary button
-     */
-    buttonSecondaryAppearance: {
-      type: String,
-      required: false,
-      default: 'outline',
-      validator: (value: string) => {
-        return ['outline', 'filled', 'raw'].includes(value)
-      }
-    },
     /**
      * Text of the confirm button
      */
@@ -376,28 +319,22 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['cancel', 'confirm', 'confirm-secondary', 'input', 'checkbox-changed'],
+  emits: ['cancel', 'confirm', 'input'],
   setup() {
     const primaryButton = ref(null)
-    const secondaryButton = ref(null)
     const cancelButton = ref(null)
 
     const setButtonsEqualWidth = () => {
       const _primaryButton = unref(primaryButton)
-      const _secondaryButton = unref(secondaryButton)
       const _cancelButton = unref(cancelButton)
 
       const primaryWidth = _primaryButton?.$el?.offsetWidth || 0
-      const secondaryWidth = _secondaryButton?.$el?.offsetWidth || 0
       const cancelWidth = _cancelButton?.$el?.offsetWidth || 0
-      const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
+      const maxWidth = Math.max(primaryWidth, cancelWidth)
 
       if (_primaryButton?.$el) {
         _primaryButton.$el.style.minWidth = `${maxWidth}px`
       }
-      if (_secondaryButton?.$el) {
-        _secondaryButton.$el.style.minWidth = `${maxWidth}px`
-      }
       if (_cancelButton?.$el) {
         _cancelButton.$el.style.minWidth = `${maxWidth}px`
       }
@@ -408,14 +345,12 @@ export default defineComponent({
 
     return {
       primaryButton,
-      secondaryButton,
       cancelButton
     }
   },
   data() {
     return {
-      userInputValue: null,
-      checkboxValue: false
+      userInputValue: null
     }
   },
   computed: {
@@ -456,10 +391,6 @@ export default defineComponent({
     inputValue: {
       handler: 'inputAssignPropAsValue',
       immediate: true
-    },
-    checkboxValue: {
-      handler: 'checkboxValueChanged',
-      immediate: true
     }
   },
   methods: {
@@ -469,9 +400,6 @@ export default defineComponent({
        */
       this.$emit('cancel')
     },
-    secondaryModalAction() {
-      this.$emit('confirm-secondary')
-    },
     confirm() {
       if (this.buttonConfirmDisabled || this.inputError) {
         return
@@ -493,9 +421,6 @@ export default defineComponent({
     },
     inputAssignPropAsValue(value) {
       this.userInputValue = value
-    },
-    checkboxValueChanged(value) {
-      this.$emit('checkbox-changed', value)
     }
   }
 })
@@ -694,7 +619,6 @@ export default defineComponent({
     message="Do you accept our terms of use?"
     button-cancel-text="Decline"
     button-confirm-text="Accept"
-    checkbox-label="I accept the terms of use"
     class="oc-mb-l oc-position-relative"
   />
 </div>
@@ -708,7 +632,6 @@ export default defineComponent({
     message="Do you accept our terms of use?"
     button-cancel-text="Decline"
     button-confirm-text="Accept"
-    button-secondary-text="Accept some"
     class="oc-mb-l oc-position-relative"
   />
 </div>

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -12,11 +12,9 @@ exports[`OcModal displays input 1`] = `
         <!--v-if-->
         <!--v-if-->
         <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
-        <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
         <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <!--v-if-->
         <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
@@ -36,11 +34,9 @@ exports[`OcModal hides icon if not specified 1`] = `
         <p class="oc-modal-body-message oc-mt-rm oc-mb-rm">Example message</p>
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
         <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <!--v-if-->
         <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
@@ -60,11 +56,9 @@ exports[`OcModal matches snapshot 1`] = `
         <p class="oc-modal-body-message oc-mt-rm oc-mb-rm">Example message</p>
         <!--v-if-->
         <!--v-if-->
-        <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
         <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <!--v-if-->
         <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
@@ -84,11 +78,9 @@ exports[`OcModal overrides props message with slot 1`] = `
         <div class="oc-modal-body-message">
           <p>Slot message</p>
         </div>
-        <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
         <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <!--v-if-->
         <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>

diff --git a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue b/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)
     }
   }
 })