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

JanhaviAlekar · 2024-08-22T10:31:13Z

Proposed changes

Summarize your changes here to communicate with the maintainers and make sure to put the link of that issue

Types of changes

What types of changes does your code introduce to Litmus? Put an x in the boxes that apply

New feature (non-breaking change which adds functionality)
Bugfix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices applies)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

I have read the CONTRIBUTING doc
I have signed the commit for DCO to be passed.
Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if appropriate)
I have added necessary documentation (if appropriate)

Dependency

Please add the links to the dependent PR need to be merged before this (if any).
Added remoteHub field in chaosHub backend #4842

Special notes for your reviewer:

SahilKr24 · 2024-08-28T09:35:31Z

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>


we can update height and width 32px for all svgs or just remove them if not required.

SahilKr24 · 2024-08-28T09:35:51Z

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

+                    { label: 'GitHub', value: 'GitHub' },
+                    { label: 'Bitbucket', value: 'Bitbucket' },
+                    { label: 'Azure Repo', value: 'Azure Repo' },
+                    { label: 'GitLab', value: 'GitLab' },
+                    { label: 'Others', value: 'Others' }


SahilKr24 · 2024-08-28T09:36:39Z

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

+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();
+};
+


instead of switching the img tag we can switch the src directly

we can shift this to utils

SahilKr24 · 2024-08-28T09:40:17Z

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

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


SahilKr24 · 2024-08-28T09:40:30Z

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

 import enterpriseHubLogo from '../../images/enterpriseHub.svg';
 import privateHubLogo from '../../images/privateHub.svg';
+import Bitbucket from '../../images/Bitbucket.svg';


import all from @images

SahilKr24 · 2024-08-28T09:41:29Z

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

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


we can pass isDefault too as a prop and get the correct icon

SahilKr24 · 2024-08-28T09:41:37Z

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

+                  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' }
+                  ]}


Signed-off-by: JanhaviAlekar <[email protected]>

…rontend (litmuschaos#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]> Signed-off-by: dusdjhyeon <[email protected]>

…rontend (litmuschaos#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]> Signed-off-by: sagnik3788 <[email protected]>

namkyu1999 assigned JanhaviAlekar Aug 25, 2024

SahilKr24 requested review from SahilKr24, arkajyotiMukherjee, Saranya-jena and hrishavjha August 28, 2024 09:34

SahilKr24 requested changes Aug 28, 2024

View reviewed changes

JanhaviAlekar added 4 commits September 6, 2024 12:16

added dropdown in add chaoshub modal(AddHubModalWizard)

622b59d

Signed-off-by: JanhaviAlekar <[email protected]>

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

6417604

Signed-off-by: JanhaviAlekar <[email protected]>

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

c2c07c0

Signed-off-by: JanhaviAlekar <[email protected]>

made remoteHub as required field

eafda38

Signed-off-by: JanhaviAlekar <[email protected]>

SahilKr24 force-pushed the chaoshub-remoteHub-option-frontend branch from 910d934 to eafda38 Compare September 6, 2024 06:46

Merge branch 'master' into chaoshub-remoteHub-option-frontend

8505490

JanhaviAlekar requested a review from SahilKr24 September 6, 2024 09:18

SahilKr24 approved these changes Sep 6, 2024

View reviewed changes

amityt approved these changes Sep 6, 2024

View reviewed changes

Saranya-jena merged commit ed7b5a8 into litmuschaos:master Sep 13, 2024
16 of 17 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

JanhaviAlekar commented Aug 22, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

SahilKr24 Aug 28, 2024

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

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

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

Conversation

JanhaviAlekar commented Aug 22, 2024

Proposed changes

Types of changes

Checklist

Dependency

Special notes for your reviewer:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment