fix(pci-block-storage): redirections

Signed-off-by: Florian Renaut <florian.renaut@corp.ovh.com>
ovh · Jun 25, 2024 · 8219098 · 8219098
1 parent 1cb0d5d
commit 8219098
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 40 deletions.
diff --git a/packages/manager/apps/pci-block-storage/src/components/StorageActionRedirect.tsx b/packages/manager/apps/pci-block-storage/src/components/StorageActionRedirect.tsx
@@ -0,0 +1,14 @@
+import { Navigate, useParams, useSearchParams } from 'react-router-dom';
+
+export const StorageActionRedirect = ({ action }: { action: string }) => {
+  const { projectId } = useParams();
+  const [searchParams] = useSearchParams();
+  return (
+    <Navigate
+      to={`/pci/projects/${projectId}/storages/blocks/${action}/${searchParams.get(
+        'storageId',
+      )}`}
+      replace={true}
+    />
+  );
+};
diff --git a/packages/manager/apps/pci-block-storage/src/components/list/Actions.component.tsx b/packages/manager/apps/pci-block-storage/src/components/list/Actions.component.tsx
@@ -29,6 +29,8 @@ export default function ActionsComponent({
   projectUrl,
 }: Readonly<ActionsProps>) {
   const { t } = useTranslation();
+  const hrefAttach = useHref(`./attach/${volume.id}`);
+  const hrefDetach = useHref(`./detach/${volume.id}`);
   const hrefRemove = useHref(`./delete/${volume.id}`);
   const hrefCreateBackup = `${projectUrl}/storages/volume-backup/create?volume=${volume.id}`;
 
@@ -63,6 +65,27 @@ export default function ActionsComponent({
           </OsdsText>
         </OsdsButton>
       </OsdsMenuItem>
+      <OsdsMenuItem>
+        <OsdsButton
+          size={ODS_BUTTON_SIZE.sm}
+          variant={ODS_BUTTON_VARIANT.ghost}
+          color={ODS_THEME_COLOR_INTENT.primary}
+          href={volume.attachedTo?.length ? hrefDetach : hrefAttach}
+        >
+          <OsdsText
+            size={ODS_THEME_TYPOGRAPHY_SIZE._500}
+            level={ODS_TEXT_LEVEL.button}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            slot={'start'}
+          >
+            {t(
+              `pci_projects_project_storages_blocks_instance_${
+                volume.attachedTo?.length ? 'detach' : 'attach'
+              }_label`,
+            )}
+          </OsdsText>
+        </OsdsButton>
+      </OsdsMenuItem>
       <OsdsMenuItem>
         <OsdsButton
           size={ODS_BUTTON_SIZE.sm}

diff --git a/packages/manager/apps/pci-block-storage/src/pages/Layout.tsx b/packages/manager/apps/pci-block-storage/src/pages/Layout.tsx
@@ -1,5 +1,4 @@
 import { Outlet, useParams, useRouteError } from 'react-router-dom';
-
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { Suspense, useContext } from 'react';
 import { ErrorBanner, useProject } from '@ovhcloud/manager-components';
@@ -19,7 +18,6 @@ export default function Layout() {
         <ShellRoutingSync />
         {isSuccess && (
           <>
-            <HidePreloader />
             <Outlet />
           </>
         )}

diff --git a/packages/manager/apps/pci-block-storage/src/pages/attach/AttachStorage.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/attach/AttachStorage.page.tsx
@@ -14,6 +14,7 @@ import { useNotifications } from '@ovhcloud/manager-components';
 import { Instance } from '@/api/data/instance';
 import { useInstances } from '@/api/hooks/useInstance';
 import { useAttachVolume, useVolume } from '@/api/hooks/useVolume';
+import NoInstanceWarningMessage from './NoInstanceAvailableWarningMessage';
 
 export default function AttachStorage() {
   const navigate = useNavigate();
@@ -86,22 +87,22 @@ export default function AttachStorage() {
   });
 
   const isPending = isInstancesPending || isAttachPending;
-  const canAttach = !isPending;
+  const canAttach = !isPending && selectedInstance?.id;
 
   return (
     <OsdsModal
       headline={t('pci_projects_project_storages_blocks_block_attach_title')}
       onOdsModalClose={onClose}
     >
       <slot name="content">
-        {isPending ? (
+        {isPending && (
           <OsdsSpinner
             inline
             size={ODS_SPINNER_SIZE.md}
             className="block text-center"
-            data-testid="deleteGateway-spinner"
           />
-        ) : (
+        )}
+        {!isPending && instances?.length > 0 && (
           <OsdsSelect
             value={selectedInstance?.id}
             inline={true}
@@ -120,6 +121,7 @@ export default function AttachStorage() {
             ))}
           </OsdsSelect>
         )}
+        {!isPending && !instances?.length && <NoInstanceWarningMessage />}
       </slot>
       <OsdsButton
         slot="actions"

diff --git a/...ges/manager/apps/pci-block-storage/src/pages/attach/NoInstanceAvailableWarningMessage.tsx b/...ges/manager/apps/pci-block-storage/src/pages/attach/NoInstanceAvailableWarningMessage.tsx
@@ -0,0 +1,36 @@
+import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { useTranslation } from 'react-i18next';
+
+export default function NoInstanceWarningMessage() {
+  const { t } = useTranslation('attach');
+  return (
+    <OsdsText
+      level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+      color={ODS_THEME_COLOR_INTENT.text}
+      size={ODS_TEXT_SIZE._400}
+      className={'block mt-6'}
+    >
+      <OsdsMessage
+        color={ODS_THEME_COLOR_INTENT.warning}
+        icon={ODS_ICON_NAME.WARNING}
+        className="mt-6"
+      >
+        <OsdsText
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+          color={ODS_THEME_COLOR_INTENT.text}
+        >
+          {t(
+            'pci_projects_project_storages_blocks_block_attach_error_no_compatible_instance',
+          )}
+        </OsdsText>
+      </OsdsMessage>
+    </OsdsText>
+  );
+}
diff --git a/packages/manager/apps/pci-block-storage/src/pages/delete/DeleteStorage.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/delete/DeleteStorage.page.tsx
@@ -84,7 +84,6 @@ export default function DeleteStorage() {
             inline
             size={ODS_SPINNER_SIZE.md}
             className="block text-center"
-            data-testid="deleteGateway-spinner"
           />
         ) : (
           <>

diff --git a/packages/manager/apps/pci-block-storage/src/pages/detach/DetachStorage.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/detach/DetachStorage.page.tsx
@@ -90,7 +90,6 @@ export default function DetachStorage() {
             inline
             size={ODS_SPINNER_SIZE.md}
             className="block text-center"
-            data-testid="deleteGateway-spinner"
           />
         ) : (
           <OsdsText

diff --git a/packages/manager/apps/pci-block-storage/src/pages/list/List.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/list/List.page.tsx
@@ -40,6 +40,7 @@ import {
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
 import { FilterCategories, FilterComparator } from '@ovh-ux/manager-core-api';
+import HidePreloader from '@/core/HidePreloader';
 import { useAllVolumes, useVolumes } from '@/api/hooks/useVolume';
 import { useDatagridColumn } from '@/hooks/useDatagridColumn';
 
@@ -92,6 +93,7 @@ export default function ListingPage() {
       condition={allVolumes?.length === 0}
     >
       <>
+        <HidePreloader />
         {project && (
           <OsdsBreadcrumb
             items={[

diff --git a/packages/manager/apps/pci-block-storage/src/pages/onboarding/OnBoarding.page.tsx b/packages/manager/apps/pci-block-storage/src/pages/onboarding/OnBoarding.page.tsx
@@ -24,6 +24,7 @@ import {
   useParams,
   useRouteLoaderData,
 } from 'react-router-dom';
+import HidePreloader from '@/core/HidePreloader';
 import { GUIDES } from './onboarding.constants';
 import { useAllVolumes } from '@/api/hooks/useVolume';
 
@@ -113,6 +114,7 @@ export default function OnBoardingPage() {
       condition={volumes?.length > 0}
     >
       <>
+        <HidePreloader />
         {project && <OsdsBreadcrumb items={breadcrumbItems} />}
 
         {isDiscoveryProject(project) && (

diff --git a/packages/manager/apps/pci-block-storage/src/routes.tsx b/packages/manager/apps/pci-block-storage/src/routes.tsx
@@ -1,6 +1,4 @@
-import { redirect } from 'react-router-dom';
-import { getProjectQuery } from '@ovhcloud/manager-components';
-import queryClient from '@/queryClient';
+import { StorageActionRedirect } from '@/components/StorageActionRedirect';
 
 const lazyRouteConfig = (importFn: CallableFunction) => ({
   lazy: async () => {
@@ -29,8 +27,6 @@ export default [
   {
     id: 'blocks',
     path: ROUTE_PATHS.root,
-    loader: async ({ params }) =>
-      queryClient.fetchQuery(getProjectQuery(params.projectId)),
     ...lazyRouteConfig(() => import('@/pages/Layout')),
     children: [
       {
@@ -42,15 +38,7 @@ export default [
         children: [
           {
             path: 'attach',
-            loader: ({ params, request }) => {
-              // this redirection is added to be iso with angularJS app URLs
-              const storageId = new URL(request.url).searchParams.get(
-                'storageId',
-              );
-              return redirect(
-                `/pci/projects/${params.projectId}/storages/blocks/attach/${storageId}`,
-              );
-            },
+            element: <StorageActionRedirect action="attach" />,
           },
           {
             path: 'attach/:volumeId',
@@ -64,15 +52,7 @@ export default [
           },
           {
             path: 'detach',
-            loader: ({ params, request }) => {
-              // this redirection is added to be iso with angularJS app URLs
-              const storageId = new URL(request.url).searchParams.get(
-                'storageId',
-              );
-              return redirect(
-                `/pci/projects/${params.projectId}/storages/blocks/detach/${storageId}`,
-              );
-            },
+            element: <StorageActionRedirect action="detach" />,
           },
           {
             path: 'detach/:volumeId',
@@ -86,15 +66,7 @@ export default [
           },
           {
             path: 'delete',
-            loader: ({ params, request }) => {
-              // this redirection is added to be iso with angularJS app URLs
-              const storageId = new URL(request.url).searchParams.get(
-                'storageId',
-              );
-              return redirect(
-                `/pci/projects/${params.projectId}/storages/blocks/delete/${storageId}`,
-              );
-            },
+            element: <StorageActionRedirect action="delete" />,
           },
           {
             path: 'delete/:volumeId',