Cleanup + Bug fixes

locales/en/plugin__odf-console.json

@@ -1154,6 +1154,8 @@
   "Share with presigned URL": "Share with presigned URL",
   "No objects found": "No objects found",
   "You do not have any objects in the bucket": "You do not have any objects in the bucket",
+  "many": "many",
+  "{{ fromCount }} - {{ toCount }} of {{ totalCount }}": "{{ fromCount }} - {{ toCount }} of {{ totalCount }}",
   "<0>The amount of storage allocated to the client cluster for usage.</0><1>Due to simultaneous usage by multiple client clusters, actual available storage may vary affecting your allocated storage quota.</1>": "<0>The amount of storage allocated to the client cluster for usage.</0><1>Due to simultaneous usage by multiple client clusters, actual available storage may vary affecting your allocated storage quota.</1>",
   "No storage clients found.": "No storage clients found.",
   "You do not have any storage clients connected to this Data Foundation provider cluster.": "You do not have any storage clients connected to this Data Foundation provider cluster.",

packages/odf/components/object-service-nav-item/object-service.tsx

@@ -16,6 +16,7 @@ import Tabs, { TabPage } from '@odf/shared/utils/Tabs';
 import {
   useResolvedExtensions,
   NamespaceBar,
+  useFlag,
 } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Extension,
@@ -28,6 +29,8 @@ import {
   useLocation,
   useNavigate,
 } from 'react-router-dom-v5-compat';
+import { BUCKETS_BASE_ROUTE } from '../../constants';
+import { MCG_STANDALONE } from '../../features';
 
 const OBJECT_SERVICE_CONTEXT = 'odf-object-service';
 const NAMESPACE_BAR_PATHS = [referenceForModel(NooBaaObjectBucketClaimModel)];
