Add S3 navigation skeleton

Author: SanjalKatiyar

locales/en/plugin__odf-console.json

@@ -1166,11 +1166,16 @@
   "Edit bucket": "Edit bucket",
   "Refresh": "Refresh",
   "Objects": "Objects",
+  "Permissions": "Permissions",
+  "Management": "Management",
+  "Lifecycle rules": "Lifecycle rules",
   "Created via OBC": "Created via OBC",
   "Created via S3": "Created via S3",
   "MCG": "MCG",
   "Object path: ": "Object path: ",
   "Copy to share": "Copy to share",
+  "Bucket policy": "Bucket policy",
+  "CORS": "CORS",
   "Erase the contents of your bucket": "Erase the contents of your bucket",
   "Storage endpoint": "Storage endpoint",
   "Create on": "Create on",

packages/odf/components/s3-browser/bucket-details/BucketDetails.tsx

@@ -168,17 +168,17 @@ const BucketDetailsOverview: React.FC<{}> = ({}) => {
 
 type BucketDetailsProps = {
   obj: {
-    refresh: boolean;
+    fresh: boolean;
     resource?: K8sResourceCommon;
   };
 };
 
 export const BucketDetails: React.FC<BucketDetailsProps> = ({
-  obj: { resource, refresh },
+  obj: { resource, fresh },
 }) => {
   const { t } = useCustomTranslation();
 
-  return refresh ? (
+  return fresh ? (
     <>
       <BucketDetailsOverview />
       {resource && (

packages/odf/components/s3-browser/bucket-overview/BucketOverview.tsx

@@ -19,10 +19,9 @@ import {
   referenceForModel,
   getValidWatchK8sResourceObj,
 } from '@odf/shared/utils';
-import { YAMLEditorWrapped } from '@odf/shared/utils/Tabs';
+import Tabs, { TabPage, YAMLEditorWrapped } from '@odf/shared/utils/Tabs';
 import {
   useK8sWatchResource,
-  HorizontalNav,
   useModal,
   K8sResourceCommon,
 } from '@openshift-console/dynamic-plugin-sdk';
@@ -39,6 +38,7 @@ import { NoobaaS3Context, NoobaaS3Provider } from '../noobaa-context';
 import { CustomActionsToggle } from '../objects-list';
 import { ObjectListWithSidebar } from '../objects-list/ObjectListWithSidebar';
 import { PageTitle } from './PageTitle';
+import './bucket-overview.scss';
 
 type CustomYAMLEditorProps = {
   obj: {
@@ -48,7 +48,11 @@ type CustomYAMLEditorProps = {
 
 const CustomYAMLEditor: React.FC<CustomYAMLEditorProps> = ({
   obj: { resource },
-}) => <YAMLEditorWrapped obj={resource} />;
+}) => (
+  <div className="obc-bucket-yaml">
+    <YAMLEditorWrapped obj={resource} />
+  </div>
+);
 
 const getBucketActionsItems = (
   t: TFunction,
@@ -210,26 +214,36 @@ const BucketOverview: React.FC<{}> = () => {
     [foldersPath, bucketName, t]
   );
 
-  const navPages = [
+  const navPages: TabPage[] = [
     {
-      href: '',
-      name: t('Objects'),
+      href: 'objects',
+      title: t('Objects'),
       component: ObjectListWithSidebar,
     },
     ...(!foldersPath
       ? [
           {
             href: 'details',
-            name: t('Details'),
+            title: t('Details'),
             component: BucketDetails,
           },
+          {
+            href: 'permissions',
+            title: t('Permissions'),
+            component: React.lazy(() => import('./PermissionsNav')),
+          },
+          {
+            href: 'management',
+            title: t('Management'),
+            component: React.lazy(() => import('./ManagementNav')),
+          },
         ]
       : []),
     ...(isCreatedByOBC
       ? [
           {
             href: 'yaml',
-            name: t('YAML'),
+            title: t('YAML'),
             component: CustomYAMLEditor,
           },
         ]
@@ -272,12 +286,6 @@ const BucketOverview: React.FC<{}> = () => {
   );
 };
 
-type NavPage = {
-  href: string;
-  name: string;
-  component: React.ComponentType<any>;
-};
-
 type BucketOverviewContentProps = {
   breadcrumbs: { name: string; path: string }[];
   foldersPath: string | null;
@@ -286,7 +294,7 @@ type BucketOverviewContentProps = {
   fresh: boolean;
   triggerRefresh: () => void;
   noobaaObjectBucket: K8sResourceKind;
-  navPages: NavPage[];
+  navPages: TabPage[];
   bucketName: string;
   actions: (noobaaS3: S3Commands) => () => JSX.Element;
   launcher: LaunchModal;
@@ -333,14 +341,15 @@ const BucketOverviewContent: React.FC<BucketOverviewContentProps> = ({
         setEmptyBucketResponse={setEmptyBucketResponse}
         triggerRefresh={triggerRefresh}
       />
-      <HorizontalNav
-        pages={navPages}
-        resource={
+      <Tabs
+        id="s3-overview"
+        tabs={navPages}
+        customData={
           {
-            refresh: fresh,
+            fresh,
             triggerRefresh,
             resource: noobaaObjectBucket,
-          } as any
+          } as unknown
         }
       />
     </>

packages/odf/components/s3-browser/bucket-overview/ManagementNav.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import Tabs, { TabPage } from '@odf/shared/utils/Tabs';
+
+const LifecycleRules = () => <>LIFECYCLE RULES</>;
+
+const ManagementNav = () => {
+  const { t } = useCustomTranslation();
+
+  const pages: TabPage[] = React.useMemo(
+    () => [
+      {
+        href: 'lifecycle',
+        title: t('Lifecycle rules'),
+        component: LifecycleRules,
+      },
+    ],
+    [t]
+  );
+
+  return <Tabs id="s3-management-tab" tabs={pages} basePath="management" />;
+};
+
+export default ManagementNav;

packages/odf/components/s3-browser/bucket-overview/PermissionsNav.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import Tabs, { TabPage } from '@odf/shared/utils/Tabs';
+
+const BucketPolicy = () => <>BUCKET POLICY</>;
+const Cors = () => <>CORS</>;
+
+const PermissionsNav = () => {
+  const { t } = useCustomTranslation();
+
+  const pages: TabPage[] = React.useMemo(
+    () => [
+      {
+        href: 'policy',
+        title: t('Bucket policy'),
+        component: BucketPolicy,
+      },
+      {
+        href: 'cors',
+        title: t('CORS'),
+        component: Cors,
+      },
+    ],
+    [t]
+  );
+
+  return <Tabs id="s3-permissions-tab" tabs={pages} basePath="permissions" />;
+};
+
+export default PermissionsNav;

packages/odf/components/s3-browser/bucket-overview/bucket-overview.scss

@@ -5,3 +5,9 @@
 .bucket-label--margin-top {
     margin-top: calc(0.3rem * -1);
 }
+
+.obc-bucket-yaml {
+    .ocs-yaml-editor__root {
+        min-height: 34rem !important;
+    }
+}

packages/odf/components/s3-browser/buckets-list-page/bucketListTable.tsx

@@ -187,7 +187,7 @@ const BucketsTableRow: React.FC<RowComponentType<BucketCrFormat>> = ({
         }}
       />
       <Td dataLabel={columnNames[1]}>
-        <Link to={`${BUCKETS_BASE_ROUTE}/${name}`}>{name}</Link>
+        <Link to={`${BUCKETS_BASE_ROUTE}/${name}/objects`}>{name}</Link>
       </Td>
       <Td dataLabel={columnNames[2]}>
         {/* ToDo: Currently we only support MCG, make is configurable once RGW is supported as well */}

packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx

@@ -10,11 +10,11 @@ import { FileUploadComponent } from '../upload-objects';
 import { ObjectsList } from './ObjectsList';
 
 type ObjectListWithSidebarProps = {
-  obj: { refresh: boolean; triggerRefresh: () => void };
+  obj: { fresh: boolean; triggerRefresh: () => void };
 };
 
 export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
-  obj: { refresh, triggerRefresh },
+  obj: { fresh, triggerRefresh },
 }) => {
   const [isUploadSidebarExpanded, setUploadSidebarExpanded] =
     React.useState(false);
@@ -61,7 +61,7 @@ export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
             setCompletionTime={setCompletionTime}
             triggerRefresh={triggerRefresh}
           />
-          {refresh ? (
+          {fresh ? (
             <ObjectDetailsSidebar
               closeSidebar={closeObjectSidebar}
               isExpanded={isObjectSidebarExpanded}

packages/shared/src/utils/Tabs.tsx

@@ -28,6 +28,7 @@ type TabsProps = {
   id: string;
   basePath?: string; // The page that is common to these tabs
   updatePathOnSelect?: boolean;
+  customData?: unknown;
 };
 
 const Tabs: React.FC<TabsProps> = ({
@@ -36,6 +37,7 @@ const Tabs: React.FC<TabsProps> = ({
   id,
   basePath,
   updatePathOnSelect = true,
+  customData = {},
 }) => {
   const offset = isSecondary ? 10 : 1;
   const [activeTab, setActiveTab] = React.useState(0 + offset);
@@ -53,12 +55,12 @@ const Tabs: React.FC<TabsProps> = ({
           key={tabTitle}
           data-test={`horizontal-link-${tabTitle}`}
         >
-          <tab.component />
+          <tab.component obj={customData} />
         </Tab>
       );
     });
     return temp;
-  }, [offset, tabs]);
+  }, [offset, tabs, customData]);
 
   const hrefToTabMap = React.useMemo(
     () =>