Skip to content

Commit ed7b5a8

Browse files
JanhaviAlekarJanhaviAlekar
authored
Added the remoteHub field (for Git repository name) in the ChaosHub Frontend (#4843)
* added dropdown in add chaoshub modal(AddHubModalWizard) Signed-off-by: JanhaviAlekar <[email protected]> * added svg for list chaoshub in chaoshub page(ChaosHubs.tsx) Signed-off-by: JanhaviAlekar <[email protected]> * added dropdown list in edit chaoshub modal(EditHubModalWizard.tsx) Signed-off-by: JanhaviAlekar <[email protected]> * made remoteHub as required field Signed-off-by: JanhaviAlekar <[email protected]> --------- Signed-off-by: JanhaviAlekar <[email protected]>
1 parent a5b5866 commit ed7b5a8

File tree

14 files changed

+140
-4
lines changed

14 files changed

+140
-4
lines changed

‎chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface CreateChaosHubRequest {
88
description?: string;
99
repoURL: string;
1010
repoBranch: string;
11+
remoteHub: string;
1112
isPrivate: boolean;
1213
authType: AuthType;
1314
token?: string;
@@ -36,6 +37,7 @@ export function addChaosHub(
3637
name
3738
repoURL
3839
repoBranch
40+
remoteHub
3941
hubType
4042
isPrivate
4143
}

‎chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export function listChaosHub({
3434
id
3535
repoURL
3636
repoBranch
37+
remoteHub
3738
authType
3839
isAvailable
3940
totalFaults

‎chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ interface EditChaosHubRequest {
88
tags: string[];
99
description?: string;
1010
repoURL: string;
11+
remoteHub: string;
1112
repoBranch: string;
1213
isPrivate: boolean;
1314
authType: AuthType;
@@ -37,6 +38,7 @@ export function updateChaosHub(
3738
name
3839
repoURL
3940
repoBranch
41+
remoteHub
4042
}
4143
}
4244
`,

‎chaoscenter/web/src/api/entities/chaoshub.ts

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface ChaosHub extends Audit, ResourceDetails {
2727
id: string;
2828
repoURL: string;
2929
repoBranch: string;
30+
remoteHub: string;
3031
projectID: string;
3132
name: string;
3233
tags?: [string];

‎chaoscenter/web/src/images/Azure.svg

+2
Loading

‎chaoscenter/web/src/images/Bitbucket.svg

+2
Loading

‎chaoscenter/web/src/images/Github.svg

+5
Loading

‎chaoscenter/web/src/images/Gitlab.svg

+53
Loading

‎chaoscenter/web/src/strings/strings.en.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -909,6 +909,7 @@ referencedBy: Referenced By
909909
registry: Registry
910910
registryName: Registry Name
911911
registryType: Registry Type
912+
remoteHub: Select Remote hub
912913
remoteRepo: Remote Repository
913914
remove: Remove
914915
removeMember: Remove Member

‎chaoscenter/web/src/strings/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -753,6 +753,7 @@ export interface StringsMap {
753753
'registry': unknown
754754
'registryName': unknown
755755
'registryType': unknown
756+
'remoteHub': unknown
756757
'remoteRepo': unknown
757758
'remove': unknown
758759
'removeMember': unknown

‎chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx

+25-3
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ interface AddHubFormData {
5151
sshPublicKey?: string;
5252
sshPrivateKey?: string;
5353
token?: string;
54+
remoteHub: string;
5455
}
5556
interface StepData {
5657
value?: AddHubFormData;
@@ -78,7 +79,8 @@ export const initialValues: AddHubFormData = {
7879
repoBranch: '',
7980
repoURL: '',
8081
isPrivate: false,
81-
authType: AuthType.NONE
82+
authType: AuthType.NONE,
83+
remoteHub: ''
8284
};
8385

8486
const OverviewStep: React.FC<StepProps<StepData>> = props => {
@@ -160,6 +162,7 @@ const GitConnectionStep: React.FC<
160162
// name: values.name,
161163
isPrivate: values.isPrivate,
162164
repoURL: values.repoURL,
165+
remoteHub: values.remoteHub,
163166
authType: values.authType,
164167
token: values.token,
165168
sshPublicKey: values.sshPublicKey,
@@ -174,6 +177,7 @@ const GitConnectionStep: React.FC<
174177
description: formData.description,
175178
tags: formData.tags,
176179
repoURL: values.repoURL,
180+
remoteHub: values.remoteHub,
177181
authType: values.authType,
178182
isPrivate: values.isPrivate,
179183
token: values.token,
@@ -188,7 +192,8 @@ const GitConnectionStep: React.FC<
188192
}}
189193
validationSchema={Yup.object().shape({
190194
repoBranch: Yup.string().trim().required('Hub Branch name is a required field'),
191-
repoURL: Yup.string().trim().required('Hub Repo name is a required field')
195+
repoURL: Yup.string().trim().required('Hub Repo name is a required field'),
196+
remoteHub: Yup.string().trim().required('Remote Hub name is a required field')
192197
})}
193198
>
194199
{formikProps => {
@@ -231,6 +236,22 @@ const GitConnectionStep: React.FC<
231236
placeholder={getString('enterHubRepositoryBranch')}
232237
/>
233238

239+
<FormInput.DropDown
240+
name="remoteHub"
241+
label={<Text font={{ variation: FontVariation.FORM_LABEL }}>Remote Hub</Text>}
242+
placeholder={getString('remoteHub')}
243+
items={[
244+
{ label: 'GitHub', value: 'GitHub' },
245+
{ label: 'Bitbucket', value: 'Bitbucket' },
246+
{ label: 'Azure Repo', value: 'Azure Repo' },
247+
{ label: 'GitLab', value: 'GitLab' },
248+
{ label: 'Others', value: 'Others' }
249+
]}
250+
onChange={item => {
251+
formikProps.setFieldValue('remoteHub', item.value);
252+
}}
253+
/>
254+
234255
{formikProps.values.isPrivate && (
235256
<RadioButtonGroup
236257
name="type"
@@ -350,7 +371,8 @@ export default function AddHubModalWizardView({
350371
repoBranch: '',
351372
repoURL: '',
352373
isPrivate: false,
353-
authType: AuthType.NONE
374+
authType: AuthType.NONE,
375+
remoteHub: ''
354376
});
355377

356378
return (

‎chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ describe('ChaosHubMenuView Tests', () => {
3838
name: 'Test Hub',
3939
isDefault: false,
4040
repoURL: '',
41+
remoteHub: '',
4142
repoBranch: '',
4243
projectID: '',
4344
authType: AuthType.SSH,

‎chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx

+24-1
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@ import type { ListChaosHubRequest, ListChaosHubResponse, SyncChaosHubRequest, Sy
1414
import CustomTagsPopover from '@components/CustomTagsPopover';
1515
import { useDocumentTitle, useRouteWithBaseUrl } from '@hooks';
1616
import NoFilteredData from '@components/NoFilteredData';
17+
import GitHub from '@images/Github.svg';
18+
import Azure from '@images/Azure.svg';
19+
import Gitlab from '@images/Gitlab.svg';
1720
import enterpriseHubLogo from '../../images/enterpriseHub.svg';
1821
import privateHubLogo from '../../images/privateHub.svg';
22+
import Bitbucket from '../../images/Bitbucket.svg';
1923
import { AddHubModalProvider } from './AddHubModal';
2024
import css from './ChaosHubs.module.scss';
2125

@@ -48,6 +52,25 @@ function ConnectionStatus({ isConnected }: { isConnected: boolean }): React.Reac
4852
);
4953
}
5054

55+
const RemoteHubImage = ({ remoteHubName }: { remoteHubName: string }): React.ReactElement => {
56+
const hubSvg = () => {
57+
switch (remoteHubName) {
58+
case 'GitHub':
59+
return <img src={GitHub} height={27.38} width={29} alt="GitHub" />;
60+
case 'Azure Repo':
61+
return <img src={Azure} height={27.38} width={29} alt="Azure-Repo" />;
62+
case 'Bitbucket':
63+
return <img src={Bitbucket} height={27.38} width={29} alt="Bitbucket" />;
64+
case 'GitLab':
65+
return <img src={Gitlab} height={27.38} width={29} alt="Gitlab" />;
66+
default:
67+
return <img src={privateHubLogo} height={27.38} width={29} alt="Private Hub" />;
68+
}
69+
};
70+
71+
return hubSvg();
72+
};
73+
5174
export const ChaosHubsView: React.FC<ChaosHubParams> = ({
5275
chaosHubs,
5376
loading,
@@ -132,7 +155,7 @@ export const ChaosHubsView: React.FC<ChaosHubParams> = ({
132155
{chaosHub.isDefault ? (
133156
<img src={enterpriseHubLogo} height={26.85} width={29} alt="Enterprise Hub" />
134157
) : (
135-
<img src={privateHubLogo} height={27.38} width={29} alt="Private Hub" />
158+
<RemoteHubImage remoteHubName={chaosHub.remoteHub} />
136159
)}
137160
<Text
138161
font={{ size: 'medium', weight: 'semi-bold' }}

‎chaoscenter/web/src/views/EditHubModalWizard/EditHubModalWizard.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface EditHubFormData {
4848
description?: string;
4949
tags: string[];
5050
repoBranch: string;
51+
remoteHub: string;
5152
isPrivate: boolean;
5253
authType: AuthType;
5354
sshPublicKey?: string;
@@ -150,6 +151,7 @@ const GitConnectionStep: React.FC<
150151
setFormData({
151152
...formData,
152153
repoBranch: values.repoBranch,
154+
remoteHub: values.remoteHub,
153155
isPrivate: values.isPrivate,
154156
repoURL: values.repoURL,
155157
authType: values.authType,
@@ -164,6 +166,7 @@ const GitConnectionStep: React.FC<
164166
id: formData.hubId,
165167
name: formData.name,
166168
repoBranch: values.repoBranch,
169+
remoteHub: values.remoteHub,
167170
description: formData.description,
168171
tags: formData.tags,
169172
repoURL: values.repoURL,
@@ -229,6 +232,22 @@ const GitConnectionStep: React.FC<
229232
placeholder={getString('enterHubRepositoryBranch')}
230233
/>
231234

235+
<FormInput.DropDown
236+
name="remoteHub"
237+
label={<Text font={{ variation: FontVariation.FORM_LABEL }}>Remote Hub</Text>}
238+
placeholder={'Select Remote hub'}
239+
items={[
240+
{ label: 'GitHub', value: 'GitHub' },
241+
{ label: 'Bitbucket', value: 'Bitbucket' },
242+
{ label: 'Azure Repo', value: 'Azure Repo' },
243+
{ label: 'GitLab', value: 'GitLab' },
244+
{ label: 'Others', value: 'Others' }
245+
]}
246+
onChange={item => {
247+
formikProps.setFieldValue('remoteHub', item.value);
248+
}}
249+
/>
250+
232251
{formikProps.values.isPrivate && (
233252
<RadioButtonGroup
234253
name="type"
@@ -343,6 +362,7 @@ export default function EditHubModalWizardView({
343362
description: hubDetails?.description,
344363
tags: hubDetails?.tags ?? [],
345364
repoBranch: hubDetails?.repoBranch ?? '',
365+
remoteHub: hubDetails?.remoteHub ?? '',
346366
isPrivate: hubDetails?.isPrivate ?? false,
347367
authType: hubDetails?.authType ?? AuthType.NONE,
348368
repoURL: hubDetails?.repoURL ?? '',

0 commit comments

Comments
 (0)