@@ -39,6 +42,8 @@ const ObjectServicePage: React.FC = () => {
   const { t } = useCustomTranslation();
   const title = t('Object Storage');
 
+  const isMCGStandalone = useFlag(MCG_STANDALONE);
+
   const [extensions, isLoaded, error] = useResolvedExtensions<HorizontalNavTab>(
     isObjectServiceTab as ExtensionTypeGuard<HorizontalNavTab>
   );
@@ -60,12 +65,13 @@ const ObjectServicePage: React.FC = () => {
   React.useEffect(() => {
     if (
       (location.pathname.endsWith('/odf/object-storage') ||
-        location.pathname.endsWith('/odf/object-storage/')) &&
+        location.pathname.endsWith('/odf/object-storage/') ||
+        (!isMCGStandalone && location.pathname.includes(BUCKETS_BASE_ROUTE))) &&
       !_.isEmpty(sortedPages)
     ) {
       navigate('/odf/object-storage/' + sortedPages[0].href, { replace: true });
     }
-  }, [location.pathname, navigate, sortedPages]);
+  }, [location.pathname, navigate, sortedPages, isMCGStandalone]);
 
   const showNamespaceBar = NAMESPACE_BAR_PATHS.some((path) =>
     location.pathname.includes(path)

packages/odf/components/resource-pages/list-page.tsx

@@ -211,8 +211,8 @@ const GenericListPage: React.FC<GenericListPageProps> = ({
           hideColumnManagement={true}
         />
         <ResourceTable
-          data={filteredData}
-          unfilteredData={data}
+          data={filteredData || []}
+          unfilteredData={data || []}
           loaded={loaded && isODFNsLoaded}
           loadError={loadError || odfNsLoadError}
           rowData={{ resourceModel, kebabActions }}

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
+import { useUserSettingsLocalStorage } from '@odf/shared/hooks/useUserSettingsLocalStorage';
 import { resourceStatus as getResourceStatus } from '@odf/shared/status/Resource';
 import { K8sResourceKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { ResourceStatus } from '@openshift-console/dynamic-plugin-sdk';
 import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
-import { Label, Button, ButtonVariant } from '@patternfly/react-core';
-import { CopyIcon } from '@patternfly/react-icons';
+import {
+  Label,
+  Button,
+  ButtonVariant,
+  ButtonType,
+} from '@patternfly/react-core';
+import { CopyIcon, StarIcon } from '@patternfly/react-icons';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';
+import { BUCKET_BOOKMARKS_USER_SETTINGS_KEY } from '../../../constants';
 import { getPath } from '../../../utils';
 import './bucket-overview.scss';
 
@@ -17,14 +25,45 @@ type TitleProps = {
   noobaaObjectBucket: K8sResourceKind;
 };
 
-const BucketResourceStatus: React.FC<{ resourceStatus: string }> = ({
+type BucketResourceStatusProps = { resourceStatus: string };
+
+type FavoriteProps = { bucketName: string };
+
+const BucketResourceStatus: React.FC<BucketResourceStatusProps> = ({
   resourceStatus,
 }) => (
   <ResourceStatus additionalClassNames="bucket-label--margin-top">
     <Status status={resourceStatus} />
   </ResourceStatus>
 );
 
+const Favorite: React.FC<FavoriteProps> = ({ bucketName }) => {
+  const [favorites, setFavorites] = useUserSettingsLocalStorage<string[]>(
+    BUCKET_BOOKMARKS_USER_SETTINGS_KEY,
+    true,
+    []
+  );
+  const isFavorite = favorites?.find((bucket) => bucket === bucketName);
+
+  const onClick = () => {
+    if (isFavorite)
+      setFavorites((oldFavorites) =>
+        oldFavorites.filter((bucket) => bucket === bucketName)
+      );
+    else setFavorites((oldFavorites) => [...oldFavorites, bucketName]);
+  };
+
+  return (
+    <Button
+      variant={ButtonVariant.plain}
+      type={ButtonType.button}
+      onClick={onClick}
+    >
+      <StarIcon color={isFavorite && warningColor.value} />
+    </Button>
+  );
+};
+
 export const PageTitle: React.FC<TitleProps> = ({
   bucketName,
   foldersPath,
@@ -47,10 +86,11 @@ export const PageTitle: React.FC<TitleProps> = ({
         {!foldersPath ? bucketName : currentFolder}
         {!foldersPath && (
           <>
+            <Favorite bucketName={bucketName} />
             {/* ToDo: Currently we only support MCG, make is configurable once RGW is supported as well */}
             <Label
               color="gold"
-              className="pf-v5-u-ml-sm pf-v5-u-mt-sm bucket-label--height"
+              className="pf-v5-u-mt-sm bucket-label--height"
               isCompact
             >
               {t('MCG')}

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

@@ -9,6 +9,7 @@ import {
   ContinuationTokens,
   continuationTokensRefresher,
   fetchS3Resources,
+  getPaginationCount,
   Pagination,
 } from '../pagination-helper';
 
@@ -39,7 +40,12 @@ export const BucketPagination: React.FC<BucketPaginationProps> = ({
 
   // initial fetch on first mount
   React.useEffect(() => {
-    continuationTokensRefresher(setContinuationTokens, trigger);
+    continuationTokensRefresher(
+      setContinuationTokens,
+      trigger,
+      undefined,
+      false
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -49,7 +55,9 @@ export const BucketPagination: React.FC<BucketPaginationProps> = ({
         setContinuationTokens,
         trigger,
         true,
-        continuationTokens.next
+        continuationTokens.next,
+        undefined,
+        false
       );
   };
 
@@ -61,17 +69,26 @@ export const BucketPagination: React.FC<BucketPaginationProps> = ({
         setContinuationTokens,
         trigger,
         false,
-        paginationToken
+        paginationToken,
+        undefined,
+        false
       );
     }
   };
 
+  const [paginationToCount, paginationFromCount] = getPaginationCount(
+    continuationTokens,
+    data?.Buckets?.length || 0,
+    MAX_BUCKETS
+  );
   return (
     <Pagination
       disableNext={!continuationTokens.next || !loadedWOError}
       disablePrevious={!continuationTokens.current || !loadedWOError}
       onNext={onNextClick}
       onPrevious={onPreviousClick}
+      fromCount={paginationFromCount}
+      toCount={paginationToCount}
     />
   );
 };

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

@@ -59,6 +59,7 @@ import {
 } from '../../../utils';
 import { NoobaaS3Context } from '../noobaa-context';
 import {
+  getPaginationCount,
   Pagination,
   PaginationProps,
   ContinuationTokens,
@@ -190,6 +191,8 @@ const TableActions: React.FC<PaginationProps & TableActionsProps> = ({
   refreshTokens,
   searchInput,
   setSearchInput,
+  fromCount: paginationFromCount,
+  toCount: paginationToCount,
 }) => {
   const { t } = useCustomTranslation();
 
@@ -243,6 +246,8 @@ const TableActions: React.FC<PaginationProps & TableActionsProps> = ({
           onPrevious={onPrevious}
           disableNext={disableNext}
           disablePrevious={disablePrevious}
+          fromCount={paginationFromCount}
+          toCount={paginationToCount}
         />
       </LevelItem>
     </Level>
@@ -425,6 +430,11 @@ export const ObjectsList: React.FC<{}> = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [foldersPath, searchQuery]);
 
+  const [paginationToCount, paginationFromCount] = getPaginationCount(
+    continuationTokens,
+    (data?.Contents?.length || 0) + (data?.CommonPrefixes?.length || 0),
+    MAX_KEYS
+  );
   return (
     <div className="pf-v5-u-m-lg">
       <p className="pf-v5-u-mb-sm">
@@ -473,6 +483,8 @@ export const ObjectsList: React.FC<{}> = () => {
         refreshTokens={refreshTokens}
         searchInput={searchInput}
         setSearchInput={setSearchInput}
+        fromCount={paginationFromCount}
+        toCount={paginationToCount}
       />
       <SelectableTable
         className="pf-v5-u-mt-lg"

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

@@ -14,7 +14,7 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
 } from '@patternfly/react-core';
-import { CubesIcon } from '@patternfly/react-icons';
+import { CubesIcon, FileIcon, FolderIcon } from '@patternfly/react-icons';
 import { ActionsColumn, Td, IAction } from '@patternfly/react-table';
 import { BUCKETS_BASE_ROUTE, PREFIX } from '../../../constants';
 import { SetObjectsDeleteResponse } from '../../../modals/s3-browser/delete-objects/DeleteObjectsModal';
@@ -147,10 +147,16 @@ export const TableRow: React.FC<RowComponentType<ObjectCrFormat>> = ({
       <Td translate={null} dataLabel={columnNames[0]}>
         {isFolder ? (
           <Link to={`${BUCKETS_BASE_ROUTE}/${bucketName}?${PREFIX}=${prefix}`}>
-            {name}
+            <span>
+              <FolderIcon className="pf-v5-u-mr-xs" />
+              {name}
+            </span>
           </Link>
         ) : (
-          name
+          <span>
+            <FileIcon className="pf-v5-u-mr-xs" />
+            {name}
+          </span>
         )}
       </Td>
       <Td translate={null} dataLabel={columnNames[1]}>