[ENG-9644] update provider name for url link on file Provider combobox selection & show specified provider in combobox and files when accessing by link (#748)

- Ticket: https://openscience.atlassian.net/browse/ENG-9644
- Feature flag: n/a

## Purpose

Users shared links to their project and registration files lists previously, using the format https://osf.io/GUID/files/provider/ .  These now break and lead to a Not Found page.

These need to redirect to https://osf.io/GUID/files/provider/ 

Ideal solution via BrianG: format links to open up the provider page

## Summary of Changes

update provider name for url link on file Provider combobox selection  &  show specified provider in combobox and files when accessing by link

Author: mkovalua

src/app/core/guards/is-file-provider.guard.ts

@@ -0,0 +1,9 @@
+import { CanMatchFn, Route, UrlSegment } from '@angular/router';
+
+import { FileProvider } from '@osf/features/files/constants';
+
+export const isFileProvider: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
+  const id = segments[0]?.path;
+
+  return !!(id && Object.values(FileProvider).some((provider) => provider === id));
+};

src/app/features/files/constants/file-provider.constants.ts

@@ -11,4 +11,6 @@ export const FileProvider = {
   GitLab: 'gitlab',
   Figshare: 'figshare',
   Dataverse: 'dataverse',
+  OwnCloud: 'owncloud',
+  AzureBlobStorage: 'azureblobstorage',
 };

src/app/features/files/files.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 
+import { isFileProvider } from '@core/guards/is-file-provider.guard';
 import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 
 import { FilesContainerComponent } from './pages/files-container/files-container.component';
@@ -11,6 +12,12 @@ export const filesRoutes: Routes = [
     children: [
       {
         path: '',
+        pathMatch: 'full',
+        redirectTo: 'osfstorage',
+      },
+      {
+        path: ':fileProvider',
+        canMatch: [isFileProvider],
         loadComponent: () => import('@osf/features/files/pages/files/files.component').then((c) => c.FilesComponent),
       },
       {

src/app/features/files/pages/files/files.component.html

@@ -13,6 +13,7 @@
         inputId="in_label"
         [options]="rootFoldersOptions()"
         [(ngModel)]="currentRootFolder"
+        (onChange)="handleRootFolderChange($event.value)"
         styleClass="w-full"
         variant="filled"
       >

src/app/features/files/pages/files/files.component.ts

@@ -7,7 +7,18 @@ import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
 
-import { catchError, debounceTime, distinctUntilChanged, filter, finalize, forkJoin, of, switchMap, take } from 'rxjs';
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  finalize,
+  forkJoin,
+  map,
+  of,
+  switchMap,
+  take,
+} from 'rxjs';
 
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import {
@@ -22,7 +33,7 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -244,6 +255,11 @@ export class FilesComponent {
     () => this.isButtonDisabled() || (this.googleFilePickerComponent()?.isGFPDisabled() ?? false)
   );
 
+  private route = inject(ActivatedRoute);
+  readonly providerName = toSignal(
+    this.route?.params?.pipe(map((params) => params['fileProvider'])) ?? of('osfstorage')
+  );
+
   constructor() {
     this.activeRoute.parent?.parent?.parent?.params.subscribe((params) => {
       if (params['id']) {
@@ -264,15 +280,18 @@ export class FilesComponent {
     });
 
     effect(() => {
-      const rootFolders = this.rootFolders();
-      if (rootFolders) {
-        const osfRootFolder = rootFolders.find(
-          (folder: FileFolderModel) => folder.provider === FileProvider.OsfStorage
-        );
-        if (osfRootFolder) {
+      const rootFoldersOptions = this.rootFoldersOptions();
+      const providerName = this.providerName();
+
+      if (rootFoldersOptions && rootFoldersOptions.length && providerName) {
+        const rootFoldersOption = rootFoldersOptions.find((option) => option.folder.provider === providerName);
+
+        if (!rootFoldersOption) {
+          this.router.navigate([`/${this.resourceId()}/files`, FileProvider.OsfStorage]);
+        } else {
           this.currentRootFolder.set({
-            label: this.translateService.instant('files.storageLocation'),
-            folder: osfRootFolder,
+            label: rootFoldersOption.label,
+            folder: rootFoldersOption.folder,
           });
         }
       }
@@ -652,4 +671,10 @@ export class FilesComponent {
   onUpdateFoldersStack(newStack: FileFolderModel[]): void {
     this.foldersStack = [...newStack];
   }
+
+  handleRootFolderChange(selectedFolder: FileLabelModel) {
+    const provider = selectedFolder.folder?.provider;
+    const resourceId = this.resourceId();
+    this.router.navigate([`/${resourceId}/files`, provider]);
+  }
 }