New folder button

frontend/src/app/core/state/storage-files/storage-files.service.ts

@@ -79,6 +79,10 @@ export class StorageFilesResourceService {
     return this.httpClient.request<IUploadLink>(link.method, link.href, { body: link.payload });
   }
 
+  createFolder(href:string, body:{ name:string, parent_id:ID }):Observable<IStorageFile> {
+    return this.httpClient.post<IStorageFile>(href, body);
+  }
+
   reset():void {
     this.store.reset();
   }

frontend/src/app/shared/components/storages/file-picker-base-modal/file-picker-base-modal.component.ts

@@ -65,7 +65,7 @@ import {
   v3ErrorIdentifierOutboundRequestForbidden,
 } from 'core-app/features/hal/resources/error-resource';
 
-type Alert = 'none'|'noAccess'|'managedFolderNoAccess'|'managedFolderNotFound';
+type Alert = 'none'|'noAccess'|'managedFolderNoAccess'|'managedFolderNotFound'|'cannotCreateFolder';
 
 @Directive()
 export abstract class FilePickerBaseModalComponent extends OpModalComponent implements OnInit, OnDestroy {

frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.html

@@ -72,6 +72,17 @@
   </div>
 
   <div class="spot-action-bar">
+    <div class="spot-action-bar--left">
+      <button
+        type="button"
+        class="button spot-action-bar--action"
+        [disabled]="!canCreateFolder"
+        (click)="createAndNavigateToFolder()"
+      >
+        <span class="spot-icon spot-icon_folder-add op-files-tab--icon op-files-tab--icon_forums"></span>
+        <span [textContent]="text.buttons.newFolder"></span>
+      </button>
+    </div>
     <div class="spot-action-bar--right">
       <button
         type="button"

frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.ts

@@ -63,6 +63,7 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
     alertNoAccess: this.i18n.t('js.storages.files.project_folder_no_access'),
     alertNoManagedProjectFolder: this.i18n.t('js.storages.files.managed_project_folder_not_available'),
     alertNoAccessToManagedProjectFolder: this.i18n.t('js.storages.files.managed_project_folder_no_access'),
+    alertCannotCreateFolder: this.i18n.t('js.storages.files.cannot_create_folder'),
     content: {
       empty: this.i18n.t('js.storages.files.empty_folder'),
       emptyHint: this.i18n.t('js.storages.files.empty_folder_location_hint'),
@@ -74,6 +75,7 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
       submitEmptySelection: this.i18n.t('js.storages.file_links.selection_none'),
       cancel: this.i18n.t('js.button_cancel'),
       selectAll: this.i18n.t('js.storages.file_links.select_all'),
+      newFolder: this.i18n.t('js.storages.new_folder'),
     },
     tooltip: {
       directory_not_writeable: this.i18n.t('js.storages.files.directory_not_writeable'),
@@ -101,6 +103,14 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
     return this.currentDirectory.permissions.some((value) => value === 'writeable');
   }
 
+  public get canCreateFolder():boolean {
+    if (!this.currentDirectory) {
+      return false;
+    }
+
+    return this.currentDirectory.permissions.some((value) => value === 'writeable');
+  }
+
   public get alertText():Observable<string> {
     return this.showAlert
       .pipe(
@@ -112,6 +122,8 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
               return this.text.alertNoAccessToManagedProjectFolder;
             case 'managedFolderNotFound':
               return this.text.alertNoManagedProjectFolder;
+            case 'cannotCreateFolder':
+              return this.text.alertCannotCreateFolder;
             case 'none':
               return '';
             default:
@@ -170,4 +182,21 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
 
     return this.text.tooltip.file_not_selectable;
   }
+
+  public createAndNavigateToFolder() {
+    // eslint-disable-next-line
+    const value = window.prompt(this.text.buttons.newFolder);
+    if (!value) { return; }
+
+    this.storageFilesResourceService.createFolder(
+      this.locals.createFolderHref as string,
+      {
+        name: value,
+        parent_id: this.currentDirectory.id,
+      },
+    ).subscribe({
+      next: (newlyCreatedDirectory) => this.changeLevel(newlyCreatedDirectory),
+      error: (_) => this.showAlert.next('cannotCreateFolder'),
+    });
+  }
 }

frontend/src/app/shared/components/storages/storage/storage.component.ts

@@ -357,6 +357,7 @@ export class StorageComponent extends UntilDestroyedMixin implements OnInit, OnD
     const locals = {
       projectFolderHref: this.projectStorage._links.projectFolder?.href,
       projectFolderMode: this.projectStorage.projectFolderMode,
+      createFolderHref: `${this.projectStorage._links.storage.href}/folders`,
       storage,
     };
 

modules/storages/config/locales/js-en.yml

@@ -13,6 +13,7 @@ en:
       open_storage: "Open %{storageType}"
       select_location: "Select location"
       choose_location: "Choose location"
+      new_folder: "New folder"
 
       types:
         nextcloud: "Nextcloud"
@@ -49,6 +50,7 @@ en:
           newest data, and try again.
         managed_project_folder_no_access: >
           You have no access yet to the managed project folder. Please wait a bit and try again.
+        cannot_create_folder: Failed to create folder. Avoid using special characters and symbols.
         upload_keep_both: "Keep both"
         upload_replace: "Replace"