Skip to content

Commit

Permalink
ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@GnsP
GnsP committed Feb 20, 2024
1 parent ff5d0e0 commit 40ab5dc
Show file tree
Hide file tree
Showing 14 changed files with 624 additions and 82 deletions.
4 changes: 3 additions & 1 deletion app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,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);

Expand All @@ -58,6 +58,8 @@ export const SourceControlManagement = () => {
const sourceControlManagementConfig: ISourceControlManagementConfig = useSelector(
(state) => state.sourceControlManagementConfig
);
const history = useHistory();

const toggleForm = () => {
setIsFormOpen(!isFormOpen);
};
Expand Down
2 changes: 1 addition & 1 deletion app/cdap/components/ResourceCenterEntity/PullPipelineWizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
129 changes: 115 additions & 14 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,36 +40,61 @@ import {
StatusCell,
StyledFixedWidthCell,
StyledPopover,
SyncStatusWrapper,
} from '../styles';
import { timeInstantToString } from 'services/DataFormatter';
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([]);
Expand All @@ -69,7 +105,7 @@ export const LocalPipelineTable = ({
return;
}

if (enableMultipleSelection) {
if (multiPushEnabled) {
handleMultipleSelection(name);
return;
}
Expand Down Expand Up @@ -98,19 +134,31 @@ 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}
/>
Expand All @@ -127,10 +175,27 @@ export const LocalPipelineTable = ({
</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;
Expand Down Expand Up @@ -173,11 +238,47 @@ export const LocalPipelineTable = ({
<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>
);
};
63 changes: 57 additions & 6 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import PrimaryContainedButton from 'components/shared/Buttons/PrimaryContainedButton';
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { getCurrentNamespace } from 'services/NamespaceStore';
import {
Expand All @@ -24,11 +24,14 @@ import {
getNamespacePipelineList,
pushMultipleSelectedPipelines,
pushSelectedPipelines,
reset,
refetchAllPipelines,
resetPushStatus,
setLoadingMessage,
setLocalPipelines,
setNameFilter,
setSyncStatusFilter,
setSyncStatusOfAllPipelines,
setSyncStatusOfRemotePipelines,
toggleCommitModal,
toggleShowFailedOnly,
} from '../store/ActionCreator';
Expand All @@ -40,11 +43,17 @@ import cloneDeep from 'lodash/cloneDeep';
import PrimaryTextButton from 'components/shared/Buttons/PrimaryTextButton';
import { LocalPipelineTable } from './PipelineTable';
import { useOnUnmount } from 'services/react/customHooks/useOnUnmount';
import { FailStatusDiv, PipelineListContainer, StyledSelectionStatusDiv } from '../styles';
import {
FailStatusDiv,
FiltersAndStatusWrapper,
PipelineListContainer,
StyledSelectionStatusDiv,
} from '../styles';
import { IListResponse, IOperationMetaResponse, IOperationRun } from '../types';
import { useFeatureFlagDefaultFalse } from 'services/react/customHooks/useFeatureFlag';
import { parseOperationResource } from '../helpers';
import { OperationAlert } from '../OperationAlert';
import { SyncStatusFilters } from '../SyncStatusFilters';

const PREFIX = 'features.SourceControlManagement.push';

Expand All @@ -57,6 +66,7 @@ export const LocalPipelineListView = () => {
commitModalOpen,
loadingMessage,
showFailedOnly,
syncStatusFilter,
} = useSelector(({ push }) => push);

const { running: isAnOperationRunning, operation } = useSelector(
Expand All @@ -80,8 +90,6 @@ export const LocalPipelineListView = () => {
}
}, []);

useOnUnmount(() => reset());

const onPushSubmit = (commitMessage: string) => {
resetPushStatus();
const pushedPipelines = cloneDeep(localPipelines);
Expand All @@ -108,6 +116,8 @@ export const LocalPipelineListView = () => {
},
complete() {
setLoadingMessage(null);
refetchAllPipelines();
setSyncStatusOfAllPipelines();
},
});

Expand All @@ -131,6 +141,8 @@ export const LocalPipelineListView = () => {
},
complete() {
setLoadingMessage(null);
refetchAllPipelines();
setSyncStatusOfAllPipelines();
},
});
};
Expand All @@ -143,8 +155,9 @@ export const LocalPipelineListView = () => {
localPipelines={localPipelines}
selectedPipelines={selectedPipelines}
showFailedOnly={showFailedOnly}
enableMultipleSelection={multiPushEnabled}
multiPushEnabled={multiPushEnabled}
disabled={isAnOperationRunning}
syncStatusFilter={syncStatusFilter}
/>
<PrimaryContainedButton
onClick={toggleCommitModal}
Expand All @@ -162,6 +175,7 @@ export const LocalPipelineListView = () => {

return (
<PipelineListContainer>
{operation && multiPushEnabled && <OperationAlert operation={operation} />}
<SearchBox nameFilter={nameFilter} setNameFilter={setNameFilter} />
{operation && multiPushEnabled && <OperationAlert operation={operation} />}
{selectedPipelines.length > 0 && (
Expand Down Expand Up @@ -193,6 +207,43 @@ export const LocalPipelineListView = () => {
)}
</StyledSelectionStatusDiv>
)}
<FiltersAndStatusWrapper>
{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>
)}
{multiPushEnabled && (
<SyncStatusFilters
syncStatusFilter={syncStatusFilter}
setSyncStatusFilter={setSyncStatusFilter}
/>
)}
</FiltersAndStatusWrapper>
{ready ? LocalPipelineTableComp() : <LoadingSVGCentered />}
<CommitModal
isOpen={commitModalOpen}
Expand Down
Loading

0 comments on commit 40ab5dc

Please sign in to comment.