ux improvements

cdapio · Feb 20, 2024 · 3576aa7 · 3576aa7
1 parent 40ab5dc
commit 3576aa7
Show file tree

Hide file tree

Showing 23 changed files with 306 additions and 140 deletions.
diff --git a/app/cdap/api/longRunningOperation.ts b/app/cdap/api/longRunningOperation.ts
@@ -27,13 +27,13 @@ export const LongRunningOperationApi = {
     dataSrc,
     'GET',
     'REQUEST',
-    `${basePath}/?pageSize=1&filter=${PUSH_FILTER}`
+    `${basePath}/?pageSize=10&filter=${PUSH_FILTER}`
   ),
   getLatestPull: apiCreator(
     dataSrc,
     'GET',
     'REQUEST',
-    `${basePath}/?pageSize=1&filter=${PULL_FILTER}`
+    `${basePath}/?pageSize=10&filter=${PULL_FILTER}`
   ),
   pollOperation: apiCreator(dataSrc, 'GET', 'POLL', `${basePath}/:operationId`),
   stopOperation: apiCreator(dataSrc, 'POST', 'REQUEST', `${basePath}/:operationId/stop`),

diff --git a/app/cdap/components/FooterContext/index.ts b/app/cdap/components/FooterContext/index.ts
@@ -0,0 +1,25 @@
+import { createContext, useContext, useEffect } from 'react';
+
+interface IFooterContext {
+  show: boolean;
+  setShow(val?: boolean): void;
+}
+
+export const FooterContext = createContext<IFooterContext>({
+  show: true,
+  setShow() {
+    return;
+  },
+});
+
+export function useHideFooterInPage() {
+  const { setShow } = useContext(FooterContext);
+
+  useEffect(() => {
+    setShow(false);
+
+    return () => setShow(true);
+  }, []);
+
+  return setShow;
+}
diff --git a/app/cdap/components/NamespaceAdmin/SourceControlManagement/SourceControlManagementForm.tsx b/app/cdap/components/NamespaceAdmin/SourceControlManagement/SourceControlManagementForm.tsx
@@ -340,17 +340,19 @@ const SourceControlManagementForm = ({
                     : []
                 }
               />
-              <PropertyRow
-                value={formState.config?.auth?.patConfig?.username}
-                property={{
-                  name: 'username',
-                  description: T.translate(`${PREFIX}.auth.pat.usernameHelperText`).toString(),
-                  label: T.translate(`${PREFIX}.auth.pat.username`).toString(),
-                }}
-                onChange={(val) => {
-                  handleValueChange(val, 'username');
-                }}
-              />
+              {formState.config?.provider !== providers.github && (
+                <PropertyRow
+                  value={formState.config?.auth?.patConfig?.username}
+                  property={{
+                    name: 'username',
+                    description: T.translate(`${PREFIX}.auth.pat.usernameHelperText`).toString(),
+                    label: T.translate(`${PREFIX}.auth.pat.username`).toString(),
+                  }}
+                  onChange={(val) => {
+                    handleValueChange(val, 'username');
+                  }}
+                />
+              )}
             </>
           )}
         </StyledGroup>

diff --git a/app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx b/app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx
@@ -34,7 +34,6 @@ 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);
 
