diff --git a/chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts b/chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts index 74a8a6d2e75..c6c36465335 100644 --- a/chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts +++ b/chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts @@ -8,6 +8,7 @@ export interface CreateChaosHubRequest { description?: string; repoURL: string; repoBranch: string; + remoteHub: string; isPrivate: boolean; authType: AuthType; token?: string; @@ -36,6 +37,7 @@ export function addChaosHub( name repoURL repoBranch + remoteHub hubType isPrivate } diff --git a/chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts b/chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts index 904adb08910..a66ed07f41c 100644 --- a/chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts +++ b/chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts @@ -34,6 +34,7 @@ export function listChaosHub({ id repoURL repoBranch + remoteHub authType isAvailable totalFaults diff --git a/chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts b/chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts index 37015347f56..3c9fdbea6da 100644 --- a/chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts +++ b/chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts @@ -8,6 +8,7 @@ interface EditChaosHubRequest { tags: string[]; description?: string; repoURL: string; + remoteHub: string; repoBranch: string; isPrivate: boolean; authType: AuthType; @@ -37,6 +38,7 @@ export function updateChaosHub( name repoURL repoBranch + remoteHub } } `, diff --git a/chaoscenter/web/src/api/entities/chaoshub.ts b/chaoscenter/web/src/api/entities/chaoshub.ts index 0a566de63b2..c06450bfe93 100644 --- a/chaoscenter/web/src/api/entities/chaoshub.ts +++ b/chaoscenter/web/src/api/entities/chaoshub.ts @@ -27,6 +27,7 @@ export interface ChaosHub extends Audit, ResourceDetails { id: string; repoURL: string; repoBranch: string; + remoteHub: string; projectID: string; name: string; tags?: [string]; diff --git a/chaoscenter/web/src/images/Azure.svg b/chaoscenter/web/src/images/Azure.svg new file mode 100644 index 00000000000..624ef6d0f4d --- /dev/null +++ b/chaoscenter/web/src/images/Azure.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/chaoscenter/web/src/images/Bitbucket.svg b/chaoscenter/web/src/images/Bitbucket.svg new file mode 100644 index 00000000000..883910e4e35 --- /dev/null +++ b/chaoscenter/web/src/images/Bitbucket.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/chaoscenter/web/src/images/Github.svg b/chaoscenter/web/src/images/Github.svg new file mode 100644 index 00000000000..5d6072823c4 --- /dev/null +++ b/chaoscenter/web/src/images/Github.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/chaoscenter/web/src/images/Gitlab.svg b/chaoscenter/web/src/images/Gitlab.svg new file mode 100644 index 00000000000..e8d408fa2ed --- /dev/null +++ b/chaoscenter/web/src/images/Gitlab.svg @@ -0,0 +1,53 @@ + + + + logo-square + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml index 081e1458e7f..408481c31cc 100644 --- a/chaoscenter/web/src/strings/strings.en.yaml +++ b/chaoscenter/web/src/strings/strings.en.yaml @@ -909,6 +909,7 @@ referencedBy: Referenced By registry: Registry registryName: Registry Name registryType: Registry Type +remoteHub: Select Remote hub remoteRepo: Remote Repository remove: Remove removeMember: Remove Member diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts index 67b32c14278..fcfe83225f0 100644 --- a/chaoscenter/web/src/strings/types.ts +++ b/chaoscenter/web/src/strings/types.ts @@ -753,6 +753,7 @@ export interface StringsMap { 'registry': unknown 'registryName': unknown 'registryType': unknown + 'remoteHub': unknown 'remoteRepo': unknown 'remove': unknown 'removeMember': unknown diff --git a/chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx b/chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx index a5f1c29ac37..06f50055bef 100644 --- a/chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx +++ b/chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx @@ -51,6 +51,7 @@ interface AddHubFormData { sshPublicKey?: string; sshPrivateKey?: string; token?: string; + remoteHub: string; } interface StepData { value?: AddHubFormData; @@ -78,7 +79,8 @@ export const initialValues: AddHubFormData = { repoBranch: '', repoURL: '', isPrivate: false, - authType: AuthType.NONE + authType: AuthType.NONE, + remoteHub: '' }; const OverviewStep: React.FC> = props => { @@ -160,6 +162,7 @@ const GitConnectionStep: React.FC< // name: values.name, isPrivate: values.isPrivate, repoURL: values.repoURL, + remoteHub: values.remoteHub, authType: values.authType, token: values.token, sshPublicKey: values.sshPublicKey, @@ -174,6 +177,7 @@ const GitConnectionStep: React.FC< description: formData.description, tags: formData.tags, repoURL: values.repoURL, + remoteHub: values.remoteHub, authType: values.authType, isPrivate: values.isPrivate, token: values.token, @@ -188,7 +192,8 @@ const GitConnectionStep: React.FC< }} validationSchema={Yup.object().shape({ repoBranch: Yup.string().trim().required('Hub Branch name is a required field'), - repoURL: Yup.string().trim().required('Hub Repo name is a required field') + repoURL: Yup.string().trim().required('Hub Repo name is a required field'), + remoteHub: Yup.string().trim().required('Remote Hub name is a required field') })} > {formikProps => { @@ -231,6 +236,22 @@ const GitConnectionStep: React.FC< placeholder={getString('enterHubRepositoryBranch')} /> + Remote Hub} + placeholder={getString('remoteHub')} + items={[ + { label: 'GitHub', value: 'GitHub' }, + { label: 'Bitbucket', value: 'Bitbucket' }, + { label: 'Azure Repo', value: 'Azure Repo' }, + { label: 'GitLab', value: 'GitLab' }, + { label: 'Others', value: 'Others' } + ]} + onChange={item => { + formikProps.setFieldValue('remoteHub', item.value); + }} + /> + {formikProps.values.isPrivate && ( { name: 'Test Hub', isDefault: false, repoURL: '', + remoteHub: '', repoBranch: '', projectID: '', authType: AuthType.SSH, diff --git a/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx b/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx index 298c5ddb26e..19bc0732c47 100644 --- a/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx +++ b/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx @@ -14,8 +14,12 @@ import type { ListChaosHubRequest, ListChaosHubResponse, SyncChaosHubRequest, Sy import CustomTagsPopover from '@components/CustomTagsPopover'; import { useDocumentTitle, useRouteWithBaseUrl } from '@hooks'; import NoFilteredData from '@components/NoFilteredData'; +import GitHub from '@images/Github.svg'; +import Azure from '@images/Azure.svg'; +import Gitlab from '@images/Gitlab.svg'; import enterpriseHubLogo from '../../images/enterpriseHub.svg'; import privateHubLogo from '../../images/privateHub.svg'; +import Bitbucket from '../../images/Bitbucket.svg'; import { AddHubModalProvider } from './AddHubModal'; import css from './ChaosHubs.module.scss'; @@ -48,6 +52,25 @@ function ConnectionStatus({ isConnected }: { isConnected: boolean }): React.Reac ); } +const RemoteHubImage = ({ remoteHubName }: { remoteHubName: string }): React.ReactElement => { + const hubSvg = () => { + switch (remoteHubName) { + case 'GitHub': + return GitHub; + case 'Azure Repo': + return Azure-Repo; + case 'Bitbucket': + return Bitbucket; + case 'GitLab': + return Gitlab; + default: + return Private Hub; + } + }; + + return hubSvg(); +}; + export const ChaosHubsView: React.FC = ({ chaosHubs, loading, @@ -132,7 +155,7 @@ export const ChaosHubsView: React.FC = ({ {chaosHub.isDefault ? ( Enterprise Hub ) : ( - Private Hub + )} + Remote Hub} + placeholder={'Select Remote hub'} + items={[ + { label: 'GitHub', value: 'GitHub' }, + { label: 'Bitbucket', value: 'Bitbucket' }, + { label: 'Azure Repo', value: 'Azure Repo' }, + { label: 'GitLab', value: 'GitLab' }, + { label: 'Others', value: 'Others' } + ]} + onChange={item => { + formikProps.setFieldValue('remoteHub', item.value); + }} + /> + {formikProps.values.isPrivate && (