Added the remoteHub field (for Git repository name) in the ChaosHub F…

…rontend (#4843) * added dropdown in add chaoshub modal(AddHubModalWizard) Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com> * added svg for list chaoshub in chaoshub page(ChaosHubs.tsx) Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com> * added dropdown list in edit chaoshub modal(EditHubModalWizard.tsx) Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com> * made remoteHub as required field Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com> --------- Signed-off-by: JanhaviAlekar <janhavialekar@gmail.com>
litmuschaos · Sep 13, 2024 · ed7b5a8 · ed7b5a8
1 parent a5b5866
commit ed7b5a8
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git a/chaoscenter/web/src/images/Bitbucket.svg b/chaoscenter/web/src/images/Bitbucket.svg
diff --git a/chaoscenter/web/src/images/Github.svg b/chaoscenter/web/src/images/Github.svg
diff --git a/chaoscenter/web/src/images/Gitlab.svg b/chaoscenter/web/src/images/Gitlab.svg
diff --git 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
@@ -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
@@ -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<StepProps<StepData>> = 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')}
                 />
 
+                <FormInput.DropDown
+                  name="remoteHub"
+                  label={<Text font={{ variation: FontVariation.FORM_LABEL }}>Remote Hub</Text>}
+                  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 && (
                   <RadioButtonGroup
                     name="type"
@@ -350,7 +371,8 @@ export default function AddHubModalWizardView({
     repoBranch: '',
     repoURL: '',
     isPrivate: false,
-    authType: AuthType.NONE
+    authType: AuthType.NONE,
+    remoteHub: ''
   });
 
   return (

diff --git a/chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx b/chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx
@@ -38,6 +38,7 @@ describe('ChaosHubMenuView Tests', () => {
       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
@@ -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 <img src={GitHub} height={27.38} width={29} alt="GitHub" />;
+      case 'Azure Repo':
+        return <img src={Azure} height={27.38} width={29} alt="Azure-Repo" />;
+      case 'Bitbucket':
+        return <img src={Bitbucket} height={27.38} width={29} alt="Bitbucket" />;
+      case 'GitLab':
+        return <img src={Gitlab} height={27.38} width={29} alt="Gitlab" />;
+      default:
+        return <img src={privateHubLogo} height={27.38} width={29} alt="Private Hub" />;
+    }
+  };
+
+  return hubSvg();
+};
+
 export const ChaosHubsView: React.FC<ChaosHubParams> = ({
   chaosHubs,
   loading,
@@ -132,7 +155,7 @@ export const ChaosHubsView: React.FC<ChaosHubParams> = ({
                       {chaosHub.isDefault ? (
                         <img src={enterpriseHubLogo} height={26.85} width={29} alt="Enterprise Hub" />
                       ) : (
-                        <img src={privateHubLogo} height={27.38} width={29} alt="Private Hub" />
+                        <RemoteHubImage remoteHubName={chaosHub.remoteHub} />
                       )}
                       <Text
                         font={{ size: 'medium', weight: 'semi-bold' }}

diff --git a/chaoscenter/web/src/views/EditHubModalWizard/EditHubModalWizard.tsx b/chaoscenter/web/src/views/EditHubModalWizard/EditHubModalWizard.tsx
@@ -48,6 +48,7 @@ interface EditHubFormData {
   description?: string;
   tags: string[];
   repoBranch: string;
+  remoteHub: string;
   isPrivate: boolean;
   authType: AuthType;
   sshPublicKey?: string;
@@ -150,6 +151,7 @@ const GitConnectionStep: React.FC<
           setFormData({
             ...formData,
             repoBranch: values.repoBranch,
+            remoteHub: values.remoteHub,
             isPrivate: values.isPrivate,
             repoURL: values.repoURL,
             authType: values.authType,
@@ -164,6 +166,7 @@ const GitConnectionStep: React.FC<
                 id: formData.hubId,
                 name: formData.name,
                 repoBranch: values.repoBranch,
+                remoteHub: values.remoteHub,
                 description: formData.description,
                 tags: formData.tags,
                 repoURL: values.repoURL,
@@ -229,6 +232,22 @@ const GitConnectionStep: React.FC<
                   placeholder={getString('enterHubRepositoryBranch')}
                 />
 
+                <FormInput.DropDown
+                  name="remoteHub"
+                  label={<Text font={{ variation: FontVariation.FORM_LABEL }}>Remote Hub</Text>}
+                  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 && (
                   <RadioButtonGroup
                     name="type"
@@ -343,6 +362,7 @@ export default function EditHubModalWizardView({
     description: hubDetails?.description,
     tags: hubDetails?.tags ?? [],
     repoBranch: hubDetails?.repoBranch ?? '',
+    remoteHub: hubDetails?.remoteHub ?? '',
     isPrivate: hubDetails?.isPrivate ?? false,
     authType: hubDetails?.authType ?? AuthType.NONE,
     repoURL: hubDetails?.repoURL ?? '',