-
Notifications
You must be signed in to change notification settings - Fork 151
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bulk-import): allow adding repositories (#1357)
- Loading branch information
Showing
39 changed files
with
2,264 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
plugins/bulk-import/src/components/AddRepositories/AddRepositoriesForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { makeStyles } from '@material-ui/core'; | ||
| import HelpIcon from '@mui/icons-material/HelpOutline'; | ||
| import FormControl from '@mui/material/FormControl'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import Radio from '@mui/material/Radio'; | ||
| import RadioGroup from '@mui/material/RadioGroup'; | ||
| import Tooltip from '@mui/material/Tooltip'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import { FormikErrors } from 'formik'; | ||
|
|
||
| import { AddRepositoriesFormValues } from '../../types'; | ||
| import { AddRepositoriesTable } from './AddRepositoriesTable'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| body: { | ||
| marginBottom: '50px', | ||
| }, | ||
| approvalTool: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| justifyContent: 'left', | ||
| alignItems: 'center', | ||
| paddingTop: '24px', | ||
| paddingBottom: '24px', | ||
| paddingLeft: '16px', | ||
| backgroundColor: theme.palette.background.paper, | ||
| borderBottomStyle: 'groove', | ||
| border: theme.palette.divider, | ||
| }, | ||
|
|
||
| approvalToolTooltip: { | ||
| paddingTop: '4px', | ||
| paddingRight: '24px', | ||
| paddingLeft: '5px', | ||
| }, | ||
| })); | ||
|
|
||
| export const AddRepositoriesForm = ({ | ||
| values, | ||
| setFieldValue, | ||
| setapprovalTool, | ||
| }: { | ||
| values: AddRepositoriesFormValues; | ||
| setFieldValue: ( | ||
| field: string, | ||
| value: any, | ||
| shouldValidate?: boolean | undefined, | ||
| ) => Promise<void> | Promise<FormikErrors<AddRepositoriesFormValues>>; | ||
| setapprovalTool: any; | ||
| }) => { | ||
| const styles = useStyles(); | ||
|
|
||
| return ( | ||
| <FormControl fullWidth> | ||
| <div className={styles.body}> | ||
| <span className={styles.approvalTool}> | ||
| <Typography fontSize="16px" fontWeight="500"> | ||
| Approval tool | ||
| </Typography> | ||
| <Tooltip | ||
| placement="top" | ||
| title="When adding a new repository, it requires approval. Once the PR is approved or the ServiceNow ticket is closed, the repositories will be added to the Catalog page." | ||
| > | ||
| <span className={styles.approvalToolTooltip}> | ||
| <HelpIcon fontSize="small" /> | ||
| </span> | ||
| </Tooltip> | ||
| <RadioGroup | ||
| id="approval-tool" | ||
| data-testid="approval-tool" | ||
| row | ||
| aria-labelledby="approval-tool" | ||
| name="approvalTool" | ||
| value={values.approvalTool} | ||
| onChange={(_event, value: string) => { | ||
| setapprovalTool(value); | ||
| setFieldValue('approvalTool', value); | ||
| }} | ||
| > | ||
| <FormControlLabel value="git" control={<Radio />} label="Git" /> | ||
| <FormControlLabel | ||
| value="servicenow" | ||
| control={<Radio />} | ||
| label="ServiceNow" | ||
| /> | ||
| </RadioGroup> | ||
| </span> | ||
| <AddRepositoriesTable | ||
| title="Selected repositories" | ||
| selectedRepositoriesFormData={values} | ||
| setFieldValue={setFieldValue} | ||
| /> | ||
| </div> | ||
| <br /> | ||
| </FormControl> | ||
| ); | ||
| }; |
79 changes: 79 additions & 0 deletions
79
plugins/bulk-import/src/components/AddRepositories/AddRepositoriesFormFooter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import React, { FormEvent } from 'react'; | ||
|
|
||
| import { Link } from '@backstage/core-components'; | ||
|
|
||
| import { makeStyles } from '@material-ui/core'; | ||
| import Button from '@mui/material/Button'; | ||
| import Tooltip from '@mui/material/Tooltip'; | ||
|
|
||
| import { AddRepositoriesFormValues } from '../../types'; | ||
| import { getRepositoriesSelected } from '../../utils/repository-utils'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| createButton: { | ||
| marginRight: theme.spacing(1), | ||
| }, | ||
| illustration: { | ||
| flexDirection: 'row', | ||
| display: 'flex', | ||
| justifyContent: 'space-around', | ||
| overflow: 'scroll', | ||
| }, | ||
| tooltip: { | ||
| whiteSpace: 'nowrap', | ||
| }, | ||
| footer: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| justifyContent: 'left', | ||
| position: 'fixed', | ||
| bottom: 0, | ||
| paddingTop: '24px', | ||
| paddingBottom: '24px', | ||
| paddingLeft: '24px', | ||
| backgroundColor: theme.palette.background.paper, | ||
| width: '100%', | ||
| borderTopStyle: 'groove', | ||
| border: theme.palette.divider, | ||
| }, | ||
| })); | ||
|
|
||
| export const AddRepositoriesFormFooter = ({ | ||
| approvalTool, | ||
| values, | ||
| handleSubmit, | ||
| }: { | ||
| approvalTool: string; | ||
| values: AddRepositoriesFormValues; | ||
| handleSubmit: (e?: FormEvent<HTMLFormElement> | undefined) => void; | ||
| }) => { | ||
| const styles = useStyles(); | ||
| const submitTitle = | ||
| (approvalTool === 'git' | ||
| ? 'Create pull request' | ||
| : 'Create ServiceNow ticket') + | ||
| (getRepositoriesSelected(values) > 1 ? 's' : ''); | ||
|
|
||
| return ( | ||
| <div className={styles.footer}> | ||
| <Tooltip | ||
| classes={{ tooltip: styles.tooltip }} | ||
| title="Please wait until the catalog-info.yaml files are generated" | ||
| > | ||
| <span> | ||
| <Button | ||
| variant="contained" | ||
| onClick={handleSubmit as any} | ||
| className={styles.createButton} | ||
| disabled={getRepositoriesSelected(values) === 0} | ||
| > | ||
| {submitTitle} | ||
| </Button> | ||
| </span> | ||
| </Tooltip> | ||
| <Link to="/bulk-import/repositories"> | ||
| <Button variant="outlined">Cancel</Button> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }; |
119 changes: 119 additions & 0 deletions
119
plugins/bulk-import/src/components/AddRepositories/AddRepositoriesPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Content, Header, Page } from '@backstage/core-components'; | ||
|
|
||
| import { makeStyles, useTheme } from '@material-ui/core'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import { useFormik } from 'formik'; | ||
|
|
||
| import { AddRepositoriesFormValues } from '../../types'; | ||
| import { AddRepositoriesForm } from './AddRepositoriesForm'; | ||
| import { AddRepositoriesFormFooter } from './AddRepositoriesFormFooter'; | ||
| import { Illustrations } from './Illustrations'; | ||
|
|
||
| const useStyles = makeStyles(() => ({ | ||
| illustration: { | ||
| flexDirection: 'row', | ||
| display: 'flex', | ||
| justifyContent: 'space-around', | ||
| overflow: 'scroll', | ||
| }, | ||
| })); | ||
|
|
||
| export const AddRepositoriesPage = () => { | ||
| const styles = useStyles(); | ||
| const theme = useTheme(); | ||
| const [approvalTool, setApprovalTool] = React.useState<'git' | 'servicenow'>( | ||
| 'git', | ||
| ); | ||
| const initialValues: AddRepositoriesFormValues = { | ||
| repositoryType: 'repository', | ||
| repositories: [], | ||
| organizations: [], | ||
| approvalTool: 'git', | ||
| }; | ||
|
|
||
| const formik = useFormik<AddRepositoriesFormValues>({ | ||
| enableReinitialize: true, | ||
| initialValues, | ||
| onSubmit: async (_values: AddRepositoriesFormValues) => {}, | ||
| }); | ||
|
|
||
| return ( | ||
| <Page themeId="tool"> | ||
| <Header title="Add repositories" type="Bulk import" typeLink=".." /> | ||
| <Content> | ||
| <Accordion defaultExpanded> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| id="add-repository-summary" | ||
| > | ||
| <Typography variant="h5"> | ||
| Add repositories to Red Hat Developer Hub in 5 steps | ||
| </Typography> | ||
| </AccordionSummary> | ||
| <AccordionDetails | ||
| id="add-repository-illustrations" | ||
| className={styles.illustration} | ||
| > | ||
| <Illustrations | ||
| iconClassname={ | ||
| theme.palette.type === 'dark' | ||
| ? 'icon-approval-tool-white' | ||
| : 'icon-approval-tool-black' | ||
| } | ||
| iconText="Choose approval tool (git/ServiceNow) for PR/ticket creation" | ||
| /> | ||
| <Illustrations | ||
| iconClassname={ | ||
| theme.palette.type === 'dark' | ||
| ? 'icon-choose-repositories-white' | ||
| : 'icon-choose-repositories-black' | ||
| } | ||
| iconText="Choose repositories you want to add" | ||
| /> | ||
| <Illustrations | ||
| iconClassname={ | ||
| theme.palette.type === 'dark' | ||
| ? 'icon-generate-cataloginfo-white' | ||
| : 'icon-generate-cataloginfo-black' | ||
| } | ||
| iconText="Generate a catalog-info.yaml file for each repository" | ||
| /> | ||
| <Illustrations | ||
| iconClassname={ | ||
| theme.palette.type === 'dark' | ||
| ? 'icon-edit-pullrequest-white' | ||
| : 'icon-edit-pullrequest-black' | ||
| } | ||
| iconText="Edit the pull request details if needed" | ||
| /> | ||
| <Illustrations | ||
| iconClassname={ | ||
| theme.palette.type === 'dark' | ||
| ? 'icon-track-status-white' | ||
| : 'icon-track-status-black' | ||
| } | ||
| iconText="Track the approval status" | ||
| /> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| <br /> | ||
| <AddRepositoriesForm | ||
| values={formik.values} | ||
| setFieldValue={formik.setFieldValue} | ||
| setapprovalTool={setApprovalTool} | ||
| /> | ||
| </Content> | ||
| <AddRepositoriesFormFooter | ||
| approvalTool={approvalTool} | ||
| handleSubmit={formik.handleSubmit} | ||
| values={formik.values} | ||
| /> | ||
| </Page> | ||
| ); | ||
| }; |
Oops, something went wrong.