From 661a2a3ecdaaec7a3def81ba78bf00324ae39c97 Mon Sep 17 00:00:00 2001 From: Amit Kumar Das <40661238+amityt@users.noreply.github.com> Date: Mon, 24 May 2021 09:57:15 +0530 Subject: [PATCH] type(ui-refactor): Added edit MyHub drawer and minor directory restructure (#2827) * Added edit drawer for myHub * Added cancel button functionality Signed-off-by: Amit Kumar Das --- .../public/locales/en/translation.yaml | 1 + .../frontend/src/containers/app/App.tsx | 2 +- .../MyHubConnectDrawer/index.tsx | 168 ++++++++++++++++-- .../MyHubConnectDrawer/styles.ts | 0 .../{MyHub => ChaosHub}/customMyHubCard.tsx | 8 +- .../src/pages/{MyHub => ChaosHub}/index.tsx | 21 ++- .../src/pages/{MyHub => ChaosHub}/styles.ts | 0 7 files changed, 175 insertions(+), 25 deletions(-) rename litmus-portal/frontend/src/pages/{MyHub => ChaosHub}/MyHubConnectDrawer/index.tsx (79%) rename litmus-portal/frontend/src/pages/{MyHub => ChaosHub}/MyHubConnectDrawer/styles.ts (100%) rename litmus-portal/frontend/src/pages/{MyHub => ChaosHub}/customMyHubCard.tsx (97%) rename litmus-portal/frontend/src/pages/{MyHub => ChaosHub}/index.tsx (92%) rename litmus-portal/frontend/src/pages/{MyHub => ChaosHub}/styles.ts (100%) diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml index 96ac23b9a..16669268b 100644 --- a/litmus-portal/frontend/public/locales/en/translation.yaml +++ b/litmus-portal/frontend/public/locales/en/translation.yaml @@ -1065,6 +1065,7 @@ myhub: syncingRepo: Loading Charts, Please Wait...! connectHubPage: connectHub: Connect a new chaos hub + editHub: Edit hub configuration enterInfo: Enter information in the required fields connectBtn: Then click on the connect button submitBtn: Submit Now diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx index 115a029ec..74bd99941 100644 --- a/litmus-portal/frontend/src/containers/app/App.tsx +++ b/litmus-portal/frontend/src/containers/app/App.tsx @@ -43,7 +43,7 @@ const DashboardConfigurePage = lazy( () => import('../../pages/SelectAndConfigureDashboards/Configure') ); const DashboardPage = lazy(() => import('../../pages/ApplicationDashboard')); -const MyHub = lazy(() => import('../../pages/MyHub')); +const MyHub = lazy(() => import('../../pages/ChaosHub')); const ChaosChart = lazy(() => import('../../views/MyHub/MyHubCharts')); const MyHubExperiment = lazy(() => import('../../views/MyHub/MyHubExperiment')); const MyHubEdit = lazy(() => import('../../views/MyHub/MyHubEdit')); diff --git a/litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/index.tsx b/litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/index.tsx similarity index 79% rename from litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/index.tsx rename to litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/index.tsx index bdbdcccd7..2129f6c0e 100644 --- a/litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/index.tsx +++ b/litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/index.tsx @@ -1,4 +1,4 @@ -import { useMutation } from '@apollo/client'; +import { useMutation, useQuery } from '@apollo/client'; import { Drawer, FormControl, @@ -19,6 +19,7 @@ import { ADD_MY_HUB, GENERATE_SSH, SAVE_MY_HUB, + UPDATE_MY_HUB, } from '../../../graphql/mutations'; import { CreateMyHub, @@ -34,6 +35,8 @@ import { } from '../../../utils/validate'; import useStyles from './styles'; import { constants } from '../../../constants'; +import { HubStatus } from '../../../models/redux/myhub'; +import { GET_HUB_STATUS } from '../../../graphql/queries'; interface GitHub { HubName: string; @@ -52,6 +55,7 @@ interface CloneResult { } interface MyHubConnectDrawerProps { + hubName?: string; drawerState: boolean; handleDrawerClose: () => void; refetchQuery: () => void; @@ -60,6 +64,7 @@ interface MyHubConnectDrawerProps { } const MyHubConnectDrawer: React.FC = ({ + hubName, drawerState, handleDrawerClose, refetchQuery, @@ -85,8 +90,19 @@ const MyHubConnectDrawer: React.FC = ({ publicKey: '', }); + const { data } = useQuery(GET_HUB_STATUS, { + variables: { data: projectID }, + fetchPolicy: 'network-only', + }); + const hubData = data?.getHubStatus.filter( + (hubs) => hubs.HubName === hubName + )[0]; + const [saveChanges, setSaveChanges] = useState(false); + /** + * Add MyHub mutation to create a new hub + */ const [addMyHub, { loading }] = useMutation( ADD_MY_HUB, { @@ -110,6 +126,9 @@ const MyHubConnectDrawer: React.FC = ({ } ); + /** + * Save My Hub mutation to save a hub details for later + */ const [saveMyHub] = useMutation(SAVE_MY_HUB, { onCompleted: () => { setAlertState(true); @@ -129,7 +148,33 @@ const MyHubConnectDrawer: React.FC = ({ }, }); - // Mutation to generate SSH key + /** + * Update MyHub mutation to edit the myhub configuration + */ + const [updateMyHub, { loading: updateHubLoader }] = useMutation< + MyHubData, + CreateMyHub + >(UPDATE_MY_HUB, { + onCompleted: () => { + setAlertState(true); + setAlertResult({ + type: constants.success, + message: 'My Hub configurations successfully updated', + }); + refetchQuery(); + }, + onError: (error) => { + setAlertState(true); + setAlertResult({ + type: constants.error, + message: `Error:${error.message}`, + }); + }, + }); + + /** + * Mutation to generate SSH key + */ const [generateSSHKey, { loading: sshLoading }] = useMutation( GENERATE_SSH, { @@ -144,7 +189,41 @@ const MyHubConnectDrawer: React.FC = ({ const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); - if (saveChanges) { + /** + * If hubName is present, edit myhub mutation will be called + */ + if (hubName?.length) { + updateMyHub({ + variables: { + MyHubDetails: { + id: hubData?.id, + HubName: gitHub.HubName.trim(), + RepoURL: gitHub.GitURL, + RepoBranch: gitHub.GitBranch, + IsPrivate: isToggled.isPublicToggled + ? false + : !!isToggled.isPrivateToggled, + AuthType: isToggled.isPublicToggled + ? MyHubType.basic + : privateHub === 'token' + ? MyHubType.token + : privateHub === 'ssh' + ? MyHubType.ssh + : MyHubType.basic, + Token: accessToken, + UserName: 'user', + Password: 'user', + SSHPrivateKey: sshKey.privateKey, + SSHPublicKey: sshKey.publicKey, + }, + projectID, + }, + }); + } else if (saveChanges) { + /** + * Save changes is enabled if add myhub mutation fails. + * This will call the save myhub mutation + */ saveMyHub({ variables: { MyHubDetails: { @@ -171,6 +250,9 @@ const MyHubConnectDrawer: React.FC = ({ }, }); } else + /** + * This will call the add myhub mutation + */ addMyHub({ variables: { MyHubDetails: { @@ -234,18 +316,59 @@ const MyHubConnectDrawer: React.FC = ({ }; useEffect(() => { - setGitHub({ - HubName: '', - GitURL: '', - GitBranch: '', - }); - setSaveChanges(false); - setSshKey({ - publicKey: '', - privateKey: '', - }); - setPrivateHub('token'); - }, [drawerState]); + /** + * If hubName is present, this fetches the myhub configuration + * and sets in the inputfields (for edit Myhub) + */ + if (hubName?.length) { + if (hubData !== undefined) { + setGitHub({ + HubName: hubData.HubName, + GitURL: hubData.RepoURL, + GitBranch: hubData.RepoBranch, + }); + if (hubData.IsPrivate) { + setIsToggled({ + isPublicToggled: false, + isPrivateToggled: true, + }); + } else { + setIsToggled({ + isPublicToggled: true, + isPrivateToggled: false, + }); + } + if (hubData.AuthType === MyHubType.token) { + setPrivateHub('token'); + setAccessToken(hubData.Token); + } else if (hubData.AuthType === MyHubType.ssh) { + setPrivateHub('ssh'); + setSshKey({ + privateKey: hubData.SSHPrivateKey, + publicKey: hubData.SSHPublicKey, + }); + } else { + setPrivateHub('token'); + } + } + } else { + /** + * Whenever the drawer is opened, if it is not for edit MyHub, + * the default values in the input field will be empty string + */ + setGitHub({ + HubName: '', + GitURL: '', + GitBranch: '', + }); + setSaveChanges(false); + setSshKey({ + publicKey: '', + privateKey: '', + }); + setPrivateHub('token'); + } + }, [drawerState, hubName]); return ( = ({ handleDrawerClose()} /> - {t('myhub.connectHubPage.connectHub')} + {hubName?.length + ? t('myhub.connectHubPage.editHub') + : t('myhub.connectHubPage.connectHub')}
@@ -455,7 +580,11 @@ const MyHubConnectDrawer: React.FC = ({
- + handleDrawerClose()} + className={classes.cancelBtn} + > {t('myhub.connectHubPage.cancel')} = ({ disabled={ !isValidWebUrl(gitHub.GitURL) || validateStartEmptySpacing(gitHub.GitBranch) || - loading + loading || + updateHubLoader } > - {loading ? ( + {loading || updateHubLoader ? ( ) : saveChanges ? ( 'Save Changes' diff --git a/litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/styles.ts b/litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/styles.ts similarity index 100% rename from litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/styles.ts rename to litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/styles.ts diff --git a/litmus-portal/frontend/src/pages/MyHub/customMyHubCard.tsx b/litmus-portal/frontend/src/pages/ChaosHub/customMyHubCard.tsx similarity index 97% rename from litmus-portal/frontend/src/pages/MyHub/customMyHubCard.tsx rename to litmus-portal/frontend/src/pages/ChaosHub/customMyHubCard.tsx index 412ef478a..d32bf59bc 100644 --- a/litmus-portal/frontend/src/pages/MyHub/customMyHubCard.tsx +++ b/litmus-portal/frontend/src/pages/ChaosHub/customMyHubCard.tsx @@ -25,6 +25,7 @@ interface customMyHubCardProp { handleDelete: (hubId: string) => void; handleRefresh: (hubId: string) => void; refreshLoader: boolean; + handleEditHub: (hubName: string) => void; } const CustomMyHubCard: React.FC = ({ @@ -33,6 +34,7 @@ const CustomMyHubCard: React.FC = ({ refreshLoader, handleDelete, handleRefresh, + handleEditHub, }) => { const classes = useStyles(); const { palette } = useTheme(); @@ -125,10 +127,8 @@ const CustomMyHubCard: React.FC = ({ data-cy="myHubEdit" value="View" onClick={() => { - history.push({ - pathname: `/myhub/edit/${hub.HubName}`, - search: `?projectID=${projectID}&projectRole=${userRole}`, - }); + handleEditHub(hub.HubName); + handleClose(); }} >
diff --git a/litmus-portal/frontend/src/pages/MyHub/index.tsx b/litmus-portal/frontend/src/pages/ChaosHub/index.tsx similarity index 92% rename from litmus-portal/frontend/src/pages/MyHub/index.tsx rename to litmus-portal/frontend/src/pages/ChaosHub/index.tsx index 49007df9d..467fc4e50 100644 --- a/litmus-portal/frontend/src/pages/MyHub/index.tsx +++ b/litmus-portal/frontend/src/pages/ChaosHub/index.tsx @@ -46,12 +46,28 @@ const MyHub: React.FC = () => { const [drawerState, setDrawerState] = useState(false); + /** + * State Variables for Edit MyHub + */ + const [hubName, setHubName] = useState(''); // To distinguish between create or edit MyHub + + const openHubDrawer = (myHubName: string) => { + setHubName(myHubName); + setDrawerState(true); + }; + const handleDrawerClose = () => { + if (hubName.length) { + setHubName(''); + } setDrawerState(false); }; const handleDrawerCloseWithRefetch = () => { setDrawerState(false); + if (hubName.length) { + setHubName(''); + } refetch(); }; @@ -165,6 +181,7 @@ const MyHub: React.FC = () => { handleDelete={handleDelete} handleRefresh={handleRefresh} refreshLoader={refreshLoading} + handleEditHub={openHubDrawer} /> ))}
@@ -203,14 +220,16 @@ const MyHub: React.FC = () => { )} - {/* Add MyHub Drawer */} + {/* Add/Edit MyHub Drawer */} setDisplayResult(alert)} setAlertResult={(alertResult) => setCloneResult(alertResult)} /> + {/* SnackBar to display success/failure alerts */}