Organize "New" menu | Add default extension to menu item (#9906)

* Organize New-Menu / add extensions * WIP * Fix styling add extension * Only show extension if setting is enabled, Update snapshots * Remove inline style * Add changelog item * Adjust min-width depending on file extensions shown * Fix double seperator line * Add unittests * Fix typo * Move url shortcut to bottom position in menu
owncloud · Dec 13, 2023 · c2b9e39 · c2b9e39
1 parent d4eb795
commit c2b9e39
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 20 deletions.
diff --git a/changelog/unreleased/enhancement-reorganize-new-menu b/changelog/unreleased/enhancement-reorganize-new-menu
@@ -0,0 +1,7 @@
+Enhancement: Reorganize "New" menu
+
+We've reorganized the "new" menu and added optional file extension indicators that will show if the user has
+file extensions enabled in the files view.
+
+https://github.com/owncloud/web/pull/9906
+https://github.com/owncloud/web/issues/9847
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -28,13 +28,37 @@
         class="oc-width-auto"
         padding-size="small"
       >
-        <oc-list id="create-list">
+        <oc-list id="create-list" :class="areFileExtensionsShown ? 'expanded-list' : null">
           <li class="create-list-folder oc-menu-item-hover">
             <oc-button id="new-folder-btn" appearance="raw" @click="createNewFolderAction">
               <oc-resource-icon :resource="folderIconResource" size="medium" />
               <span v-text="$gettext('Folder')" />
             </oc-button>
           </li>
+          <template v-if="mimetypesAllowedForCreation">
+            <li
+              v-for="(mimeTypeAction, key) in createNewFileMimeTypeActions"
+              :key="`file-creation-item-external-${key}`"
+              class="create-list-file oc-menu-item-hover"
+            >
+              <oc-button appearance="raw" @click="mimeTypeAction.handler">
+                <oc-resource-icon :resource="getIconResource(mimeTypeAction)" size="medium" />
+                <span
+                  class="create-list-file-item-text"
+                  v-text="$gettext(mimeTypeAction.label())"
+                />
+                <span
+                  v-if="areFileExtensionsShown && mimeTypeAction.ext"
+                  class="create-list-file-item-extension"
+                  v-text="mimeTypeAction.ext"
+                />
+              </oc-button>
+            </li>
+          </template>
+          <li
+            v-if="mimetypesAllowedForCreation && createNewFileMimeTypeActions.length > 0"
+            class="bottom-seperator"
+          />
           <li
             v-for="(fileAction, key) in createNewFileActions"
             :key="`file-creation-item-${key}`"
@@ -46,25 +70,23 @@
               @click="fileAction.handler"
             >
               <oc-resource-icon :resource="getIconResource(fileAction)" size="medium" />
-              <span>{{ fileAction.label() }}</span>
+              <span class="create-list-file-item-text">{{ fileAction.label() }}</span>
+              <span
+                v-if="areFileExtensionsShown && fileAction.ext"
+                class="create-list-file-item-extension"
+                >{{ fileAction.ext }}</span
+              >
             </oc-button>
           </li>
-          <template v-if="mimetypesAllowedForCreation">
-            <li
-              v-for="(mimeTypeAction, key) in createNewFileMimeTypeActions"
-              :key="`file-creation-item-external-${key}`"
-              class="create-list-file oc-menu-item-hover"
-            >
-              <oc-button appearance="raw" @click="mimeTypeAction.handler">
-                <oc-resource-icon :resource="getIconResource(mimeTypeAction)" size="medium" />
-                <span v-text="$gettext(mimeTypeAction.label())" />
-              </oc-button>
-            </li>
-          </template>
           <li class="create-list-shortcut oc-menu-item-hover">
             <oc-button id="new-shortcut-btn" appearance="raw" @click="createNewShortcutAction">
               <oc-icon name="external-link" size="medium" />
               <span v-text="$gettext('Shortcut')" />
+              <span
+                v-if="areFileExtensionsShown"
+                class="create-list-file-item-extension"
+                v-text="'url'"
+              />
             </oc-button>
           </li>
         </oc-list>
@@ -242,6 +264,7 @@ export default defineComponent({
     const route = useRoute()
     const language = useGettext()
     const hasSpaces = useCapabilitySpacesEnabled(store)
+    const areFileExtensionsShown = computed(() => unref(store.state.Files.areFileExtensionsShown))
 
     useUpload({ uppyService })
 
@@ -424,6 +447,7 @@ export default defineComponent({
       showDrop,
       isCreateNewShortcutModalOpen,
       closeCreateNewShortcutModal,
+      areFileExtensionsShown,
 
       // HACK: exported for unit tests:
       onUploadComplete
@@ -507,6 +531,7 @@ export default defineComponent({
     border: 1px solid transparent;
 
     button {
+      display: inline-flex;
       gap: 10px;
       justify-content: left;
       width: 100%;
@@ -526,11 +551,33 @@ export default defineComponent({
   }
 }
 
+.create-list {
+  &-file-item {
+    &-text {
+      display: inline-flex;
+      text-align: left;
+      justify-content: flex-start;
+    }
+    &-extension {
+      display: inline-flex;
+      text-align: left;
+      justify-content: right;
+      flex: 1;
+      font-weight: normal !important;
+      font-size: var(--oc-font-size-small);
+      opacity: 0.7;
+    }
+  }
+}
+
 #upload-list,
 #new-file-menu-drop {
   min-width: 230px;
 }
 
+.expanded-list {
+  min-width: 280px !important;
+}
 #create-list,
 #upload-list,
 #new-file-menu-drop {
@@ -543,6 +590,11 @@ export default defineComponent({
   border-top: 1px solid var(--oc-color-border);
 }
 
+.bottom-seperator {
+  border-bottom: 1px solid var(--oc-color-border) !important;
+  margin-bottom: 8px;
+}
+
 #clipboard-btns {
   flex-flow: inherit;
 

diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -90,6 +90,13 @@ describe('CreateAndUpload component', () => {
       const { wrapper } = getWrapper({ newFileHandlers: fileHandlerMocks })
       expect(wrapper.html()).toMatchSnapshot()
     })
+    it('should show file extension if file extensions are enabled', () => {
+      const { wrapper } = getWrapper({
+        newFileHandlers: fileHandlerMocks,
+        areFileExtensionsShown: true
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
   })
   describe('clipboard buttons', () => {
     it('should show if clipboard is empty', () => {
@@ -175,7 +182,8 @@ function getWrapper({
   spaces = [],
   item = undefined,
   itemId = undefined,
-  newFileAction = false
+  newFileAction = false,
+  areFileExtensionsShown = false
 } = {}) {
   jest.mocked(useRequest).mockImplementation(() => ({
     makeRequest: jest.fn().mockResolvedValue({ status: 200 })
@@ -197,6 +205,7 @@ function getWrapper({
   storeOptions.getters.apps.mockImplementation(() => ({
     fileEditors: []
   }))
+  storeOptions.modules.Files.state.areFileExtensionsShown = areFileExtensionsShown
   storeOptions.modules.Files.getters.currentFolder.mockImplementation(() => currentFolder)
   storeOptions.modules.Files.getters.clipboardResources.mockImplementation(() => clipboardResources)
   storeOptions.modules.runtime.modules.spaces.getters.spaces.mockReturnValue(spaces)

diff --git a/...ges/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/...ges/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -48,7 +48,7 @@ exports[`CreateAndUpload component file handlers should show additional handlers
     </button>
   </span>
   <oc-drop-stub class="oc-width-auto" closeonclick="true" dropid="new-file-menu-drop" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#new-file-menu-btn">
-    <oc-list-stub id="create-list" raw="false">
+    <oc-list-stub class="" id="create-list" raw="false">
       <li class="create-list-folder oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-folder-btn" type="button">
           <!--v-if-->
@@ -57,28 +57,116 @@ exports[`CreateAndUpload component file handlers should show additional handlers
           <span>Folder</span>
         </button>
       </li>
+      <!--v-if-->
+      <li class="create-list-file oc-menu-item-hover">
+        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-txt" type="button">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
+          <span class="create-list-file-item-text">Plain text file</span>
+          <!--v-if-->
+        </button>
+      </li>
+      <li class="create-list-file oc-menu-item-hover">
+        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-md" type="button">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
+          <span class="create-list-file-item-text">Mark-down file</span>
+          <!--v-if-->
+        </button>
+      </li>
+      <li class="create-list-file oc-menu-item-hover">
+        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-drawio" type="button">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
+          <span class="create-list-file-item-text">Draw.io document</span>
+          <!--v-if-->
+        </button>
+      </li>
+      <li class="create-list-shortcut oc-menu-item-hover">
+        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-shortcut-btn" type="button">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span" variation="passive"></oc-icon-stub>
+          <span>Shortcut</span>
+          <!--v-if-->
+        </button>
+      </li>
+    </oc-list-stub>
+  </oc-drop-stub>
+  <span>
+    <button aria-label="Upload files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-outline" id="upload-menu-btn" type="button">
+      <!--v-if-->
+      <!-- @slot Content of the button -->
+      <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span" variation="passive"></oc-icon-stub>
+      <span>Upload</span>
+    </button>
+  </span>
+  <oc-drop-stub class="oc-width-auto" closeonclick="true" dropid="upload-menu-drop" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#upload-menu-btn">
+    <oc-list-stub class="" id="upload-list" raw="false">
+      <li class="oc-menu-item-hover">
+        <resource-upload-stub btnclass="oc-width-1-1" btnlabel="" isfolder="false"></resource-upload-stub>
+      </li>
+      <li class="oc-menu-item-hover">
+        <resource-upload-stub btnclass="oc-width-1-1" btnlabel="" isfolder="true"></resource-upload-stub>
+      </li>
+    </oc-list-stub>
+    <!--v-if-->
+  </oc-drop-stub>
+  <!--v-if-->
+</div>
+`;
+
+exports[`CreateAndUpload component file handlers should show file extension if file extensions are enabled 1`] = `
+<!--v-if-->
+
+<div class="create-and-upload-actions oc-flex-inline oc-mr-s">
+  <span>
+    <button aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-file-menu-btn" type="button">
+      <!--v-if-->
+      <!-- @slot Content of the button -->
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span" variation="passive"></oc-icon-stub>
+      <span>New</span>
+    </button>
+  </span>
+  <oc-drop-stub class="oc-width-auto" closeonclick="true" dropid="new-file-menu-drop" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#new-file-menu-btn">
+    <oc-list-stub class="expanded-list" id="create-list" raw="false">
+      <li class="create-list-folder oc-menu-item-hover">
+        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-folder-btn" type="button">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
+          <span>Folder</span>
+        </button>
+      </li>
+      <!--v-if-->
       <li class="create-list-file oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-txt" type="button">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
-          <span>Plain text file</span>
+          <span class="create-list-file-item-text">Plain text file</span>
+          <span class="create-list-file-item-extension">txt</span>
         </button>
       </li>
       <li class="create-list-file oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-md" type="button">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
-          <span>Mark-down file</span>
+          <span class="create-list-file-item-text">Mark-down file</span>
+          <span class="create-list-file-item-extension">md</span>
         </button>
       </li>
       <li class="create-list-file oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-drawio" type="button">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-resource-icon-stub resource="[object Object]" size="medium"></oc-resource-icon-stub>
-          <span>Draw.io document</span>
+          <span class="create-list-file-item-text">Draw.io document</span>
+          <span class="create-list-file-item-extension">drawio</span>
         </button>
       </li>
       <li class="create-list-shortcut oc-menu-item-hover">
@@ -87,6 +175,7 @@ exports[`CreateAndUpload component file handlers should show additional handlers
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span" variation="passive"></oc-icon-stub>
           <span>Shortcut</span>
+          <span class="create-list-file-item-extension">url</span>
         </button>
       </li>
     </oc-list-stub>

diff --git a/packages/web-test-helpers/src/mocks/store/filesModuleMockOptions.ts b/packages/web-test-helpers/src/mocks/store/filesModuleMockOptions.ts
@@ -4,7 +4,8 @@ export const filesModuleMockOptions = {
     state: {
       highlightedFile: undefined,
       currentFolder: undefined,
-      latestSelectedId: undefined
+      latestSelectedId: undefined,
+      areFileExtensionsShown: undefined
     },
     getters: {
       currentFolder: jest.fn(),