Skip to content

Commit

Permalink
minor ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@GnsP
GnsP committed Dec 13, 2023
1 parent 9d6950b commit 5314d23
Show file tree
Hide file tree
Showing 14 changed files with 376 additions and 263 deletions.
12 changes: 10 additions & 2 deletions app/cdap/components/NamespaceAdmin/SourceControlManagement/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import PrimaryContainedButton from 'components/shared/Buttons/PrimaryContainedButton';
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import styled from 'styled-components';
import T from 'i18n-react';
import Table from 'components/shared/Table';
Expand Down Expand Up @@ -52,6 +53,8 @@ export const SourceControlManagement = () => {
const [isUnlinkModalOpen, setIsUnlinkModalOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState(null);
const [loading, setLoading] = useState(false);
const history = useHistory();

const sourceControlManagementConfig: ISourceControlManagementConfig = useSelector(
(state) => state.sourceControlManagementConfig
);
Expand Down Expand Up @@ -85,11 +88,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);
Expand Down
121 changes: 38 additions & 83 deletions app/cdap/components/ResourceCenterEntity/ResourceCenterPipelineEntity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,8 @@ import { validateImportJSON, adjustConfigNode } from 'services/PipelineErrorFact
import { objectQuery } from 'services/helpers';
import IconSVG from 'components/shared/IconSVG';
import PrimaryOutlinedButton from 'components/shared/Buttons/PrimaryOutlinedButton';
import { defaultState, PullPipelineWizard, reducer } from './PullPipelineWizard';
import PrimaryContainedButton from 'components/shared/Buttons/PrimaryContainedButton';
import { getSourceControlManagement } from 'components/NamespaceAdmin/store/ActionCreator';
import ButtonLoadingHoc from 'components/shared/Buttons/ButtonLoadingHoc';
import { useFeatureFlagDefaultFalse } from 'services/react/customHooks/useFeatureFlag';
import { getHydratorUrl } from 'services/UiUtils/UrlGenerator';

require('./ResourceCenterPipelineEntity.scss');
Expand All @@ -48,9 +45,6 @@ interface IResourceCenterPipelineEntityProps {
export default function ResourceCenterPipelineEntity({
onError,
}: IResourceCenterPipelineEntityProps) {
const sourceControlManagementEnabled = useFeatureFlagDefaultFalse(
'source.control.management.git.enabled'
);
const namespace = getCurrentNamespace();
const resourceCenterId = uuidV4();
const hydratorLinkStateParams = {
Expand Down Expand Up @@ -109,88 +103,49 @@ export default function ResourceCenterPipelineEntity({
};
};

const [pullPipelineModalState, dispatch] = useReducer(reducer, defaultState);

const pullPipelineBtnHandler = () => {
dispatch({ type: 'SET_LOADING', payload: { loading: true } });
getSourceControlManagement(namespace).subscribe(
() => {
dispatch({ type: 'TOGGLE_MODAL' });
},
(err) => {
dispatch({
type: 'SET_ERROR',
payload: {
error: err.message,
},
});
dispatch({ type: 'SET_LOADING', payload: { loading: false } });
},
() => {
dispatch({ type: 'SET_LOADING', payload: { loading: false } });
}
);
};

return (
<>
<div className="resourcecenter-entity-card resourcecenter-entity-card-pipeline">
<div className="image-content-container">
<div className="image-container">
<div className="entity-image">
<IconSVG name="icon-pipelines" />
</div>
<div className="resourcecenter-entity-card resourcecenter-entity-card-pipeline">
<div className="image-content-container">
<div className="image-container">
<div className="entity-image">
<IconSVG name="icon-pipelines" />
</div>
<div className="content-container">
<div className="content-text">
<h4>{T.translate(`${PREFIX}.label`)}</h4>
<p>{T.translate(`${PREFIX}.description`)}</p>
</div>
</div>
<div className="content-container">
<div className="content-text">
<h4>{T.translate(`${PREFIX}.label`)}</h4>
<p>{T.translate(`${PREFIX}.description`)}</p>
</div>
</div>
<div className="buttons-container">
<PrimaryContainedButton
href={hydratorCreateLink}
id="create-pipeline-link"
className="btn btn-primary"
onClick={createBtnHandler}
</div>
<div className="buttons-container">
<PrimaryContainedButton
href={hydratorCreateLink}
id="create-pipeline-link"
className="btn btn-primary"
onClick={createBtnHandler}
>
{T.translate(`${PREFIX}.actionbtn0`)}
</PrimaryContainedButton>
<input
type="file"
accept=".json"
id="resource-center-import-pipeline"
onChange={importBtnHandler}
/>
<label htmlFor="resource-center-import-pipeline">
<StyledButton
id={(
T.translate(`${PREFIX}.actionbtn1`) +
'-' +
T.translate(`${PREFIX}.label`)
).toLowerCase()}
component="span"
>
{T.translate(`${PREFIX}.actionbtn0`)}
</PrimaryContainedButton>
<input
type="file"
accept=".json"
id="resource-center-import-pipeline"
onChange={importBtnHandler}
/>
<label htmlFor="resource-center-import-pipeline">
<StyledButton
id={(
T.translate(`${PREFIX}.actionbtn1`) +
'-' +
T.translate(`${PREFIX}.label`)
).toLowerCase()}
component="span"
>
{T.translate(`${PREFIX}.actionbtn1`)}
</StyledButton>
</label>
{sourceControlManagementEnabled && (
<StyledButton
onClick={pullPipelineBtnHandler}
loading={pullPipelineModalState.loading}
data-testid="pull-pipeline-button"
>
{T.translate(`${PREFIX}.actionbtn2`)}
</StyledButton>
)}
</div>
{T.translate(`${PREFIX}.actionbtn1`)}
</StyledButton>
</label>
</div>
<PullPipelineWizard
isOpen={pullPipelineModalState.isOpen}
error={pullPipelineModalState.error}
dispatch={dispatch}
/>
</>
</div>
);
}
3 changes: 3 additions & 0 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/PipelineTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
StyledFixedWidthCell,
StyledPopover,
} from '../styles';
import { timeInstantToString } from 'services/DataFormatter';

const PREFIX = 'features.SourceControlManagement.table';

Expand Down Expand Up @@ -117,6 +118,7 @@ export const LocalPipelineTable = ({
</TableCell>
<TableCell></TableCell>
<StyledTableCell>{T.translate(`${PREFIX}.pipelineName`)}</StyledTableCell>
<StyledTableCell>{T.translate(`${PREFIX}.lastSyncDate`)}</StyledTableCell>
<StyledFixedWidthCell>
<div>
{T.translate(`${PREFIX}.gitStatus`)}
Expand Down Expand Up @@ -167,6 +169,7 @@ export const LocalPipelineTable = ({
)}
</StatusCell>
<StyledTableCell>{pipeline.name}</StyledTableCell>
<StyledTableCell>{timeInstantToString(pipeline.lastSyncDate)}</StyledTableCell>
<StyledFixedWidthCell>
{pipeline.fileHash ? T.translate(`${PREFIX}.connected`) : '--'}
</StyledFixedWidthCell>
Expand Down
70 changes: 4 additions & 66 deletions app/cdap/components/SourceControlManagement/LocalPipelineListView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ import PrimaryContainedButton from 'components/shared/Buttons/PrimaryContainedBu
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { getCurrentNamespace } from 'services/NamespaceStore';
import Alert from '@material-ui/lab/Alert';
import AlertTitle from '@material-ui/lab/AlertTitle';
import {
countPushFailedPipelines,
fetchLatestOperation,
Expand All @@ -31,7 +29,6 @@ import {
setLoadingMessage,
setLocalPipelines,
setNameFilter,
stopOperation,
toggleCommitModal,
toggleShowFailedOnly,
} from '../store/ActionCreator';
Expand All @@ -43,29 +40,15 @@ import cloneDeep from 'lodash/cloneDeep';
import PrimaryTextButton from 'components/shared/Buttons/PrimaryTextButton';
import { LocalPipelineTable } from './PipelineTable';
import { useOnUnmount } from 'services/react/customHooks/useOnUnmount';
import {
AlertErrorView,
FailStatusDiv,
PipelineListContainer,
StyledSelectionStatusDiv,
} from '../styles';
import { FailStatusDiv, PipelineListContainer, StyledSelectionStatusDiv } from '../styles';
import { IListResponse, IOperationMetaResponse, IOperationRun } from '../types';
import { useFeatureFlagDefaultFalse } from 'services/react/customHooks/useFeatureFlag';
import {
getOperationRunMessage,
getOperationStartTime,
getOperationStatusType,
parseOperationResource,
} from '../helpers';
import Button from '@material-ui/core/Button';
import { OperationStatus } from '../OperationStatus';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import { parseOperationResource } from '../helpers';
import { OperationAlert } from '../OperationAlert';

const PREFIX = 'features.SourceControlManagement.push';

export const LocalPipelineListView = () => {
const [viewErrorExpanded, setViewErrorExpanded] = useState(false);
const {
ready,
localPipelines,
Expand Down Expand Up @@ -177,55 +160,10 @@ export const LocalPipelineListView = () => {
return <div>{T.translate(`${PREFIX}.emptyPipelineListMessage`, { query: nameFilter })}</div>;
};

const getOperationAction = () => {
if (!operation.done) {
return (
<Button
color="inherit"
size="small"
onClick={stopOperation(getCurrentNamespace(), operation)}
>
{T.translate(`${PREFIX}.stopOperation`)}
</Button>
);
}

if (operation.status === OperationStatus.FAILED) {
return (
<Button
color="inherit"
size="small"
onClick={() => setViewErrorExpanded((isExpanded) => !isExpanded)}
>
{viewErrorExpanded ? <ExpandLess /> : <ExpandMore />}
</Button>
);
}

return undefined;
};

return (
<PipelineListContainer>
<SearchBox nameFilter={nameFilter} setNameFilter={setNameFilter} />
{operation && (
<Alert
variant="filled"
severity={getOperationStatusType(operation)}
action={getOperationAction()}
data-testid="latest_operation_banner"
>
<AlertTitle>{getOperationRunMessage(operation)}</AlertTitle>
{getOperationStartTime(operation)}
{operation.status === OperationStatus.FAILED && viewErrorExpanded && (
<AlertErrorView>
Operation ID: {operation.id}
<br />
Error: {operation.error.message}
</AlertErrorView>
)}
</Alert>
)}
{operation && multiPushEnabled && <OperationAlert operation={operation} />}
{selectedPipelines.length > 0 && (
<StyledSelectionStatusDiv>
<div>
Expand Down
Loading

0 comments on commit 5314d23

Please sign in to comment.