Added the remoteHub field (for Git repository name) in the ChaosHub Frontend (#4843)

JanhaviAlekar · web-flow · commit ed7b5a8463cd · 2024-09-13T11:53:53.000+05:30
* added dropdown in add chaoshub modal(AddHubModalWizard)

Signed-off-by: JanhaviAlekar &lt;janhavialekar@gmail.com&gt;

* added svg for list chaoshub in chaoshub page(ChaosHubs.tsx)

Signed-off-by: JanhaviAlekar &lt;janhavialekar@gmail.com&gt;

* added dropdown list in edit chaoshub modal(EditHubModalWizard.tsx)

Signed-off-by: JanhaviAlekar &lt;janhavialekar@gmail.com&gt;

* made remoteHub as required field

Signed-off-by: JanhaviAlekar &lt;janhavialekar@gmail.com&gt;

---------

Signed-off-by: JanhaviAlekar &lt;janhavialekar@gmail.com&gt;
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
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="url(#azure-devops-color-16__paint0_linear_707_116)" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/><defs><linearGradient id="azure-devops-color-16__paint0_linear_707_116" x1="8" x2="8" y1="14.956" y2="1.026" gradientUnits="userSpaceOnUse"><stop stop-color="#0078D4"/><stop offset=".16" stop-color="#1380DA"/><stop offset=".53" stop-color="#3C91E5"/><stop offset=".82" stop-color="#559CEC"/><stop offset="1" stop-color="#5EA0EF"/></linearGradient></defs></svg>
diff --git a/chaoscenter/web/src/images/Bitbucket.svg b/chaoscenter/web/src/images/Bitbucket.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#2684FF" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/><path fill="url(#bitbucket-color-16__paint0_linear_707_135)" d="M14.122 6.033H10.1l-.67 3.931H6.604L3.317 13.86c.105.09.238.139.376.14h8.766a.43.43 0 00.425-.36l1.238-7.607z"/><defs><linearGradient id="bitbucket-color-16__paint0_linear_707_135" x1="11.544" x2="6.918" y1="4.676" y2="11.282" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#0052CC"/><stop offset="1" stop-color="#2684FF"/></linearGradient></defs></svg>
diff --git a/chaoscenter/web/src/images/Github.svg b/chaoscenter/web/src/images/Github.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z" />
+</svg>
diff --git a/chaoscenter/web/src/images/Gitlab.svg b/chaoscenter/web/src/images/Gitlab.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>logo-square</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="logo-square" sketch:type="MSArtboardGroup">
+            <g id="logo-no-bg" sketch:type="MSLayerGroup" transform="translate(2.000000, 19.000000)">
+                <g id="Page-1" sketch:type="MSShapeGroup">
+                    <g id="gitlab_logo">
+                        <g id="g10" transform="translate(248.000000, 228.833300) scale(1, -1) translate(-248.000000, -228.833300) translate(0.000000, 0.333300)">
+                            <g id="g16">
+                                <g id="g18-Clipped">
+                                    <g id="g18">
+                                        <g>
+                                            <g id="Group" transform="translate(0.666658, 0.666658)">
+                                                <g id="g44" transform="translate(0.532000, 0.774933)" fill="#FC6D26">
+                                                    <path d="M491.999988,194.666662 L464.441322,279.481326 L409.82399,447.578655 C407.014656,456.226655 394.778657,456.226655 391.96799,447.578655 L337.349325,279.481326 L155.982663,279.481326 L101.362664,447.578655 C98.5533309,456.226655 86.3173312,456.226655 83.5066646,447.578655 L28.8893326,279.481326 L1.33199997,194.666662 C-1.18266664,186.930662 1.57199996,178.455996 8.1519998,173.674662 L246.665327,0.385333324 L485.179988,173.674662 C491.759988,178.455996 494.513321,186.930662 491.999988,194.666662" id="path46"></path>
+                                                </g>
+                                                <g id="g48" transform="translate(156.197863, 1.160267)" fill="#E24329">
+                                                    <path d="M90.9999977,0 L90.9999977,0 L181.683995,279.095993 L0.31599997,279.095993 L90.9999977,0 L90.9999977,0 Z" id="path50"></path>
+                                                </g>
+                                                <g id="g56" transform="translate(28.531199, 1.160800)" fill="#FC6D26">
+                                                    <path d="M218.666661,0 L127.982663,279.09466 L0.890666644,279.09466 L218.666661,0 L218.666661,0 Z" id="path58"></path>
+                                                </g>
+                                                <g id="g64" transform="translate(0.088533, 0.255867)" fill="#FCA326">
+                                                    <path d="M29.3333326,279.999993 L29.3333326,279.999993 L1.77466662,195.185328 C-0.738666648,187.449329 2.01466662,178.974662 8.59599979,174.194662 L247.109327,0.905333311 L29.3333326,279.999993 L29.3333326,279.999993 Z" id="path66"></path>
+                                                </g>
+                                                <g id="g72" transform="translate(29.421866, 280.255593)" fill="#E24329">
+                                                    <path d="M0,0 L127.091997,0 L72.4733315,168.097329 C69.6626649,176.746662 57.4266652,176.746662 54.617332,168.097329 L0,0 L0,0 Z" id="path74"></path>
+                                                </g>
+                                                <g id="g76" transform="translate(247.197860, 1.160800)" fill="#FC6D26">
+                                                    <path d="M0,0 L90.6839977,279.09466 L217.775995,279.09466 L0,0 L0,0 Z" id="path78"></path>
+                                                </g>
+                                                <g id="g80" transform="translate(246.307061, 0.255867)" fill="#FCA326">
+                                                    <path d="M218.666661,279.999993 L218.666661,279.999993 L246.225327,195.185328 C248.73866,187.449329 245.985327,178.974662 239.403994,174.194662 L0.890666644,0.905333311 L218.666661,279.999993 L218.666661,279.999993 Z" id="path82"></path>
+                                                </g>
+                                                <g id="g84" transform="translate(336.973725, 280.255593)" fill="#E24329">
+                                                    <path d="M127.999997,0 L0.907999977,0 L55.5266653,168.097329 C58.3373319,176.746662 70.5733316,176.746662 73.3826648,168.097329 L127.999997,0 L127.999997,0 Z" id="path86"></path>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</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 ?? '',
