Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Sep 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
622b59d
added dropdown in add chaoshub modal(AddHubModalWizard)
JanhaviAlekar Aug 21, 2024
6417604
added svg for list chaoshub in chaoshub page(ChaosHubs.tsx)
JanhaviAlekar Aug 21, 2024
c2c07c0
added dropdown list in edit chaoshub modal(EditHubModalWizard.tsx)
JanhaviAlekar Aug 21, 2024
eafda38
made remoteHub as required field
JanhaviAlekar Aug 22, 2024
8505490
Merge branch 'master' into chaoshub-remoteHub-option-frontend
JanhaviAlekar Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions chaoscenter/web/src/api/core/chaoshubs/addChaosHub.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface CreateChaosHubRequest {
description?: string;
repoURL: string;
repoBranch: string;
remoteHub: string;
isPrivate: boolean;
authType: AuthType;
token?: string;
Expand Down Expand Up @@ -36,6 +37,7 @@ export function addChaosHub(
name
repoURL
repoBranch
remoteHub
hubType
isPrivate
}
Expand Down
1 change: 1 addition & 0 deletions chaoscenter/web/src/api/core/chaoshubs/listChaosHub.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export function listChaosHub({
id
repoURL
repoBranch
remoteHub
authType
isAvailable
totalFaults
Expand Down
2 changes: 2 additions & 0 deletions chaoscenter/web/src/api/core/chaoshubs/updateChaosHub.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface EditChaosHubRequest {
tags: string[];
description?: string;
repoURL: string;
remoteHub: string;
repoBranch: string;
isPrivate: boolean;
authType: AuthType;
Expand Down Expand Up @@ -37,6 +38,7 @@ export function updateChaosHub(
name
repoURL
repoBranch
remoteHub
}
}
`,
Expand Down
1 change: 1 addition & 0 deletions chaoscenter/web/src/api/entities/chaoshub.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface ChaosHub extends Audit, ResourceDetails {
id: string;
repoURL: string;
repoBranch: string;
remoteHub: string;
projectID: string;
name: string;
tags?: [string];
Expand Down
2 changes: 2 additions & 0 deletions chaoscenter/web/src/images/Azure.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions chaoscenter/web/src/images/Bitbucket.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions chaoscenter/web/src/images/Github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions chaoscenter/web/src/images/Gitlab.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions chaoscenter/web/src/strings/strings.en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions chaoscenter/web/src/strings/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,7 @@ export interface StringsMap {
'registry': unknown
'registryName': unknown
'registryType': unknown
'remoteHub': unknown
'remoteRepo': unknown
'remove': unknown
'removeMember': unknown
Expand Down
28 changes: 25 additions & 3 deletions chaoscenter/web/src/views/AddHubModalWizard/AddHubModalWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ interface AddHubFormData {
sshPublicKey?: string;
sshPrivateKey?: string;
token?: string;
remoteHub: string;
}
interface StepData {
value?: AddHubFormData;
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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 => {
Expand Down Expand Up @@ -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>}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

strings

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' }
Comment on lines +244 to +248
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

strings

]}
onChange={item => {
formikProps.setFieldValue('remoteHub', item.value);
}}
/>

{formikProps.values.isPrivate && (
<RadioButtonGroup
name="type"
Expand Down Expand Up @@ -350,7 +371,8 @@ export default function AddHubModalWizardView({
repoBranch: '',
repoURL: '',
isPrivate: false,
authType: AuthType.NONE
authType: AuthType.NONE,
remoteHub: ''
});

return (
Expand Down
1 change: 1 addition & 0 deletions chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ describe('ChaosHubMenuView Tests', () => {
name: 'Test Hub',
isDefault: false,
repoURL: '',
remoteHub: '',
repoBranch: '',
projectID: '',
authType: AuthType.SSH,
Expand Down
25 changes: 24 additions & 1 deletion chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Comment on lines 20 to +22
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import all from @images

import { AddHubModalProvider } from './AddHubModal';
import css from './ChaosHubs.module.scss';

Expand Down Expand Up @@ -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();
};

Comment on lines +55 to +73
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can shift this to utils

export const ChaosHubsView: React.FC<ChaosHubParams> = ({
chaosHubs,
loading,
Expand Down Expand Up @@ -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} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

)}
<Text
font={{ size: 'medium', weight: 'semi-bold' }}
Expand Down
20 changes: 20 additions & 0 deletions chaoscenter/web/src/views/EditHubModalWizard/EditHubModalWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ interface EditHubFormData {
description?: string;
tags: string[];
repoBranch: string;
remoteHub: string;
isPrivate: boolean;
authType: AuthType;
sshPublicKey?: string;
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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' }
]}
Comment on lines +237 to +245
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

strings

onChange={item => {
formikProps.setFieldValue('remoteHub', item.value);
}}
/>

{formikProps.values.isPrivate && (
<RadioButtonGroup
name="type"
Expand Down Expand Up @@ -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 ?? '',
Expand Down
Loading