Moves upload component to mobX

Signed-off-by: Bipul Adhikari <[email protected]>
red-hat-storage · Dec 9, 2024 · 9c46740 · 9c46740
1 parent 8643916
commit 9c46740
Show file tree

Hide file tree

Showing 14 changed files with 781 additions and 576 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     'prettier',
     'plugin:react-hooks/recommended',
     'airbnb',
+    'plugin:mobx/recommended',
   ],
   overrides: [
     {
@@ -28,8 +29,9 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'import'],
+  plugins: ['react', '@typescript-eslint', 'import', 'mobx'],
   rules: {
+    'mobx/missing-observer': 'off', // Too many false positives
     'arrow-body-style': 'off',
     'default-param-last': 'off',
     'dot-notation': 'off',
@@ -172,7 +174,6 @@ module.exports = {
     'react/destructuring-assignment': 'off',
     'react/jsx-filename-extension': 'off',
     'react/jsx-no-bind': 'off',
-    'react/jsx-pascal-case': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
     'react/no-unused-state': 'off',

diff --git a/package.json b/package.json
@@ -93,6 +93,8 @@
     "js-yaml": "^3.13.1",
     "lodash-es": "^4.17.21",
     "luxon": "^3.3.0",
+    "mobx": "^6.13.5",
+    "mobx-react-lite": "^4.0.7",
     "murmurhash-js": "^1.0.0",
     "react": "^17.0.1",
     "react-copy-to-clipboard": "5.x",
@@ -144,7 +146,7 @@
     "@types/react-router": "^5.1.20",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@typescript-eslint/parser": "^8.17.0",
     "comment-json": "4.x",
     "cypress": "^13.15.2",
     "cypress-multi-reporters": "^2.0.4",
@@ -157,6 +159,7 @@
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-mobx": "^0.0.13",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eventsource": "^1.1.1",

diff --git a/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx b/packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
@@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { IAction } from '@patternfly/react-table';
 import { NoobaaS3Context } from '../noobaa-context';
 import UploadSidebar from '../upload-objects';
-import { UploadProgress } from '../upload-objects';
 import { FileUploadComponent } from '../upload-objects';
 import { ObjectsList } from './ObjectsList';
 
@@ -24,15 +23,8 @@ export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
   const [object, setObject] = React.useState<ObjectCrFormat>(null);
   const [objectActions, setObjectActions] =
     React.useState<React.MutableRefObject<IAction[]>>();
-  const [uploadProgress, setUploadProgress] = React.useState<UploadProgress>(
-    {}
-  );
   const [completionTime, setCompletionTime] = React.useState<number>();
 
-  const abortAll = React.useCallback(() => {
-    Object.values(uploadProgress).forEach((upload) => upload?.abort?.());
-  }, [uploadProgress]);
-
   const { bucketName } = useParams();
 
   const { noobaaS3 } = React.useContext(NoobaaS3Context);
@@ -58,17 +50,14 @@ export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = ({
     <UploadSidebar
       isExpanded={isUploadSidebarExpanded}
       closeSidebar={closeUploadSidebar}
-      uploadProgress={uploadProgress}
       completionTime={completionTime}
       mainContent={
         <>
           <FileUploadComponent
             client={noobaaS3}
             bucketName={bucketName}
-            uploadProgress={uploadProgress}
-            setUploadProgress={setUploadProgress}
             showSidebar={showUploadSidebar}
-            abortAll={abortAll}
+            hideSidebar={closeUploadSidebar}
             setCompletionTime={setCompletionTime}
             triggerRefresh={triggerRefresh}
           />

diff --git a/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx b/packages/odf/components/s3-browser/upload-objects/UploadSidebar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DrawerHead, Status, useCustomTranslation } from '@odf/shared';
 import { ResourceStatus } from '@openshift-console/dynamic-plugin-sdk';
+import { observer } from 'mobx-react-lite';
 import { Trans } from 'react-i18next';
 import {
   Alert,
@@ -15,136 +16,130 @@ import {
   FlexItem,
   Title,
 } from '@patternfly/react-core';
-import { UploadProgress } from './types';
+import { uploadStore } from './store';
 import UploadStatusList from './upload-status';
-import {
-  getCompletedAndTotalUploadCount,
-  getFailedFiles,
-  getTotalRemainingFilesAndSize,
-  getTotalTimeElapsed,
-  getTotalTimeRemaining,
-  getUploadSpeed,
-} from './utils';
+import { getTotalTimeElapsed } from './utils';
 
 type PanelContentProps = {
-  uploadProgress: UploadProgress;
   onClose: () => void;
   completionTime: number;
 };
 
-const PanelContent: React.FC<PanelContentProps> = ({
-  uploadProgress,
-  onClose,
-  completionTime,
-}) => {
-  const { t } = useCustomTranslation();
-  const [uploadedFiles, totalFiles] =
-    getCompletedAndTotalUploadCount(uploadProgress);
-  const failedFiles = getFailedFiles(uploadProgress);
-  const uploadSpeed = getUploadSpeed(uploadProgress);
-  const totalRemaining = getTotalRemainingFilesAndSize(uploadProgress);
-  const timeRemaining = getTotalTimeRemaining(uploadProgress);
-  const totalTimeElapsed = getTotalTimeElapsed(uploadProgress, completionTime);
-  const isComplete = uploadedFiles + failedFiles === totalFiles;
+const PanelContent: React.FC<PanelContentProps> = observer(
+  ({ onClose, completionTime }) => {
+    const { t } = useCustomTranslation();
 
-  return (
-    <DrawerPanelContent
-      isResizable
-      defaultSize="500px"
-      minSize="150px"
-      maxSize="unset"
-      height="unset"
-    >
-      <DrawerHead>
-        <Flex direction={{ default: 'column' }}>
-          <FlexItem>
-            <Title headingLevel="h3">{t('Uploads')}</Title>
-          </FlexItem>
-          <FlexItem>
-            <Title headingLevel="h4">
-              <span>
-                {t('{{uploadedFiles}} of {{totalFiles}} files uploaded', {
-                  uploadedFiles,
-                  totalFiles,
-                })}
-                &nbsp;
-                {isComplete ? (
-                  <ResourceStatus>
-                    <Status status={t('Complete')} title={t('Completed')} />
-                  </ResourceStatus>
-                ) : (
-                  <ResourceStatus>
-                    <Status status={t('Uploading')} title={t('Ongoing')} />
-                  </ResourceStatus>
-                )}
-              </span>
-            </Title>
-          </FlexItem>
-          {isComplete ? (
-            <>
-              <FlexItem>
-                {t('Succeeded: {{uploadedFiles}}', { uploadedFiles })}
-              </FlexItem>
-              <FlexItem>
-                {t('Failed files: {{failedFiles}}', {
-                  failedFiles: totalFiles - uploadedFiles,
-                })}
-              </FlexItem>
-              <FlexItem>
-                {t('Completion time: {{totalTimeElapsed}}', {
-                  totalTimeElapsed,
-                })}
-              </FlexItem>
-            </>
-          ) : (
-            <>
-              <FlexItem>
-                {t('Total Remaining: {{totalRemaining}}', { totalRemaining })}
-              </FlexItem>
-              <FlexItem>
-                {t('Estimated time remaining: {{timeRemaining}}', {
-                  timeRemaining,
-                })}
-              </FlexItem>
-              <FlexItem>
-                {t('Transfer rate: {{uploadSpeed}}', { uploadSpeed })}
-              </FlexItem>
-            </>
-          )}
-        </Flex>
-        <DrawerActions>
-          <DrawerCloseButton onClick={onClose} />
-        </DrawerActions>
-      </DrawerHead>
-      <DrawerContentBody>
-        <Alert
-          title="How uploading works?"
-          isInline
-          variant={AlertVariant.info}
-          className="pf-v5-u-mb-sm"
-        >
-          <Trans t={t}>
-            Standard uploads have a size limit of up to 5 TB in S3.
-          </Trans>
-        </Alert>
-        <UploadStatusList progress={Object.values(uploadProgress)} />
-      </DrawerContentBody>
-    </DrawerPanelContent>
-  );
-};
+    const uploadedFiles = uploadStore.getCompletedFilesCount;
+    const failedFiles = uploadStore.getFailedAndCancelledFilesCount;
+    const totalFiles = uploadStore.getTotalFilesCount;
+    const uploadSpeed = uploadStore.getUploadSpeed;
+    const totalRemaining = uploadStore.getTotalRemainingFilesAndSize;
+    const timeRemaining = uploadStore.getTotalTimeRemaning;
+
+    const uploadProgress = uploadStore.getAll;
+    const totalTimeElapsed = getTotalTimeElapsed(
+      uploadProgress,
+      completionTime
+    );
+    const isComplete = uploadedFiles + failedFiles === totalFiles;
+
+    return (
+      <DrawerPanelContent
+        isResizable
+        defaultSize="500px"
+        minSize="150px"
+        maxSize="unset"
+        height="unset"
+      >
+        <DrawerHead>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>
+              <Title headingLevel="h3">{t('Uploads')}</Title>
+            </FlexItem>
+            <FlexItem>
+              <Title headingLevel="h4">
+                <span>
+                  {t('{{uploadedFiles}} of {{totalFiles}} files uploaded', {
+                    uploadedFiles,
+                    totalFiles,
+                  })}
+                  &nbsp;
+                  {isComplete ? (
+                    <ResourceStatus>
+                      <Status status={t('Complete')} title={t('Completed')} />
+                    </ResourceStatus>
+                  ) : (
+                    <ResourceStatus>
+                      <Status status={t('Uploading')} title={t('Ongoing')} />
+                    </ResourceStatus>
+                  )}
+                </span>
+              </Title>
+            </FlexItem>
+            {isComplete ? (
+              <>
+                <FlexItem>
+                  {t('Succeeded: {{uploadedFiles}}', { uploadedFiles })}
+                </FlexItem>
+                <FlexItem>
+                  {t('Failed files: {{failedFiles}}', {
+                    failedFiles: totalFiles - uploadedFiles,
+                  })}
+                </FlexItem>
+                <FlexItem>
+                  {t('Completion time: {{totalTimeElapsed}}', {
+                    totalTimeElapsed,
+                  })}
+                </FlexItem>
+              </>
+            ) : (
+              <>
+                <FlexItem>
+                  {t('Total Remaining: {{totalRemaining}}', { totalRemaining })}
+                </FlexItem>
+                <FlexItem>
+                  {t('Estimated time remaining: {{timeRemaining}}', {
+                    timeRemaining,
+                  })}
+                </FlexItem>
+                <FlexItem>
+                  {t('Transfer rate: {{uploadSpeed}}', { uploadSpeed })}
+                </FlexItem>
+              </>
+            )}
+          </Flex>
+          <DrawerActions>
+            <DrawerCloseButton onClick={onClose} />
+          </DrawerActions>
+        </DrawerHead>
+        <DrawerContentBody>
+          <Alert
+            title="How uploading works?"
+            isInline
+            variant={AlertVariant.info}
+            className="pf-v5-u-mb-sm"
+          >
+            <Trans t={t}>
+              Standard uploads have a size limit of up to 5 TB in S3.
+            </Trans>
+          </Alert>
+          <UploadStatusList />
+        </DrawerContentBody>
+      </DrawerPanelContent>
+    );
+  }
+);
 
 export type UploadSidebarProps = {
   isExpanded: boolean;
   closeSidebar: () => void;
-  uploadProgress: UploadProgress;
   mainContent: React.ReactNode;
   completionTime: number;
 };
 
 export const UploadSidebar: React.FC<UploadSidebarProps> = ({
   isExpanded,
   closeSidebar,
-  uploadProgress,
   mainContent: drawerContentBody,
   completionTime,
 }) => {
@@ -153,7 +148,6 @@ export const UploadSidebar: React.FC<UploadSidebarProps> = ({
       <DrawerContent
         panelContent={
           <PanelContent
-            uploadProgress={uploadProgress}
             onClose={closeSidebar}
             completionTime={completionTime}
           />