@@ -58,7 +57,6 @@ export const SourceControlManagement = () => {
   const sourceControlManagementConfig: ISourceControlManagementConfig = useSelector(
     (state) => state.sourceControlManagementConfig
   );
-  const history = useHistory();
 
   const toggleForm = () => {
     setIsFormOpen(!isFormOpen);

diff --git a/app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx b/app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx
@@ -56,6 +56,7 @@ interface IRepositoryPipelineTableProps {
   multiPushEnabled?: boolean;
   disabled?: boolean;
   syncStatusFilter?: TSyncStatusFilter;
+  lastOperationInfoShown?: boolean;
 }
 
 export const LocalPipelineTable = ({
@@ -65,6 +66,7 @@ export const LocalPipelineTable = ({
   multiPushEnabled = false,
   disabled = false,
   syncStatusFilter = 'all',
+  lastOperationInfoShown = true,
 }: IRepositoryPipelineTableProps) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(25);
@@ -149,7 +151,7 @@ export const LocalPipelineTable = ({
   };
 
   return (
-    <TableBox>
+    <TableBox lastOperationInfoShown={lastOperationInfoShown}>
       <Table stickyHeader data-testid="local-pipelines-table">
         <TableHead>
           <TableRow>
@@ -167,14 +169,6 @@ export const LocalPipelineTable = ({
             <TableCell></TableCell>
             <StyledTableCell>{T.translate(`${PREFIX}.pipelineName`)}</StyledTableCell>
             <StyledTableCell>{T.translate(`${PREFIX}.lastSyncDate`)}</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}>
@@ -235,9 +229,6 @@ export const LocalPipelineTable = ({
                 </StatusCell>
                 <StyledTableCell>{pipeline.name}</StyledTableCell>
                 <StyledTableCell>{timeInstantToString(pipeline.lastSyncDate)}</StyledTableCell>
-                <StyledFixedWidthCell>
-                  {pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
-                </StyledFixedWidthCell>
                 {multiPushEnabled && (
                   <StyledFixedWidthCell>
                     {pipeline.syncStatus === undefined ||

diff --git a/app/cdap/components/SourceControlManagement/LocalPipelineListView/index.tsx b/app/cdap/components/SourceControlManagement/LocalPipelineListView/index.tsx
@@ -20,6 +20,7 @@ import { useSelector } from 'react-redux';
 import { getCurrentNamespace } from 'services/NamespaceStore';
 import {
   countPushFailedPipelines,
+  dismissOperationAlert,
   fetchLatestOperation,
   getNamespacePipelineList,
   pushMultipleSelectedPipelines,
@@ -69,7 +70,7 @@ export const LocalPipelineListView = () => {
     syncStatusFilter,
   } = useSelector(({ push }) => push);
 
-  const { running: isAnOperationRunning, operation } = useSelector(
+  const { running: isAnOperationRunning, operation, showLastOperationInfo } = useSelector(
     ({ operationRun }) => operationRun
   );
 
@@ -158,6 +159,7 @@ export const LocalPipelineListView = () => {
             multiPushEnabled={multiPushEnabled}
             disabled={isAnOperationRunning}
             syncStatusFilter={syncStatusFilter}
+            lastOperationInfoShown={showLastOperationInfo}
           />
           <PrimaryContainedButton
             onClick={toggleCommitModal}
@@ -175,38 +177,10 @@ export const LocalPipelineListView = () => {
 
   return (
     <PipelineListContainer>
-      {operation && multiPushEnabled && <OperationAlert operation={operation} />}
-      <SearchBox nameFilter={nameFilter} setNameFilter={setNameFilter} />
-      {operation && multiPushEnabled && <OperationAlert operation={operation} />}
-      {selectedPipelines.length > 0 && (
-        <StyledSelectionStatusDiv>
-          <div>
-            {T.translate(`${PREFIX}.pipelinesSelected`, {
-              selected: selectedPipelines.length,
-              total: localPipelines.length,
-            })}
-          </div>
-          {!multiPushEnabled && pushFailedCount > 0 && (
-            <>
-              <FailStatusDiv>
-                {pushFailedCount === 1
-                  ? T.translate(`${PREFIX}.pipelinePushedFail`)
-                  : T.translate(`${PREFIX}.pipelinesPushedFail`, {
-                      count: pushFailedCount.toString(),
-                    })}
-              </FailStatusDiv>
-              <PrimaryTextButton onClick={toggleShowFailedOnly}>
-                {showFailedOnly
-                  ? T.translate('commons.showAll')
-                  : T.translate('commons.showFailed')}
-              </PrimaryTextButton>
-            </>
-          )}
-          {multiPushEnabled && pushFailedCount > 0 && (
-            <FailStatusDiv>{T.translate(`${PREFIX}.pipelinesPushedFailMulti`)}</FailStatusDiv>
-          )}
-        </StyledSelectionStatusDiv>
+      {operation && multiPushEnabled && showLastOperationInfo && (
+        <OperationAlert operation={operation} onClose={dismissOperationAlert} />
       )}
+      <SearchBox nameFilter={nameFilter} setNameFilter={setNameFilter} />
       <FiltersAndStatusWrapper>
         {selectedPipelines.length > 0 && (
           <StyledSelectionStatusDiv>

diff --git a/app/cdap/components/SourceControlManagement/OperationAlert.tsx b/app/cdap/components/SourceControlManagement/OperationAlert.tsx
@@ -33,10 +33,12 @@ import { getCurrentNamespace } from 'services/NamespaceStore';
 import { OperationStatus } from './OperationStatus';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
+import CloseIcon from '@material-ui/icons/Close';
 import { AlertErrorView } from './styles';
 
 interface IOperationBannerProps {
   operation: IOperationRun;
+  onClose?(): void;
 }
 
 const StyledDiv = styled.div`
@@ -45,12 +47,15 @@ const StyledDiv = styled.div`
 
 const ExpandWrapper = styled.div`
   height: 100%;
-  padding-top: 12px;
+  padding-top: 10px;
+
+  display: flex;
+  justify-content: flex-end;
 `;
 
 const PREFIX = 'features.SourceControlManagement';
 
-export const OperationAlert = ({ operation }: IOperationBannerProps) => {
+export const OperationAlert = ({ operation, onClose }: IOperationBannerProps) => {
   const [viewErrorExpanded, setViewErrorExpanded] = useState(false);
 
   const getOperationAction = () => {
@@ -87,11 +92,22 @@ export const OperationAlert = ({ operation }: IOperationBannerProps) => {
           >
             {viewErrorExpanded ? <ExpandLess /> : <ExpandMore />}
           </Button>
+          {onClose && (
+            <Button color="inherit" size="small" onClick={onClose}>
+              <CloseIcon />
+            </Button>
+          )}
         </ExpandWrapper>
       );
     }
 
-    return undefined;
+    return (
+      onClose && (
+        <Button color="inherit" size="small" onClick={onClose}>
+          <CloseIcon />
+        </Button>
+      )
+    );
   };
 
   const renderOperationTime = () => {

diff --git a/app/cdap/components/SourceControlManagement/OperationsHistoryView/index.tsx b/app/cdap/components/SourceControlManagement/OperationsHistoryView/index.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { OperationAlert } from '../OperationAlert';
+import { fetchLatestOperation } from '../store/ActionCreator';
+import { getCurrentNamespace } from 'services/NamespaceStore';
+
+const OperationsHistoryContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  padding: 16px;
+  gap: 8px;
+`;
+
+export function OperationsHistoryView() {
+  const { allOperations } = useSelector(({ operationRun }) => operationRun);
+
+  useEffect(() => {
+    fetchLatestOperation(getCurrentNamespace());
+  }, []);
+
+  return (
+    <OperationsHistoryContainer>
+      {allOperations.map((op) => (
+        <OperationAlert operation={op} />
+      ))}
+    </OperationsHistoryContainer>
+  );
+}
diff --git a/app/cdap/components/SourceControlManagement/RemotePipelineListView/RemotePipelineTable.tsx b/app/cdap/components/SourceControlManagement/RemotePipelineListView/RemotePipelineTable.tsx
@@ -52,6 +52,7 @@ interface IRepositoryPipelineTableProps {
   multiPullEnabled?: boolean;
   disabled?: boolean;
   syncStatusFilter?: TSyncStatusFilter;
+  lastOperationInfoShown?: boolean;
 }
 
 export const RemotePipelineTable = ({
@@ -61,6 +62,7 @@ export const RemotePipelineTable = ({
   multiPullEnabled = false,
   disabled = false,
   syncStatusFilter = 'all',
+  lastOperationInfoShown = true,
 }: IRepositoryPipelineTableProps) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(25);
@@ -146,7 +148,7 @@ export const RemotePipelineTable = ({
   };
 
   return (
-    <TableBox>
+    <TableBox lastOperationInfoShown={lastOperationInfoShown}>
       <Table data-testid="remote-pipelines-table" stickyHeader>
         <TableHead>
           <TableRow>

diff --git a/app/cdap/components/SourceControlManagement/RemotePipelineListView/index.tsx b/app/cdap/components/SourceControlManagement/RemotePipelineListView/index.tsx
@@ -41,6 +41,7 @@ import {
   setRemoteSyncStatusFilter,
   setSyncStatusOfAllPipelines,
   refetchAllPipelines,
+  dismissOperationAlert,
 } from '../store/ActionCreator';
 import { LoadingAppLevel } from 'components/shared/LoadingAppLevel';
 import { getCurrentNamespace } from 'services/NamespaceStore';
@@ -78,7 +79,7 @@ export const RemotePipelineListView = ({
     syncStatusFilter,
   } = useSelector(({ pull }) => pull);
 
-  const { running: isAnOperationRunning, operation } = useSelector(
+  const { running: isAnOperationRunning, operation, showLastOperationInfo } = useSelector(
     ({ operationRun }) => operationRun
   );
 
@@ -173,6 +174,7 @@ export const RemotePipelineListView = ({
             multiPullEnabled={multiPullEnabled}
             disabled={isAnOperationRunning}
             syncStatusFilter={syncStatusFilter}
+            lastOperationInfoShown={showLastOperationInfo}
           />
           <PrimaryContainedButton
             size="large"
@@ -197,7 +199,9 @@ export const RemotePipelineListView = ({
         onClose={() => setPullViewErrorMsg()}
       />
       <PipelineListContainer>
-        {operation && multiPullEnabled && <OperationAlert operation={operation} />}
+        {operation && multiPullEnabled && showLastOperationInfo && (
+          <OperationAlert operation={operation} onClose={dismissOperationAlert} />
+        )}
         <SearchBox nameFilter={nameFilter} setNameFilter={setRemoteNameFilter} />
         <FiltersAndStatusWrapper>
           {selectedPipelines.length > 0 && (

diff --git a/app/cdap/components/SourceControlManagement/SearchBox.tsx b/app/cdap/components/SourceControlManagement/SearchBox.tsx
@@ -32,7 +32,7 @@ const StyledTextField = styled(TextField)`
 `;
 
 const StyledDiv = styled.div`
-  margin: 12px 0px;
+  margin: 8px 0 4px 0px;
 `;
 
 interface ISearchBoxProps {

diff --git a/app/cdap/components/SourceControlManagement/SyncStatusFilters.tsx b/app/cdap/components/SourceControlManagement/SyncStatusFilters.tsx
@@ -23,7 +23,7 @@ import { Button, ButtonGroup } from '@material-ui/core';
 const PREFIX = 'features.SourceControlManagement.table';
 
 const StyledDiv = styled.div`
-  margin: 12px 0px;
+  margin: 4px 0px;
   display: flex;
   justify-content: flex-end;
   flex-grow: 1;