Skip to content

Commit

Permalink
feat(bulk-import): add repo row actions (#1572)
Browse files Browse the repository at this point in the history 
Signed-off-by: Yi Cai <yicai@redhat.com>
  • Loading branch information
@ciiay
ciiay committed Jun 26, 2024
1 parent e7c59f5 commit 66051e3
Show file tree
Hide file tree
Showing 17 changed files with 811 additions and 100 deletions.
2 changes: 2 additions & 0 deletions plugins/bulk-import/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@
"@backstage/plugin-catalog-import": "^0.10.10",
"@material-ui/core": "^4.9.13",
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "5.15.17",
"@mui/material": "^5.12.2",
"@janus-idp/shared-react": "2.6.4",
"formik": "^2.4.5",
"lodash": "^4.17.21",
"react-use": "^17.2.4"
Expand Down
8 changes: 5 additions & 3 deletions plugins/bulk-import/src/components/AddRepositories/RepositoriesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,14 @@ export const RepositoriesTable = ({
const reposData = useMemo(() => {
return getDataForRepositories(user || '');
}, [user]);
const [orgsData, setOrgsData] = React.useState<AddRepositoriesData[]>(
createOrganizationData(mockData(user || '')),
);
const [orgsData, setOrgsData] = React.useState<AddRepositoriesData[]>([]);

const orgReposData = drawerOrganization?.repositories;

useEffect(() => {
setOrgsData(createOrganizationData(mockData(user || '')));
}, [user]);

useEffect(() => {
setLocalPage(page || 0);
}, [page]);
Expand Down
39 changes: 28 additions & 11 deletions plugins/bulk-import/src/components/BulkImportPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,32 @@ import React from 'react';

import { Header, Page, TabbedLayout } from '@backstage/core-components';

import { RepositoriesList } from './Repositories/RepositoriesList';
import { Formik } from 'formik';

export const BulkImportPage = () => (
<Page themeId="tool">
<Header title="Bulk import" />
<TabbedLayout>
<TabbedLayout.Route path="/" title="Repositories">
<RepositoriesList />
</TabbedLayout.Route>
</TabbedLayout>
</Page>
);
import { AddRepositoriesFormValues } from '../types';
import { RepositoriesListForm } from './Repositories/RepositoriesListForm';

export const BulkImportPage = () => {
const initialValues: AddRepositoriesFormValues = {
repositoryType: 'repository',
repositories: {},
approvalTool: 'git',
};

return (
<Page themeId="tool">
<Header title="Bulk import" />
<TabbedLayout>
<TabbedLayout.Route path="/" title="Repositories">
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={async (_values: AddRepositoriesFormValues) => {}}
>
<RepositoriesListForm />
</Formik>
</TabbedLayout.Route>
</TabbedLayout>
</Page>
);
};
131 changes: 81 additions & 50 deletions plugins/bulk-import/src/components/PreviewFile/PreviewFile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useFormikContext } from 'formik';
import {
AddRepositoriesData,
AddRepositoriesFormValues,
PullRequestPreview,
PullRequestPreviewData,
RepositorySelection,
RepositoryStatus,
Expand All @@ -23,11 +24,14 @@ import {
import { PreviewPullRequest } from './PreviewPullRequest';
import { PreviewPullRequests } from './PreviewPullRequests';

const useDrawerContentStyles = makeStyles(theme => ({
const useDrawerStyles = makeStyles(() => ({
paper: {
width: '40%',
gap: '3%',
},
}));

const useDrawerContentStyles = makeStyles(theme => ({
createButton: {
marginRight: theme.spacing(1),
},
Expand Down Expand Up @@ -59,54 +63,66 @@ const useDrawerContentStyles = makeStyles(theme => ({
width: '100%',
borderTopStyle: 'groove',
border: theme.palette.divider,
zIndex: 'inherit',
zIndex: 1,
},
}));

const PreviewFileSidebar = ({
export const PreviewFileSidebar = ({
open,
onClose,
repositoryType,
data,
formErrors,
setFormErrors,
handleSave,
}: {
open: boolean;
data: AddRepositoriesData;
repositoryType: RepositoryType;
onClose: () => void;
formErrors: any;
setFormErrors: React.Dispatch<React.SetStateAction<any>>;
handleSave: (pullRequest: PullRequestPreviewData, _event: any) => void;
}) => {
const classes = useDrawerContentStyles();
const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
const { values, setFieldValue } =
useFormikContext<AddRepositoriesFormValues>();
const classes = useDrawerStyles();
const [pullRequest, setPullRequest] = React.useState<PullRequestPreviewData>(
{},
);
const initializePullRequest = () => {
Object.keys(values?.repositories || {}).forEach(repo => {
setPullRequest(prev => {
return {
...prev,
[repo]: values?.repositories?.[repo].catalogInfoYaml?.prTemplate,
} as PullRequestPreviewData;
const { values } = useFormikContext<AddRepositoriesFormValues>();
const contentClasses = useDrawerContentStyles();
const initializePullRequest = React.useCallback(() => {
const newPullRequestData: PullRequestPreviewData = {};

if (
data?.repositories?.length &&
data?.repositories?.length > 0 &&
data?.selectedRepositories?.length &&
data.selectedRepositories?.length > 0
) {
data.selectedRepositories.forEach(repo => {
if (
repo.repoName &&
values.repositories?.[repo.repoName]?.catalogInfoYaml?.prTemplate
) {
newPullRequestData[repo.repoName] = values.repositories[repo.repoName]
.catalogInfoYaml?.prTemplate as PullRequestPreview;
}
});
});
};
} else if (
data?.repoName &&
values.repositories?.[data.repoName]?.catalogInfoYaml?.prTemplate
) {
newPullRequestData[data.repoName] = values.repositories[data.repoName]
.catalogInfoYaml?.prTemplate as PullRequestPreview;
}

setPullRequest(newPullRequestData);
}, [data, values]);

React.useEffect(() => {
initializePullRequest();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [values?.repositories]);

const handleSave = (_event: any) => {
Object.keys(pullRequest).forEach(pr => {
setFieldValue(
`repositories.${pr}.catalogInfoYaml.prTemplate`,
pullRequest[pr],
);
});

onClose();
};
initializePullRequest();
}, [data, initializePullRequest]);

const handleCancel = (_event: any) => {
initializePullRequest();
Expand All @@ -124,7 +140,7 @@ const PreviewFileSidebar = ({
}}
>
<Box>
<Box className={classes.header}>
<Box className={contentClasses.header}>
<div>
{repositoryType === RepositorySelection.Repository ? (
<>
Expand All @@ -151,7 +167,7 @@ const PreviewFileSidebar = ({
</IconButton>
</Box>

<Box className={classes.body}>
<Box className={contentClasses.body}>
{repositoryType === RepositorySelection.Repository &&
data.catalogInfoYaml?.prTemplate && (
<PreviewPullRequest
Expand Down Expand Up @@ -179,27 +195,28 @@ const PreviewFileSidebar = ({
setPullRequest={setPullRequest}
/>
)}

<div className={contentClasses.footer}>
<Button
variant="contained"
onClick={e => handleSave(pullRequest, e)}
className={contentClasses.createButton}
disabled={
!!formErrors &&
Object.values(formErrors).length > 0 &&
Object.values(formErrors).every(
fe => !!fe && Object.values(fe).length > 0,
)
}
>
Save
</Button>
<Link to="" variant="button" onClick={handleCancel}>
<Button variant="outlined">Cancel</Button>
</Link>
</div>
</Box>
</Box>
<div className={classes.footer}>
<Button
variant="contained"
onClick={handleSave}
className={classes.createButton}
disabled={
!!formErrors &&
Object.values(formErrors).length > 0 &&
Object.values(formErrors).every(
fe => !!fe && Object.values(fe).length > 0,
)
}
>
Save
</Button>
<Link to="" variant="button" onClick={handleCancel}>
<Button variant="outlined">Cancel</Button>
</Link>
</div>
</Drawer>
);
};
Expand All @@ -212,6 +229,17 @@ export const PreviewFile = ({
repositoryType: RepositoryType;
}) => {
const [sidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
const { setFieldValue } = useFormikContext<AddRepositoriesFormValues>();
const [formErrors, setFormErrors] = React.useState<PullRequestPreviewData>();
const handleSave = (pullRequest: PullRequestPreviewData, _event: any) => {
Object.keys(pullRequest).forEach(pr => {
setFieldValue(
`repositories.${pr}.catalogInfoYaml.prTemplate`,
pullRequest[pr],
);
});
setSidebarOpen(false);
};
return (
<>
<span>
Expand All @@ -238,7 +266,10 @@ export const PreviewFile = ({
open={sidebarOpen}
onClose={() => setSidebarOpen(false)}
data={data}
formErrors={formErrors}
setFormErrors={setFormErrors}
repositoryType={repositoryType}
handleSave={handleSave}
/>
</>
);
Expand Down
33 changes: 17 additions & 16 deletions plugins/bulk-import/src/components/PreviewFile/PreviewPullRequest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@ export const PreviewPullRequest = ({
values.approvalTool === 'git' ? 'Pull request' : 'ServiceNow ticket';

const [entityOwner, setEntityOwner] = React.useState<string | null>(
values.repositories[repoName]?.catalogInfoYaml?.prTemplate?.entityOwner ||
'',
pullRequest[repoName]?.entityOwner || '',
);
const { loading: entitiesLoading, value: entities } = useAsync(async () => {
const allEntities = await catalogApi.getEntities({
Expand All @@ -68,18 +67,20 @@ export const PreviewPullRequest = ({
.sort();
});
React.useEffect(() => {
if (
!values.repositories[repoName]?.catalogInfoYaml?.prTemplate?.entityOwner
) {
setFormErrors({
...formErrors,
[repoName]: {
...formErrors?.[repoName],
entityOwner: 'Entity owner is missing',
},
});
const newFormErrors = {
...formErrors,
[repoName]: {
...formErrors?.[repoName],
entityOwner: 'Entity owner is missing',
},
};

if (entityOwner === null || !pullRequest[repoName]?.entityOwner) {
if (JSON.stringify(formErrors) !== JSON.stringify(newFormErrors)) {
setFormErrors(newFormErrors);
}
}
}, [values, setFormErrors, formErrors, repoName]);
}, [entityOwner, pullRequest, setFormErrors, formErrors, repoName]);

const handleChange = (
event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,
Expand Down Expand Up @@ -171,7 +172,7 @@ export const PreviewPullRequest = ({
variant="outlined"
margin="normal"
fullWidth
name={`repositories.${pullRequest.componentName}.prTitle`}
name={`repositories.${pullRequest[repoName].componentName}.prTitle`}
value={pullRequest?.[repoName]?.prTitle}
onChange={handleChange}
error={!!formErrors?.[repoName]?.prTitle}
Expand All @@ -185,7 +186,7 @@ export const PreviewPullRequest = ({
variant="outlined"
fullWidth
onChange={handleChange}
name={`repositories.${pullRequest.componentName}.prDescription`}
name={`repositories.${pullRequest[repoName].componentName}.prDescription`}
value={pullRequest?.[repoName]?.prDescription}
error={!!formErrors?.[repoName]?.prDescription}
multiline
Expand All @@ -203,7 +204,7 @@ export const PreviewPullRequest = ({
variant="outlined"
onChange={handleChange}
value={pullRequest?.[repoName]?.componentName}
name={`repositories.${pullRequest.componentName}.componentName`}
name={`repositories.${pullRequest[repoName].componentName}.componentName`}
error={!!formErrors?.[repoName]?.componentName}
fullWidth
required
Expand Down
Loading

0 comments on commit 66051e3

Please sign in to comment.