litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <amit@chaosnative.com>
This commit is contained in:
Amit Kumar Das 2021-05-24 09:57:15 +05:30 committed by GitHub
parent be94b251bc
commit 661a2a3ecd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 175 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
litmus-portal/frontend/public/locales/en/translation.yaml
View File

@ -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

2
litmus-portal/frontend/src/containers/app/App.tsx
View File

@ -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'));

168
litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/index.tsx → litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/index.tsx
View File

@ -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<MyHubConnectDrawerProps> = ({
hubName,
drawerState,
handleDrawerClose,
refetchQuery,
@ -85,8 +90,19 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
publicKey: '',
});
const { data } = useQuery<HubStatus>(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<MyHubData, CreateMyHub>(
ADD_MY_HUB,
{
@ -110,6 +126,9 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
}
);
/**
* Save My Hub mutation to save a hub details for later
*/
const [saveMyHub] = useMutation<MyHubData, CreateMyHub>(SAVE_MY_HUB, {
onCompleted: () => {
setAlertState(true);
@ -129,7 +148,33 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
},
});
// 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<SSHKeys>(
GENERATE_SSH,
{
@ -144,7 +189,41 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
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<MyHubConnectDrawerProps> = ({
},
});
} else
/**
* This will call the add myhub mutation
*/
addMyHub({
variables: {
MyHubDetails: {
@ -234,18 +316,59 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
};
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 (
<Drawer
@ -266,7 +389,9 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
<BackButton onClick={() => handleDrawerClose()} />
</div>
<Typography variant="h4" gutterBottom>
{t('myhub.connectHubPage.connectHub')}
{hubName?.length
? t('myhub.connectHubPage.editHub')
: t('myhub.connectHubPage.connectHub')}
</Typography>
</div>
<div className={classes.detailsDiv}>
@ -455,7 +580,11 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
</div>
</div>
<div className={classes.btnDiv}>
<ButtonOutlined data-cy="cancel" className={classes.cancelBtn}>
<ButtonOutlined
data-cy="cancel"
onClick={() => handleDrawerClose()}
className={classes.cancelBtn}
>
{t('myhub.connectHubPage.cancel')}
</ButtonOutlined>
<ButtonFilled
@ -466,10 +595,11 @@ const MyHubConnectDrawer: React.FC<MyHubConnectDrawerProps> = ({
disabled={
!isValidWebUrl(gitHub.GitURL) ||
validateStartEmptySpacing(gitHub.GitBranch) ||
loading
loading ||
updateHubLoader
}
>
{loading ? (
{loading || updateHubLoader ? (
<Loader size={20} />
) : saveChanges ? (
'Save Changes'

0
litmus-portal/frontend/src/pages/MyHub/MyHubConnectDrawer/styles.ts → litmus-portal/frontend/src/pages/ChaosHub/MyHubConnectDrawer/styles.ts
View File

8
litmus-portal/frontend/src/pages/MyHub/customMyHubCard.tsx → litmus-portal/frontend/src/pages/ChaosHub/customMyHubCard.tsx
View File

@ -25,6 +25,7 @@ interface customMyHubCardProp {
handleDelete: (hubId: string) => void;
handleRefresh: (hubId: string) => void;
refreshLoader: boolean;
handleEditHub: (hubName: string) => void;
}
const CustomMyHubCard: React.FC<customMyHubCardProp> = ({
@ -33,6 +34,7 @@ const CustomMyHubCard: React.FC<customMyHubCardProp> = ({
refreshLoader,
handleDelete,
handleRefresh,
handleEditHub,
}) => {
const classes = useStyles();
const { palette } = useTheme();
@ -125,10 +127,8 @@ const CustomMyHubCard: React.FC<customMyHubCardProp> = ({
data-cy="myHubEdit"
value="View"
onClick={() => {
history.push({
pathname: `/myhub/edit/${hub.HubName}`,
search: `?projectID=${projectID}&projectRole=${userRole}`,
});
handleEditHub(hub.HubName);
handleClose();
}}
>
<div className={classes.cardMenu}>

21
litmus-portal/frontend/src/pages/MyHub/index.tsx → litmus-portal/frontend/src/pages/ChaosHub/index.tsx
View File

@ -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}
/>
))}
</div>
@ -203,14 +220,16 @@ const MyHub: React.FC = () => {
</>
)}
{/* Add MyHub Drawer */}
{/* Add/Edit MyHub Drawer */}
<MyHubConnectDrawer
hubName={hubName}
drawerState={drawerState}
handleDrawerClose={handleDrawerClose}
refetchQuery={handleDrawerCloseWithRefetch}
setAlertState={(alert) => setDisplayResult(alert)}
setAlertResult={(alertResult) => setCloneResult(alertResult)}
/>
{/* SnackBar to display success/failure alerts */}
<Snackbar
open={displayResult}
autoHideDuration={6000}

0
litmus-portal/frontend/src/pages/MyHub/styles.ts → litmus-portal/frontend/src/pages/ChaosHub/styles.ts
View File