ux improvements

cdapio · Dec 12, 2023 · 42ec68c · 42ec68c
1 parent f40ea5b
commit 42ec68c
Show file tree

Hide file tree

Showing 17 changed files with 909 additions and 282 deletions.
diff --git a/app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx b/app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx
@@ -26,14 +26,14 @@ import TableBody from 'components/shared/Table/TableBody';
 import { useSelector } from 'react-redux';
 import ActionsPopover from 'components/shared/ActionsPopover';
 import { UnlinkSourceControlModal } from './UnlinkSourceControlModal';
-import StyledPasswordWrapper from 'components/AbstractWidget/FormInputs/Password';
 import { ISourceControlManagementConfig } from './types';
 import SourceControlManagementForm from './SourceControlManagementForm';
 import PrimaryTextButton from 'components/shared/Buttons/PrimaryTextButton';
 import { getCurrentNamespace } from 'services/NamespaceStore';
 import { getSourceControlManagement } from '../store/ActionCreator';
 import Alert from 'components/shared/Alert';
 import ButtonLoadingHoc from 'components/shared/Buttons/ButtonLoadingHoc';
+import { useHistory } from 'react-router';
 
 const PrimaryTextLoadingButton = ButtonLoadingHoc(PrimaryTextButton);
 
@@ -55,6 +55,8 @@ export const SourceControlManagement = () => {
   const sourceControlManagementConfig: ISourceControlManagementConfig = useSelector(
     (state) => state.sourceControlManagementConfig
   );
+  const history = useHistory();
+
   const toggleForm = () => {
     setIsFormOpen(!isFormOpen);
   };
@@ -85,11 +87,16 @@ export const SourceControlManagement = () => {
   ];
 
   const validateConfigAndRedirect = () => {
-    setLoading(true);
     const namespace = getCurrentNamespace();
+    if (sourceControlManagementConfig) {
+      history.push(`/ns/${namespace}/scm/sync`);
+      return;
+    }
+
+    setLoading(true);
     getSourceControlManagement(namespace).subscribe(
       () => {
-        window.location.href = `/ns/${namespace}/scm/sync`;
+        history.push(`/ns/${namespace}/scm/sync`);
       },
       (err) => {
         setErrorMessage(err.message);

diff --git a/app/cdap/components/ResourceCenterEntity/PullPipelineWizard.tsx b/app/cdap/components/ResourceCenterEntity/PullPipelineWizard.tsx
@@ -80,7 +80,7 @@ export const PullPipelineWizard = ({ isOpen, error, dispatch }: IPullPipelineWiz
         toggle={() => dispatch({ type: 'TOGGLE_MODAL' })}
       >
         <Provider store={SourceControlManagementSyncStore}>
-          <RemotePipelineListView redirectOnSubmit={true} />
+          <RemotePipelineListView redirectOnSubmit={true} singlePipelineMode={true} />
         </Provider>
       </StandardModal>
     </>

diff --git a/app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx b/app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx
@@ -14,11 +14,22 @@
  * the License.
  */
 
-import React from 'react';
-import { Checkbox, Table, TableBody, TableCell, TableRow, TableHead } from '@material-ui/core';
+import React, { useState } from 'react';
+import {
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TableHead,
+  TableSortLabel,
+  TablePagination,
+} from '@material-ui/core';
 import InfoIcon from '@material-ui/icons/Info';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import ErrorIcon from '@material-ui/icons/Error';
 import { setSelectedPipelines } from '../store/ActionCreator';
-import { IRepositoryPipeline } from '../types';
+import { IRepositoryPipeline, TSyncStatusFilter } from '../types';
 import T from 'i18n-react';
 import StatusButton from 'components/StatusButton';
 import { SUPPORT } from 'components/StatusButton/constants';
@@ -29,35 +40,60 @@ import {
   StatusCell,
   StyledFixedWidthCell,
   StyledPopover,
+  SyncStatusWrapper,
 } from '../styles';
+import { compareSyncStatus, filterOnSyncStatus, stableSort } from '../helpers';
+import LoadingSVG from 'components/shared/LoadingSVG';
+import { green, red } from '@material-ui/core/colors';
 
 const PREFIX = 'features.SourceControlManagement.table';
 
 interface IRepositoryPipelineTableProps {
   localPipelines: IRepositoryPipeline[];
   selectedPipelines: string[];
   showFailedOnly: boolean;
-  enableMultipleSelection?: boolean;
+  multiPushEnabled?: boolean;
   disabled?: boolean;
+  syncStatusFilter?: TSyncStatusFilter;
 }
 
 export const LocalPipelineTable = ({
   localPipelines,
   selectedPipelines,
   showFailedOnly,
-  enableMultipleSelection = false,
+  multiPushEnabled = false,
   disabled = false,
+  syncStatusFilter = 'all',
 }: IRepositoryPipelineTableProps) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(25);
+
   const isSelected = (name: string) => selectedPipelines.indexOf(name) !== -1;
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+
+  const syncStatusComparator = (a: IRepositoryPipeline, b: IRepositoryPipeline) => {
+    return sortOrder === 'desc' ? compareSyncStatus(a, b) : -compareSyncStatus(a, b);
+  };
+
+  const filteredPipelines = filterOnSyncStatus(localPipelines, syncStatusFilter);
+  const displayedPipelines = stableSort(filteredPipelines, syncStatusComparator).slice(
+    page * rowsPerPage,
+    (page + 1) * rowsPerPage
+  );
+  const displayedPipelineNames = displayedPipelines.map((pipeline) => pipeline.name);
+
+  const selectedPipelinesSet = new Set(selectedPipelines);
+  const isAllDisplayedPipelinesSelected = displayedPipelineNames.reduce((acc, pipelineName) => {
+    return acc && selectedPipelinesSet.has(pipelineName);
+  }, true);
 
   const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) {
       return;
     }
 
     if (event.target.checked) {
-      const allSelected = localPipelines.map((pipeline) => pipeline.name);
-      setSelectedPipelines(allSelected);
+      setSelectedPipelines(displayedPipelineNames);
       return;
     }
     setSelectedPipelines([]);
@@ -68,7 +104,7 @@ export const LocalPipelineTable = ({
       return;
     }
 
-    if (enableMultipleSelection) {
+    if (multiPushEnabled) {
       handleMultipleSelection(name);
       return;
     }
@@ -97,38 +133,59 @@ export const LocalPipelineTable = ({
     setSelectedPipelines(newSelected);
   };
 
+  const handleSort = () => {
+    const isAsc = sortOrder === 'asc';
+    setSortOrder(isAsc ? 'desc' : 'asc');
+  };
+
+  const handleChangePage = (event, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   return (
     <TableBox>
       <Table stickyHeader data-testid="local-pipelines-table">
         <TableHead>
           <TableRow>
             <TableCell padding="checkbox">
-              {enableMultipleSelection && (
+              {multiPushEnabled && (
                 <Checkbox
                   color="primary"
-                  indeterminate={
-                    selectedPipelines.length > 0 && selectedPipelines.length < localPipelines.length
-                  }
-                  checked={selectedPipelines.length === localPipelines.length}
+                  indeterminate={selectedPipelines.length > 0 && !isAllDisplayedPipelinesSelected}
+                  checked={isAllDisplayedPipelinesSelected}
                   onChange={handleSelectAllClick}
                   disabled={disabled}
                 />
               )}
             </TableCell>
             <TableCell></TableCell>
             <StyledTableCell>{T.translate(`${PREFIX}.pipelineName`)}</StyledTableCell>
-            <StyledFixedWidthCell>
-              <div>
-                {T.translate(`${PREFIX}.gitStatus`)}
-                <StyledPopover target={() => <InfoIcon />} showOn="Hover">
-                  {T.translate(`${PREFIX}.gitStatusHelperText`)}
-                </StyledPopover>
-              </div>
-            </StyledFixedWidthCell>
+            {multiPushEnabled && (
+              <StyledFixedWidthCell>
+                <TableSortLabel active={true} direction={sortOrder} onClick={handleSort}>
+                  {T.translate(`${PREFIX}.gitSyncStatus`)}
+                </TableSortLabel>
+              </StyledFixedWidthCell>
+            )}
+            {!multiPushEnabled && (
+              <StyledFixedWidthCell>
+                <div>
+                  {T.translate(`${PREFIX}.gitStatus`)}
+                  <StyledPopover target={() => <InfoIcon />} showOn="Hover">
+                    {T.translate(`${PREFIX}.gitStatusHelperText`)}
+                  </StyledPopover>
+                </div>
+              </StyledFixedWidthCell>
+            )}
           </TableRow>
         </TableHead>
         <TableBody>
-          {localPipelines.map((pipeline: IRepositoryPipeline) => {
+          {displayedPipelines.map((pipeline: IRepositoryPipeline) => {
             if (showFailedOnly && !pipeline.error) {
               // only render pipelines that failed to push
               return;
@@ -167,14 +224,47 @@ export const LocalPipelineTable = ({
                   )}
                 </StatusCell>
                 <StyledTableCell>{pipeline.name}</StyledTableCell>
-                <StyledFixedWidthCell>
-                  {pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
-                </StyledFixedWidthCell>
+                {multiPushEnabled && (
+                  <StyledFixedWidthCell>
+                    {pipeline.syncStatus === undefined ||
+                    pipeline.syncStatus === 'not_available' ? (
+                      <SyncStatusWrapper>
+                        <LoadingSVG height="18px" />
+                        {T.translate(`${PREFIX}.gitSyncStatusFetching`)}
+                      </SyncStatusWrapper>
+                    ) : pipeline.syncStatus === 'not_connected' ||
+                      pipeline.syncStatus === 'out_of_sync' ? (
+                      <SyncStatusWrapper>
+                        <ErrorIcon style={{ color: red[500] }} />{' '}
+                        {T.translate(`${PREFIX}.gitSyncStatusUnsynced`)}
+                      </SyncStatusWrapper>
+                    ) : (
+                      <SyncStatusWrapper>
+                        <CheckCircleIcon style={{ color: green[500] }} />
+                        {T.translate(`${PREFIX}.gitSyncStatusSynced`)}
+                      </SyncStatusWrapper>
+                    )}
+                  </StyledFixedWidthCell>
+                )}
+                {!multiPushEnabled && (
+                  <StyledFixedWidthCell>
+                    {pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
+                  </StyledFixedWidthCell>
+                )}
               </StyledTableRow>
             );
           })}
         </TableBody>
       </Table>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 50]}
+        component="span"
+        count={filteredPipelines.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
     </TableBox>
   );
 };