From 2cd920d6d428bdf3221f6efb15e6ed39d68fdbc5 Mon Sep 17 00:00:00 2001 From: Hrishav Date: Tue, 12 Sep 2023 00:49:40 +0530 Subject: [PATCH 1/6] Added util to update page title and fixed env page loader Signed-off-by: Hrishav --- chaoscenter/web/src/app/App.tsx | 2 +- .../components/ProjectCard/ProjectCard.tsx | 3 +- .../components/SideNav/SideNav.module.scss | 2 +- .../web/src/components/SideNav/SideNav.tsx | 4 +- .../web/src/context/AppStoreContext.tsx | 8 +- .../ProjectSelector/ProjectSelector.tsx | 9 ++- chaoscenter/web/src/hooks/index.ts | 2 + .../web/src/hooks/useDeepCompareEffect.ts | 42 ++++++++++ chaoscenter/web/src/hooks/useDocumentTitle.ts | 59 ++++++++++++++ .../web/src/routes/RouteDefinitions.ts | 7 +- chaoscenter/web/src/strings/strings.en.yaml | 7 +- chaoscenter/web/src/strings/types.ts | 5 +- .../views/AccountSettings/AccountSettings.tsx | 4 +- .../web/src/views/ChaosHubs/ChaosHubs.tsx | 4 +- .../web/src/views/ChaosProbes/ChaosProbes.tsx | 4 +- .../src/views/CreateNewUser/CreateNewUser.tsx | 35 ++++----- .../EnvironmentList/EnvironmentsList.tsx | 77 +++++++++---------- .../ExperimentDashboardV2.tsx | 3 + chaoscenter/web/src/views/Gitops/Gitops.tsx | 15 ++-- .../src/views/ImageRegistry/ImageRegistry.tsx | 4 +- .../web/src/views/Overview/Overview.tsx | 6 +- .../views/ProjectMembers/ProjectMembers.tsx | 4 +- 22 files changed, 217 insertions(+), 89 deletions(-) create mode 100644 chaoscenter/web/src/hooks/useDeepCompareEffect.ts create mode 100644 chaoscenter/web/src/hooks/useDocumentTitle.ts diff --git a/chaoscenter/web/src/app/App.tsx b/chaoscenter/web/src/app/App.tsx index 4dcf9a4ac6a..9567dc76289 100644 --- a/chaoscenter/web/src/app/App.tsx +++ b/chaoscenter/web/src/app/App.tsx @@ -9,7 +9,7 @@ import { AppStoreProvider } from '@context'; export function AppWithAuthentication(): React.ReactElement { return ( - + void 0}> diff --git a/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx b/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx index 902651dcef8..0c4ed74c72e 100644 --- a/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx +++ b/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx @@ -15,7 +15,7 @@ interface ProjectCardProps { export default function ProjectCard({ data }: ProjectCardProps): React.ReactElement { const { getString } = useStrings(); const history = useHistory(); - const { projectID, currentUserInfo } = useAppStore(); + const { projectID, currentUserInfo, updateAppStore } = useAppStore(); const isSelected = projectID === data.projectID; const collaborators = data.members?.map(member => { @@ -27,6 +27,7 @@ export default function ProjectCard({ data }: ProjectCardProps): React.ReactElem const handleProjectSelect = (): void => { const projectRole = data.members?.find(member => member.userID === currentUserInfo?.ID)?.role; + updateAppStore({ projectID: data.projectID, projectName: data.name }); setUserDetails({ projectRole, projectID: data.projectID diff --git a/chaoscenter/web/src/components/SideNav/SideNav.module.scss b/chaoscenter/web/src/components/SideNav/SideNav.module.scss index fbc32e7cf3b..f224dd99cce 100644 --- a/chaoscenter/web/src/components/SideNav/SideNav.module.scss +++ b/chaoscenter/web/src/components/SideNav/SideNav.module.scss @@ -34,7 +34,7 @@ } } - .bottomContainer[data-isRoutePresent='false'] { + .bottomContainer[data-isroutepresent='false'] { border-top: none; } diff --git a/chaoscenter/web/src/components/SideNav/SideNav.tsx b/chaoscenter/web/src/components/SideNav/SideNav.tsx index 075e706dc37..072de0b73c7 100644 --- a/chaoscenter/web/src/components/SideNav/SideNav.tsx +++ b/chaoscenter/web/src/components/SideNav/SideNav.tsx @@ -111,13 +111,13 @@ export default function SideNav(): ReactElement { - + )} - + {!isPathPresent('settings') && (
diff --git a/chaoscenter/web/src/context/AppStoreContext.tsx b/chaoscenter/web/src/context/AppStoreContext.tsx index af55a84cc79..13754c9ddda 100644 --- a/chaoscenter/web/src/context/AppStoreContext.tsx +++ b/chaoscenter/web/src/context/AppStoreContext.tsx @@ -5,13 +5,17 @@ import { getUserDetails } from '../utils/userDetails'; export interface AppStoreContextProps { readonly projectID?: string; + readonly projectName?: string; readonly projectRole?: string; readonly currentUserInfo?: UserInfo; readonly matchPath?: string; readonly renderUrl?: string; - updateAppStore?( + updateAppStore( data: Partial< - Pick + Pick< + AppStoreContextProps, + 'projectID' | 'projectName' | 'projectRole' | 'currentUserInfo' | 'matchPath' | 'renderUrl' + > > ): void; } diff --git a/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx b/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx index 36f6c250ed2..4045f4bacf3 100644 --- a/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx +++ b/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx @@ -2,16 +2,23 @@ import React from 'react'; import { useParams } from 'react-router-dom'; import ProjectSelectorView from '@views/ProjectSelector'; import { useGetProjectQuery } from '@api/auth'; +import { useAppStore } from '@context'; export default function ProjectSelectorController(): React.ReactElement { const { projectID } = useParams<{ projectID: string }>(); + const { updateAppStore } = useAppStore(); const { data: projectData } = useGetProjectQuery( { project_id: projectID }, { - enabled: !!projectID + enabled: !!projectID, + onSuccess: data => { + updateAppStore({ + projectName: data.data?.name + }); + } } ); diff --git a/chaoscenter/web/src/hooks/index.ts b/chaoscenter/web/src/hooks/index.ts index 592805e4e83..f977eddf182 100644 --- a/chaoscenter/web/src/hooks/index.ts +++ b/chaoscenter/web/src/hooks/index.ts @@ -7,3 +7,5 @@ export * from './useRouteDefinitionsMatch'; export * from './useRouteWithBaseUrl'; export * from './useLogout'; export * from './useTrackedRef'; +export * from './useDocumentTitle'; +export * from './useDeepCompareEffect'; diff --git a/chaoscenter/web/src/hooks/useDeepCompareEffect.ts b/chaoscenter/web/src/hooks/useDeepCompareEffect.ts new file mode 100644 index 00000000000..61d95eda522 --- /dev/null +++ b/chaoscenter/web/src/hooks/useDeepCompareEffect.ts @@ -0,0 +1,42 @@ +import React from 'react'; +import { isEqualWith } from 'lodash-es'; + +/** + * Custom version of isEqual to handle function comparison + */ +function isEqual(a: unknown, b: unknown): boolean { + return isEqualWith(a, b, (x: unknown, y: unknown): boolean | undefined => { + // Deal with the function comparison case + if (typeof x === 'function' && typeof y === 'function') { + return x.toString() === y.toString(); + } + + // Fallback on the method + return undefined; + }); +} + +function useDeepCompareMemoize(value: React.DependencyList): React.DependencyList | undefined { + const ref = React.useRef(); + + if (!isEqual(value, ref.current)) { + ref.current = value; + } + + return ref.current; +} + +/** + * Accepts a function that contains imperative, possibly effectful code. + * + * This is the deepCompare version of the `React.useEffect` hooks (that is shallowed compare) + * + * @param effect Imperative function that can return a cleanup function + * @param deps If present, effect will only activate if the values in the list change. + * + * @see https://gist.github.com/kentcdodds/fb8540a05c43faf636dd68647747b074#gistcomment-2830503 + */ +export function useDeepCompareEffect(effect: React.EffectCallback, deps: React.DependencyList): void { + // eslint-disable-next-line react-hooks/exhaustive-deps + React.useEffect(effect, useDeepCompareMemoize(deps)); +} diff --git a/chaoscenter/web/src/hooks/useDocumentTitle.ts b/chaoscenter/web/src/hooks/useDocumentTitle.ts new file mode 100644 index 00000000000..ab66662b8c9 --- /dev/null +++ b/chaoscenter/web/src/hooks/useDocumentTitle.ts @@ -0,0 +1,59 @@ +import { useParams } from 'react-router-dom'; +import { useStrings } from '@strings'; +import { useAppStore } from '@context'; +import { useDeepCompareEffect } from './useDeepCompareEffect'; + +export type Title = string | string[]; + +export interface UseDocumentTitleReturn { + updateTitle: (newTitle: Title) => void; +} + +export function useDocumentTitle(title: Title): UseDocumentTitleReturn { + const { getString } = useStrings(); + const { projectID: projectIdFromParams, accountID } = useParams<{ projectID: string; accountID: string }>(); + const projectIdFromLocalStorage = localStorage.getItem('projectID'); + const { projectName, currentUserInfo } = useAppStore(); + + const getStringFromTitle = (str: Title): string => (Array.isArray(str) ? str.filter(s => s).join(' | ') : str); + + const updateTitle = (newTitle: Title): void => { + const titleArray = [getStringFromTitle(newTitle), getString('litmusChaos')]; + + if (accountID && projectIdFromParams) { + // If you're in project scoped routes, add project name to title from appStore + let projectTitle = ''; + if (projectIdFromParams === projectIdFromLocalStorage) { + projectTitle = projectName || projectIdFromParams; + } else { + projectTitle = projectIdFromParams; + } + + titleArray.splice(1, 0, projectTitle); + } else if (accountID && !projectIdFromParams) { + // If you're in account scoped routes, add account ID to title + let accountTitle = ''; + if (accountID === currentUserInfo?.ID) { + accountTitle = currentUserInfo?.username || accountID; + } else { + accountTitle = accountID; + } + titleArray.splice(1, 0, accountTitle); + } + + document.title = titleArray.filter(s => s).join(' | '); + }; + + useDeepCompareEffect(() => { + updateTitle(title); + + return () => { + // reset title on unmount + document.title = getString('litmusChaos'); + }; + }, [title]); + + return { + updateTitle + }; +} diff --git a/chaoscenter/web/src/routes/RouteDefinitions.ts b/chaoscenter/web/src/routes/RouteDefinitions.ts index a08daa4fa6e..678b51b3fcb 100644 --- a/chaoscenter/web/src/routes/RouteDefinitions.ts +++ b/chaoscenter/web/src/routes/RouteDefinitions.ts @@ -58,12 +58,11 @@ export const paths: UseRouteDefinitionsProps = { toKubernetesChaosInfrastructures: ({ environmentID }) => `/environments/${environmentID}/kubernetes`, toKubernetesChaosInfrastructureDetails: ({ chaosInfrastructureID, environmentID }) => `/environments/${environmentID}/kubernetes/${chaosInfrastructureID}`, - // chaos image registry routes - toImageRegistry: () => `/image-registry`, - toGitops: () => `/gitops`, // Account Scoped Routes toAccountSettingsOverview: () => '/settings/overview', // Project Setup Routes toProjectSetup: () => '/setup', - toProjectMembers: () => '/setup/members' + toProjectMembers: () => '/setup/members', + toImageRegistry: () => `/setup/image-registry`, + toGitops: () => `/setup/gitops` }; diff --git a/chaoscenter/web/src/strings/strings.en.yaml b/chaoscenter/web/src/strings/strings.en.yaml index 80d3f72b9c0..65b5903fdf7 100644 --- a/chaoscenter/web/src/strings/strings.en.yaml +++ b/chaoscenter/web/src/strings/strings.en.yaml @@ -402,6 +402,7 @@ genericResourceNotFoundError: >- {{resource}} [{{resourceID}}] under Project [{{projectID}}] does not exist or has been deleted. gitConnection: Repository Connection +gitOps: GitOps githubRepo: Github Repository gitops: Gitops goBack: Go back to previous page @@ -540,6 +541,7 @@ manually: '| Manually' markRunAsComplete: Mark Run as Complete markRunAsCompleteDescription: This will mark the run as complete and you will no longer be able to re-run. meetsExpectations: The resilience score has met the expectation. +members: Members membersNotAvailableMessage: No active project members available membersNotAvailableTitle: No members present menuItems: @@ -618,6 +620,10 @@ noData: noDataCV: No Data noDataToDisplay: No data to display noDescriptionProvided: No description provided +noEnvironmentFound: No Environments found +noEnvironmentFoundMessage: >- + No Environments found in this project, click on 'New Environment' to add + environments. noExpFound: No Predefined Chaos Experiments found using this Fault. noExperimentFoundMatchingSearch: No experiment found matching your search noExperimentSelected: No experiment selected @@ -1082,7 +1088,6 @@ uploadYaml: Upload Yaml url: URL useIntegerValue: Please enter an integer value useThisTemplate: Use this template -userCreateModalBottomText: By creating user an invitation will be send to the provided email address userCreateSuccessMessage: User '{{name}}' created successfully userCreatedOn: User Created On userManagement: User Management diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts index 8dee232765d..f6819888ed8 100644 --- a/chaoscenter/web/src/strings/types.ts +++ b/chaoscenter/web/src/strings/types.ts @@ -340,6 +340,7 @@ export interface StringsMap { 'generateSSH': unknown 'genericResourceNotFoundError': PrimitiveObject<'resource' | 'resourceID' | 'projectID'> 'gitConnection': unknown + 'gitOps': unknown 'githubRepo': unknown 'gitops': unknown 'goBack': unknown @@ -451,6 +452,7 @@ export interface StringsMap { 'markRunAsComplete': unknown 'markRunAsCompleteDescription': unknown 'meetsExpectations': unknown + 'members': unknown 'membersNotAvailableMessage': unknown 'membersNotAvailableTitle': unknown 'menuItems.deleteHub': unknown @@ -516,6 +518,8 @@ export interface StringsMap { 'noDataCV': unknown 'noDataToDisplay': unknown 'noDescriptionProvided': unknown + 'noEnvironmentFound': unknown + 'noEnvironmentFoundMessage': unknown 'noExpFound': unknown 'noExperimentFoundMatchingSearch': unknown 'noExperimentSelected': unknown @@ -916,7 +920,6 @@ export interface StringsMap { 'url': unknown 'useIntegerValue': unknown 'useThisTemplate': unknown - 'userCreateModalBottomText': unknown 'userCreateSuccessMessage': PrimitiveObject<'name'> 'userCreatedOn': unknown 'userManagement': unknown diff --git a/chaoscenter/web/src/views/AccountSettings/AccountSettings.tsx b/chaoscenter/web/src/views/AccountSettings/AccountSettings.tsx index a7d1a363500..5a41142f4a1 100644 --- a/chaoscenter/web/src/views/AccountSettings/AccountSettings.tsx +++ b/chaoscenter/web/src/views/AccountSettings/AccountSettings.tsx @@ -6,7 +6,7 @@ import cx from 'classnames'; import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query'; import SettingsWrapper from '@components/SettingsWrapper'; import { useStrings } from '@strings'; -import { useSearchParams, useUpdateSearchParams } from '@hooks'; +import { useDocumentTitle, useSearchParams, useUpdateSearchParams } from '@hooks'; import AccountSettingsOverviewController from '@controllers/AccountSettingsOverview'; import AccountSettingsUserManagementController from '@controllers/AccountSettingsUserManagement'; import type { User } from '@api/auth'; @@ -38,6 +38,8 @@ export default function AccountSettingsView(props: AccountSettingsViewProps): Re const [activeTab, setActiveTab] = React.useState('overview'); const { currentUserInfo } = useAppStore(); + useDocumentTitle(getString('settings')); + React.useEffect(() => { if (!selectedTabId) { updateSearchParams({ tab: AccountSettingsTabTypes.OVERVIEW }); diff --git a/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx b/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx index a8912c1a211..298c5ddb26e 100644 --- a/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx +++ b/chaoscenter/web/src/views/ChaosHubs/ChaosHubs.tsx @@ -12,7 +12,7 @@ import DefaultLayoutTemplate from '@components/DefaultLayout'; import type { ChaosHub } from '@api/entities'; import type { ListChaosHubRequest, ListChaosHubResponse, SyncChaosHubRequest, SyncChaosHubResponse } from '@api/core'; import CustomTagsPopover from '@components/CustomTagsPopover'; -import { useRouteWithBaseUrl } from '@hooks'; +import { useDocumentTitle, useRouteWithBaseUrl } from '@hooks'; import NoFilteredData from '@components/NoFilteredData'; import enterpriseHubLogo from '../../images/enterpriseHub.svg'; import privateHubLogo from '../../images/privateHub.svg'; @@ -63,6 +63,8 @@ export const ChaosHubsView: React.FC = ({ const history = useHistory(); const { showWarning } = useToaster(); + useDocumentTitle(getString('chaoshubs')); + const subHeader = ( diff --git a/chaoscenter/web/src/views/ChaosProbes/ChaosProbes.tsx b/chaoscenter/web/src/views/ChaosProbes/ChaosProbes.tsx index fa6aac85d48..dbe76350e23 100644 --- a/chaoscenter/web/src/views/ChaosProbes/ChaosProbes.tsx +++ b/chaoscenter/web/src/views/ChaosProbes/ChaosProbes.tsx @@ -4,7 +4,7 @@ import { Layout } from '@harnessio/uicore'; import { isEmpty } from 'lodash-es'; import { Fallback } from '@errors'; import { useStrings } from '@strings'; -import { useRouteWithBaseUrl } from '@hooks'; +import { useDocumentTitle, useRouteWithBaseUrl } from '@hooks'; import DefaultLayoutTemplate from '@components/DefaultLayout'; import type { ChaosProbesTableProps, RefetchProbes } from '@controllers/ChaosProbes'; import NoFilteredData from '@components/NoFilteredData'; @@ -35,6 +35,8 @@ function ChaosProbesView({ const { getString } = useStrings(); const paths = useRouteWithBaseUrl(); + useDocumentTitle(getString('resilienceProbes')); + const headerTitle = getString('resilienceProbes'); const breadcrumbs = [ diff --git a/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx b/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx index c3acc271a32..290298569bf 100644 --- a/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx +++ b/chaoscenter/web/src/views/CreateNewUser/CreateNewUser.tsx @@ -1,6 +1,6 @@ import type { UseMutateFunction } from '@tanstack/react-query'; import React from 'react'; -import { Color, FontVariation } from '@harnessio/design-system'; +import { FontVariation } from '@harnessio/design-system'; import { Layout, Container, FormInput, ButtonVariation, Text, Button } from '@harnessio/uicore'; import { Formik, Form } from 'formik'; import { Icon } from '@harnessio/icons'; @@ -107,25 +107,20 @@ export default function CreateNewUserView(props: CreateNewUserViewProps): React. label={{getString('confirmPassword')}} /> - - - {getString('userCreateModalBottomText')} - - -
diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts index d8d5ff773d6..fc303f48e44 100644 --- a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts +++ b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts @@ -1,6 +1,6 @@ export interface InviteUserDetails { username: string; - id: string; + userID: string; email: string; name: string; } diff --git a/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss b/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss index b16aa1d3790..4db53539380 100644 --- a/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss +++ b/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss @@ -13,7 +13,7 @@ } .bp3-tab-panel { margin-top: 0 !important; - flex-grow: 1; + height: calc(100% - 59px); } } } diff --git a/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx b/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx index 3b6d8c187ef..bbcbbbc1749 100644 --- a/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx +++ b/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx @@ -26,7 +26,7 @@ export default function AccountSettingsOverviewView(props: AccountSettingsOvervi const [apiTokensCount, setApiTokensCount] = React.useState(0); return ( - + {getString('overview')} diff --git a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx index 1a211dea23a..40369890d16 100644 --- a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx +++ b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx @@ -225,7 +225,7 @@ export default function AccountSettingsUserManagementView( {searchInput} - + = ({ search: `?hubName=${chaosHub.name}&isDefault=${chaosHub.isDefault}` }) } - permission={PermissionGroup.EDITOR} + permission={PermissionGroup.VIEWER} /> {!isDefault && ( diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx index 814562a9997..a10d8ef7121 100644 --- a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx +++ b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx @@ -10,7 +10,7 @@ interface MemberRow { } const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement => { - const { username, id, name } = data; + const { username, userID, name } = data; const { getString } = useStrings(); return ( @@ -20,7 +20,7 @@ const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement => {getString('id')}: - {id} + {userID} diff --git a/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx b/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx index 2e6e22e5e1f..39564e491ed 100644 --- a/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx +++ b/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx @@ -89,6 +89,7 @@ export default function PendingMembersTableView({ setMemberRole(option.label as 'Editor' | 'Owner' | 'Viewer')} From f2b689e2be66e774cf00059bab9975b48f011007 Mon Sep 17 00:00:00 2001 From: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> Date: Wed, 13 Sep 2023 06:23:26 +0100 Subject: [PATCH 4/6] Update the code architecture to Interface model for Environment pkg (#4159) * refactor environment to interface model Signed-off-by: Freedisch * fix lint Signed-off-by: Freedisch * fix environments error chaos_inf Signed-off-by: Freedisch * updated environments_resolver Signed-off-by: Freedisch * updated environments_resolver Signed-off-by: Freedisch * revert-deleted pre-commit/push Signed-off-by: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> --------- Signed-off-by: Freedisch Signed-off-by: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> --- .../server/graph/environment.resolvers.go | 11 +++-- chaoscenter/graphql/server/graph/resolver.go | 8 +++- .../pkg/chaos_infrastructure/service.go | 10 +++-- .../mongodb/environments/operations.go | 37 ++++++++++------ .../server/pkg/environment/handler/handler.go | 43 +++++++++++++------ 5 files changed, 73 insertions(+), 36 deletions(-) diff --git a/chaoscenter/graphql/server/graph/environment.resolvers.go b/chaoscenter/graphql/server/graph/environment.resolvers.go index a3cecaa846f..d9f43ca6ac8 100644 --- a/chaoscenter/graphql/server/graph/environment.resolvers.go +++ b/chaoscenter/graphql/server/graph/environment.resolvers.go @@ -8,7 +8,6 @@ import ( "github.com/litmuschaos/litmus/chaoscenter/graphql/server/graph/model" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/authorization" - "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/environment/handler" "github.com/sirupsen/logrus" ) @@ -23,7 +22,7 @@ func (r *mutationResolver) CreateEnvironment(ctx context.Context, projectID stri if err != nil { return nil, err } - return handler.CreateEnvironment(ctx, projectID, request) + return r.environmentService.CreateEnvironment(ctx, projectID, request) } func (r *mutationResolver) UpdateEnvironment(ctx context.Context, projectID string, request *model.UpdateEnvironmentRequest) (string, error) { @@ -38,7 +37,7 @@ func (r *mutationResolver) UpdateEnvironment(ctx context.Context, projectID stri if err != nil { return "", err } - return handler.UpdateEnvironment(ctx, projectID, request) + return r.environmentService.UpdateEnvironment(ctx, projectID, request) } func (r *mutationResolver) DeleteEnvironment(ctx context.Context, projectID string, environmentID string) (string, error) { @@ -53,7 +52,7 @@ func (r *mutationResolver) DeleteEnvironment(ctx context.Context, projectID stri if err != nil { return "", err } - return handler.DeleteEnvironment(ctx, projectID, environmentID) + return r.environmentService.DeleteEnvironment(ctx, projectID, environmentID) } func (r *queryResolver) GetEnvironment(ctx context.Context, projectID string, environmentID string) (*model.Environment, error) { @@ -68,7 +67,7 @@ func (r *queryResolver) GetEnvironment(ctx context.Context, projectID string, en if err != nil { return nil, err } - return handler.GetEnvironment(projectID, environmentID) + return r.environmentService.GetEnvironment(projectID, environmentID) } func (r *queryResolver) ListEnvironments(ctx context.Context, projectID string, request *model.ListEnvironmentRequest) (*model.ListEnvironmentResponse, error) { @@ -82,5 +81,5 @@ func (r *queryResolver) ListEnvironments(ctx context.Context, projectID string, if err != nil { return nil, err } - return handler.ListEnvironments(projectID, request) + return r.environmentService.ListEnvironments(projectID, request) } diff --git a/chaoscenter/graphql/server/graph/resolver.go b/chaoscenter/graphql/server/graph/resolver.go index e44c7ee378f..3f86279c393 100644 --- a/chaoscenter/graphql/server/graph/resolver.go +++ b/chaoscenter/graphql/server/graph/resolver.go @@ -18,8 +18,10 @@ import ( "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/chaos_experiment_run" dbSchemaChaosHub "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/chaos_hub" dbChaosInfra "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/chaos_infrastructure" + "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/environments" gitops2 "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/gitops" image_registry2 "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/image_registry" + envHandler "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/environment/handler" gitops3 "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/gitops" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/image_registry" ) @@ -37,6 +39,7 @@ type Resolver struct { gitopsService gitops3.Service chaosExperimentHandler handler.ChaosExperimentHandler chaosExperimentRunHandler runHandler.ChaosExperimentRunHandler + environmentService envHandler.EnvironmentHandler } func NewConfig(mongodbOperator mongodb.MongoOperator) generated.Config { @@ -47,14 +50,16 @@ func NewConfig(mongodbOperator mongodb.MongoOperator) generated.Config { chaosExperimentRunOperator := chaos_experiment_run.NewChaosExperimentRunOperator(mongodbOperator) gitopsOperator := gitops2.NewGitOpsOperator(mongodbOperator) imageRegistryOperator := image_registry2.NewImageRegistryOperator(mongodbOperator) + EnvironmentOperator := environments.NewEnvironmentOperator(mongodbOperator) //service chaosHubService := chaoshub.NewService(chaosHubOperator) - chaosInfrastructureService := chaos_infrastructure.NewChaosInfrastructureService(chaosInfraOperator) + chaosInfrastructureService := chaos_infrastructure.NewChaosInfrastructureService(chaosInfraOperator, EnvironmentOperator) chaosExperimentService := chaos_experiment2.NewChaosExperimentService(chaosExperimentOperator, chaosInfraOperator) chaosExperimentRunService := chaos_experiment_run2.NewChaosExperimentRunService(chaosExperimentOperator, chaosInfraOperator, chaosExperimentRunOperator) gitOpsService := gitops3.NewGitOpsService(gitopsOperator, chaosExperimentService, *chaosExperimentOperator) imageRegistryService := image_registry.NewImageRegistryService(imageRegistryOperator) + environmentService := envHandler.NewEnvironmentService(EnvironmentOperator) //handler chaosExperimentHandler := handler.NewChaosExperimentHandler(chaosExperimentService, chaosExperimentRunService, chaosInfrastructureService, gitOpsService, chaosExperimentOperator, chaosExperimentRunOperator, mongodbOperator) @@ -67,6 +72,7 @@ func NewConfig(mongodbOperator mongodb.MongoOperator) generated.Config { chaosExperimentService: chaosExperimentService, choasExperimentRunService: chaosExperimentRunService, imageRegistryService: imageRegistryService, + environmentService: environmentService, gitopsService: gitOpsService, chaosExperimentHandler: *chaosExperimentHandler, chaosExperimentRunHandler: *choasExperimentRunHandler, diff --git a/chaoscenter/graphql/server/pkg/chaos_infrastructure/service.go b/chaoscenter/graphql/server/pkg/chaos_infrastructure/service.go index 4c9039d2046..52ecc7c0874 100644 --- a/chaoscenter/graphql/server/pkg/chaos_infrastructure/service.go +++ b/chaoscenter/graphql/server/pkg/chaos_infrastructure/service.go @@ -14,7 +14,7 @@ import ( "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/authorization" store "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/data-store" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/config" - "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/environments" + dbEnvironments "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/environments" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/k8s" "github.com/sirupsen/logrus" @@ -59,12 +59,14 @@ type Service interface { type infraService struct { infraOperator *dbChaosInfra.Operator + envOperator *dbEnvironments.Operator } // NewChaosInfrastructureService returns a new instance of Service -func NewChaosInfrastructureService(infraOperator *dbChaosInfra.Operator) Service { +func NewChaosInfrastructureService(infraOperator *dbChaosInfra.Operator, envOperator *dbEnvironments.Operator) Service { return &infraService{ infraOperator: infraOperator, + envOperator: envOperator, } } @@ -171,7 +173,7 @@ func (in *infraService) RegisterInfra(c context.Context, projectID string, input {"infra_ids", infraID}, }}, } - err = environments.UpdateEnvironment(context.TODO(), envQuery, update) + err = in.envOperator.UpdateEnvironment(context.TODO(), envQuery, update) if err != nil { return nil, err } @@ -225,7 +227,7 @@ func (in *infraService) DeleteInfra(ctx context.Context, projectID string, infra {"infra_ids", infra.InfraID}, }}, } - err = environments.UpdateEnvironment(context.TODO(), envQuery, updateQuery) + err = in.envOperator.UpdateEnvironment(context.TODO(), envQuery, updateQuery) if err != nil { return "", err } diff --git a/chaoscenter/graphql/server/pkg/database/mongodb/environments/operations.go b/chaoscenter/graphql/server/pkg/database/mongodb/environments/operations.go index 075ebccbe81..6cff68e1451 100644 --- a/chaoscenter/graphql/server/pkg/database/mongodb/environments/operations.go +++ b/chaoscenter/graphql/server/pkg/database/mongodb/environments/operations.go @@ -14,9 +14,20 @@ var ( backgroundContext = context.Background() ) +type Operator struct { + operator mongodb.MongoOperator +} + +// NewEnvironmentOperator retuurns a new instance of operator +func NewEnvironmentOperator(mongodbOperator mongodb.MongoOperator) *Operator { + return &Operator{ + operator: mongodbOperator, + } +} + // InsertEnvironment takes details of a chaos_environment and inserts into the database collection -func InsertEnvironment(ctx context.Context, environment Environment) error { - err := mongodb.Operator.Create(ctx, mongodb.EnvironmentCollection, environment) +func (e *Operator) InsertEnvironment(ctx context.Context, environment Environment) error { + err := e.operator.Create(ctx, mongodb.EnvironmentCollection, environment) if err != nil { return err } @@ -25,12 +36,12 @@ func InsertEnvironment(ctx context.Context, environment Environment) error { } // GetEnvironment takes a environmentID to retrieve the chaos_environment details from the database -func GetEnvironment(query bson.D) (Environment, error) { +func (e *Operator) GetEnvironment(query bson.D) (Environment, error) { ctx, cancel := context.WithTimeout(backgroundContext, 10*time.Second) defer cancel() var environment Environment - result, err := mongodb.Operator.Get(ctx, mongodb.EnvironmentCollection, query) + result, err := e.operator.Get(ctx, mongodb.EnvironmentCollection, query) err = result.Decode(&environment) if err != nil { return Environment{}, err @@ -40,14 +51,14 @@ func GetEnvironment(query bson.D) (Environment, error) { } // GetEnvironmentDetails takes a environmentName and projectID to retrieve the chaos_environment details from the database -func GetEnvironmentDetails(ctx context.Context, environmentID string, projectID string) (Environment, error) { +func (e *Operator) GetEnvironmentDetails(ctx context.Context, environmentID string, projectID string) (Environment, error) { query := bson.D{ {"project_id", projectID}, {"environment_id", environmentID}, } var environment Environment - result, err := mongodb.Operator.Get(ctx, mongodb.EnvironmentCollection, query) + result, err := e.operator.Get(ctx, mongodb.EnvironmentCollection, query) err = result.Decode(&environment) if err != nil { return Environment{}, err @@ -57,8 +68,8 @@ func GetEnvironmentDetails(ctx context.Context, environmentID string, projectID } // UpdateEnvironment takes query and update parameters to update the chaos_environment details in the database -func UpdateEnvironment(ctx context.Context, query bson.D, update bson.D) error { - _, err := mongodb.Operator.UpdateMany(ctx, mongodb.EnvironmentCollection, query, update) +func (e *Operator) UpdateEnvironment(ctx context.Context, query bson.D, update bson.D) error { + _, err := e.operator.UpdateMany(ctx, mongodb.EnvironmentCollection, query, update) if err != nil { return err } @@ -67,7 +78,7 @@ func UpdateEnvironment(ctx context.Context, query bson.D, update bson.D) error { } // GetEnvironmentWithProjectID takes projectID parameters to retrieve the chaos_environment details -func GetEnvironmentWithProjectID(projectID string) ([]*Environment, error) { +func (e *Operator) GetEnvironmentWithProjectID(projectID string) ([]*Environment, error) { var query bson.D query = bson.D{ @@ -93,9 +104,9 @@ func GetEnvironmentWithProjectID(projectID string) ([]*Environment, error) { } // GetEnvironments returns all the environments matching the query -func GetEnvironments(ctx context.Context, query bson.D) ([]Environment, error) { +func (e *Operator) GetEnvironments(ctx context.Context, query bson.D) ([]Environment, error) { var environments []Environment - results, err := mongodb.Operator.List(ctx, mongodb.EnvironmentCollection, query) + results, err := e.operator.List(ctx, mongodb.EnvironmentCollection, query) if err != nil { return []Environment{}, err } @@ -107,11 +118,11 @@ func GetEnvironments(ctx context.Context, query bson.D) ([]Environment, error) { } // GetAggregateEnvironments takes a mongo pipeline to retrieve the details from the database -func GetAggregateEnvironments(pipeline mongo.Pipeline) (*mongo.Cursor, error) { +func (e *Operator) GetAggregateEnvironments(pipeline mongo.Pipeline) (*mongo.Cursor, error) { ctx, cancel := context.WithTimeout(backgroundContext, 10*time.Second) defer cancel() - results, err := mongodb.Operator.Aggregate(ctx, mongodb.EnvironmentCollection, pipeline) + results, err := e.operator.Aggregate(ctx, mongodb.EnvironmentCollection, pipeline) if err != nil { return nil, err } diff --git a/chaoscenter/graphql/server/pkg/environment/handler/handler.go b/chaoscenter/graphql/server/pkg/environment/handler/handler.go index 8918486ba72..ac4d50db7e0 100644 --- a/chaoscenter/graphql/server/pkg/environment/handler/handler.go +++ b/chaoscenter/graphql/server/pkg/environment/handler/handler.go @@ -10,11 +10,30 @@ import ( "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/authorization" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb" "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/environments" + dbOperationsEnvironment "github.com/litmuschaos/litmus/chaoscenter/graphql/server/pkg/database/mongodb/environments" "go.mongodb.org/mongo-driver/bson" "go.mongodb.org/mongo-driver/mongo" ) -func CreateEnvironment(ctx context.Context, projectID string, input *model.CreateEnvironmentRequest) (*model.Environment, error) { +type EnvironmentHandler interface { + CreateEnvironment(ctx context.Context, projectID string, input *model.CreateEnvironmentRequest) (*model.Environment, error) + UpdateEnvironment(ctx context.Context, projectID string, request *model.UpdateEnvironmentRequest) (string, error) + DeleteEnvironment(ctx context.Context, projectID string, environmentID string) (string, error) + GetEnvironment(projectID string, environmentID string) (*model.Environment, error) + ListEnvironments(projectID string, request *model.ListEnvironmentRequest) (*model.ListEnvironmentResponse, error) +} + +type EnvironmentService struct { + EnvironmentOperator *dbOperationsEnvironment.Operator +} + +func NewEnvironmentService(EnvironmentOperator *dbOperationsEnvironment.Operator) EnvironmentHandler { + return &EnvironmentService{ + EnvironmentOperator: EnvironmentOperator, + } +} + +func (e *EnvironmentService) CreateEnvironment(ctx context.Context, projectID string, input *model.CreateEnvironmentRequest) (*model.Environment, error) { currentTime := time.Now() if input.Tags == nil || len(input.Tags) == 0 { @@ -52,7 +71,7 @@ func CreateEnvironment(ctx context.Context, projectID string, input *model.Creat }, } - err = environments.InsertEnvironment(context.Background(), newEnv) + err = e.EnvironmentOperator.InsertEnvironment(context.Background(), newEnv) if err != nil { return &model.Environment{}, err } @@ -68,7 +87,7 @@ func CreateEnvironment(ctx context.Context, projectID string, input *model.Creat } -func UpdateEnvironment(ctx context.Context, projectID string, request *model.UpdateEnvironmentRequest) (string, error) { +func (e *EnvironmentService) UpdateEnvironment(ctx context.Context, projectID string, request *model.UpdateEnvironmentRequest) (string, error) { query := bson.D{ {"environment_id", request.EnvironmentID}, @@ -76,7 +95,7 @@ func UpdateEnvironment(ctx context.Context, projectID string, request *model.Upd {"is_removed", false}, } - _, err := environments.GetEnvironments(context.TODO(), query) + _, err := e.EnvironmentOperator.GetEnvironments(context.TODO(), query) if err != nil { return "couldn't update environment", err } @@ -124,14 +143,14 @@ func UpdateEnvironment(ctx context.Context, projectID string, request *model.Upd }) } - err = environments.UpdateEnvironment(context.TODO(), query, updateQuery) + err = e.EnvironmentOperator.UpdateEnvironment(context.TODO(), query, updateQuery) if err != nil { return "couldn't update environment", err } return "environment updated successfully", nil } -func DeleteEnvironment(ctx context.Context, projectID string, environmentID string) (string, error) { +func (e *EnvironmentService) DeleteEnvironment(ctx context.Context, projectID string, environmentID string) (string, error) { currTime := time.Now().UnixMilli() tkn := ctx.Value(authorization.AuthKey).(string) username, err := authorization.GetUsername(tkn) @@ -144,7 +163,7 @@ func DeleteEnvironment(ctx context.Context, projectID string, environmentID stri {"is_removed", false}, } - _, err = environments.GetEnvironment(query) + _, err = e.EnvironmentOperator.GetEnvironment(query) if err != nil { return "couldn't fetch environment details", err } @@ -156,21 +175,21 @@ func DeleteEnvironment(ctx context.Context, projectID string, environmentID stri {"updated_by", username}, }}, } - err = environments.UpdateEnvironment(context.TODO(), query, update) + err = e.EnvironmentOperator.UpdateEnvironment(context.TODO(), query, update) if err != nil { return "couldn't delete environment", err } return "successfully deleted environment", nil } -func GetEnvironment(projectID string, environmentID string) (*model.Environment, error) { +func (e *EnvironmentService) GetEnvironment(projectID string, environmentID string) (*model.Environment, error) { query := bson.D{ {"environment_id", environmentID}, {"project_id", projectID}, {"is_removed", false}, } - env, err := environments.GetEnvironment(query) + env, err := e.EnvironmentOperator.GetEnvironment(query) if err != nil { return &model.Environment{}, err } @@ -192,7 +211,7 @@ func GetEnvironment(projectID string, environmentID string) (*model.Environment, } -func ListEnvironments(projectID string, request *model.ListEnvironmentRequest) (*model.ListEnvironmentResponse, error) { +func (e *EnvironmentService) ListEnvironments(projectID string, request *model.ListEnvironmentRequest) (*model.ListEnvironmentResponse, error) { var pipeline mongo.Pipeline // Match with identifiers @@ -342,7 +361,7 @@ func ListEnvironments(projectID string, request *model.ListEnvironmentRequest) ( } pipeline = append(pipeline, facetStage) - cursor, err := environments.GetAggregateEnvironments(pipeline) + cursor, err := e.EnvironmentOperator.GetAggregateEnvironments(pipeline) if err != nil { return nil, err } From 9e6936cd78278413e86c3ef5707cffa36cfadfd5 Mon Sep 17 00:00:00 2001 From: Hrishav Date: Wed, 13 Sep 2023 13:25:24 +0530 Subject: [PATCH 5/6] Fixed UI issues found Signed-off-by: Hrishav --- .../web/src/components/SideNav/SideNav.tsx | 17 +++++++++++------ .../src/controllers/InviteNewMembers/types.ts | 2 +- .../AccountSettings/AccountSettings.module.scss | 2 +- .../AccountSettingsOverview.tsx | 2 +- .../AccountSettingsUserManagement.tsx | 2 +- .../web/src/views/ChaosHubMenu/ChaosHubMenu.tsx | 2 +- .../InviteNewMemberListColumns.tsx | 4 ++-- .../ProjectMembers/PendingMembersTable.tsx | 1 + 8 files changed, 19 insertions(+), 13 deletions(-) diff --git a/chaoscenter/web/src/components/SideNav/SideNav.tsx b/chaoscenter/web/src/components/SideNav/SideNav.tsx index 072de0b73c7..1246088f39a 100644 --- a/chaoscenter/web/src/components/SideNav/SideNav.tsx +++ b/chaoscenter/web/src/components/SideNav/SideNav.tsx @@ -9,6 +9,8 @@ import { useLogout, useRouteWithBaseUrl } from '@hooks'; import { useStrings } from '@strings'; import ProjectSelectorController from '@controllers/ProjectSelector'; import NavExpandable from '@components/NavExpandable'; +import { getUserDetails } from '@utils'; +import { PermissionGroup } from '@models'; import css from './SideNav.module.scss'; interface SidebarLinkProps extends NavLinkProps { @@ -59,8 +61,9 @@ export const SIDE_NAV_EXPAND_TIMER = 500; export default function SideNav(): ReactElement { const { getString } = useStrings(); const paths = useRouteWithBaseUrl(); - const accountScopedPaths = useRouteWithBaseUrl('account'); const { forceLogout } = useLogout(); + const { projectRole } = getUserDetails(); + const accountScopedPaths = useRouteWithBaseUrl('account'); const collapseByDefault = false; const [sideNavHovered, setSideNavhovered] = useState(false); const [sideNavExpanded, setSideNavExpanded] = useState(!collapseByDefault); @@ -109,11 +112,13 @@ export default function SideNav(): ReactElement { - - - - - + {projectRole === PermissionGroup.OWNER && ( + + + + + + )} )} diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts index d8d5ff773d6..fc303f48e44 100644 --- a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts +++ b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts @@ -1,6 +1,6 @@ export interface InviteUserDetails { username: string; - id: string; + userID: string; email: string; name: string; } diff --git a/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss b/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss index b16aa1d3790..4db53539380 100644 --- a/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss +++ b/chaoscenter/web/src/views/AccountSettings/AccountSettings.module.scss @@ -13,7 +13,7 @@ } .bp3-tab-panel { margin-top: 0 !important; - flex-grow: 1; + height: calc(100% - 59px); } } } diff --git a/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx b/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx index 3b6d8c187ef..bbcbbbc1749 100644 --- a/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx +++ b/chaoscenter/web/src/views/AccountSettingsOverview/AccountSettingsOverview.tsx @@ -26,7 +26,7 @@ export default function AccountSettingsOverviewView(props: AccountSettingsOvervi const [apiTokensCount, setApiTokensCount] = React.useState(0); return ( - + {getString('overview')} diff --git a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx index 1a211dea23a..40369890d16 100644 --- a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx +++ b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx @@ -225,7 +225,7 @@ export default function AccountSettingsUserManagementView( {searchInput} - + = ({ search: `?hubName=${chaosHub.name}&isDefault=${chaosHub.isDefault}` }) } - permission={PermissionGroup.EDITOR} + permission={PermissionGroup.VIEWER} /> {!isDefault && ( diff --git a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx index 814562a9997..a10d8ef7121 100644 --- a/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx +++ b/chaoscenter/web/src/views/InviteNewMembers/InviteNewMemberListColumns.tsx @@ -10,7 +10,7 @@ interface MemberRow { } const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement => { - const { username, id, name } = data; + const { username, userID, name } = data; const { getString } = useStrings(); return ( @@ -20,7 +20,7 @@ const UserName = ({ row: { original: data } }: MemberRow): React.ReactElement => {getString('id')}: - {id} + {userID} diff --git a/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx b/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx index 2e6e22e5e1f..39564e491ed 100644 --- a/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx +++ b/chaoscenter/web/src/views/ProjectMembers/PendingMembersTable.tsx @@ -89,6 +89,7 @@ export default function PendingMembersTableView({ setMemberRole(option.label as 'Editor' | 'Owner' | 'Viewer')} From 0b71482189ac9eac5957559de86179d46a8b5f01 Mon Sep 17 00:00:00 2001 From: Hrishav Date: Fri, 15 Sep 2023 13:26:05 +0530 Subject: [PATCH 6/6] fix: Fixed account settings overview screen overflow Signed-off-by: Hrishav --- .../SettingsWrapper/SettingsWrapper.tsx | 4 +- .../Environments/EditEnvironment.tsx | 5 +- .../controllers/Environments/Environment.tsx | 11 +- .../KubernetesChaosInfrastructure.tsx | 9 +- chaoscenter/web/src/strings/strings.en.yaml | 5 + chaoscenter/web/src/strings/types.ts | 3 + .../EnvironmentList/CreateEnvironment.tsx | 206 ++++++++---------- .../EnvironmentList/EnvironmentsList.tsx | 37 ++-- .../EnvironmentList/EnvironmentsTableMenu.tsx | 18 +- .../KubernetesChaosInfrastructure.tsx | 46 ++-- ...rnetesChaosInfrastructureCreationModal.tsx | 11 +- ...sInfrastructureStepWizardConfiguration.tsx | 22 +- .../ProjectsJoined/ProjectsJoined.module.scss | 4 +- .../UserCreatedProjects.module.scss | 4 +- .../UserCreatedProjects.tsx | 4 +- 15 files changed, 204 insertions(+), 185 deletions(-) diff --git a/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx b/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx index 9bd37612ab1..8f5ba242793 100644 --- a/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx +++ b/chaoscenter/web/src/components/SettingsWrapper/SettingsWrapper.tsx @@ -45,8 +45,8 @@ export default function SettingsWrapper(props: SettingsWrapperProps): React.Reac void; - isEditOpen: boolean; } export default function EditEnvironmentController({ environmentID, handleClose, - isEditOpen, refetchEnvironments }: EditEnvironmentControllerProps & RefetchEnvironments): React.ReactElement { const { showError, showSuccess } = useToaster(); @@ -36,12 +34,11 @@ export default function EditEnvironmentController({ return ( { const setPage = (newPage: number): void => updateSearchParams({ page: newPage.toString() }); const setLimit = (newLimit: number): void => updateSearchParams({ limit: newLimit.toString() }); - // const resetPage = (): void => { - // page !== 0 && updateSearchParams({ page: '0' }); - // }; - const [isModalOpen, setIsModalOpen] = React.useState(false); const { data: envData, loading: listEnvironmentLoading, - refetch: refetchEnvironments + refetch: refetchEnvironments, + error: listEnvironmentError } = listEnvironment({ projectID: scope.projectID, environmentIDs: [], @@ -73,9 +70,7 @@ const EnvironmentController: React.FC = () => { return ( { - refetch(); + listInfrastructureRefetch(); setPage(0); showSuccess(getString('deleteSuccess')); }, @@ -78,8 +78,6 @@ export default function KubernetesChaosInfrastructureController(): React.ReactEl ); }; - //TODO pass down refetch() to call it in done buttons - return ( - + An environment is the place where you will deploy your cluster for chaos + testing environmentError: It seems there was an error fetching the Environment Details. +environmentNameIsRequired: Environment Name is a required field +environmentType: Environment Type environments: Environments error: Error errorApplyChanges: Error in Applying the Changes. Please enter correct input values. diff --git a/chaoscenter/web/src/strings/types.ts b/chaoscenter/web/src/strings/types.ts index f6819888ed8..bd45af1161b 100644 --- a/chaoscenter/web/src/strings/types.ts +++ b/chaoscenter/web/src/strings/types.ts @@ -275,7 +275,10 @@ export interface StringsMap { 'enterYourPassword': unknown 'enterYourUsername': unknown 'environment': unknown + 'environmentDescription': unknown 'environmentError': unknown + 'environmentNameIsRequired': unknown + 'environmentType': unknown 'environments': unknown 'error': unknown 'errorApplyChanges': unknown diff --git a/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx b/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx index 86e11b43146..4ab1b4c4df5 100644 --- a/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx +++ b/chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonVariation, CardSelect, Container, Dialog, FormInput, Layout, Text } from '@harnessio/uicore'; +import { Button, ButtonVariation, CardSelect, Container, FormInput, Layout, Text } from '@harnessio/uicore'; import { FontVariation, Color } from '@harnessio/design-system'; import { Form, Formik } from 'formik'; import React from 'react'; @@ -25,11 +25,10 @@ interface CreateEnvironmentData { } interface CreateEnvironmentProps { - isOpen: boolean; editable?: boolean; environmentID?: string; existingEnvironment?: Environment; - setIsOpen: React.Dispatch>; + closeModal: () => void; mutation: { createEnvironment?: MutationFunction; updateEnvironment?: MutationFunction; @@ -40,13 +39,12 @@ interface CreateEnvironmentProps { } export default function CreateEnvironment({ - isOpen, editable, - setIsOpen, environmentID, mutation, existingEnvironment, - loading + loading, + closeModal }: CreateEnvironmentProps): React.ReactElement { const { getString } = useStrings(); const scope = getScope(); @@ -69,122 +67,106 @@ export default function CreateEnvironment({ ]; return ( - { - setIsOpen(false); - } - } - isCloseButtonShown - className={css.dialogStylesEnv} - > - - - - initialValues={initialValues} - onSubmit={data => { - !editable - ? mutation.createEnvironment && - mutation - .createEnvironment({ - variables: { - projectID: scope.projectID, - request: { - environmentID: data.id, - name: data.name, - description: data.description, - tags: data.tags, - type: data.type - } - } - }) - .then(() => setIsOpen(false)) - : mutation.updateEnvironment && - environmentID && - mutation.updateEnvironment({ + + + + initialValues={initialValues} + onSubmit={data => { + !editable + ? mutation.createEnvironment && + mutation + .createEnvironment({ variables: { projectID: scope.projectID, request: { - environmentID: environmentID, + environmentID: data.id, name: data.name, description: data.description, tags: data.tags, type: data.type } } - }); - }} - validationSchema={Yup.object().shape({ - name: Yup.string().trim().required('Environment Name is a required field') - })} - > - {formikProps => { - return ( -
- - - {editable ? 'Edit Environment' : 'New Environment'} - - - An environment is the place where you will deploy your cluster for chaos testing - -
- -
- - {/* */} - - - Environment Type - - objective._cardName === formikProps.values.type)} - data={environmentTypes} - onChange={key => { - formikProps.setFieldValue('type', key._cardName); + }) + .then(() => closeModal()) + : mutation.updateEnvironment && + environmentID && + mutation.updateEnvironment({ + variables: { + projectID: scope.projectID, + request: { + environmentID: environmentID, + name: data.name, + description: data.description, + tags: data.tags, + type: data.type + } + } + }); + }} + validationSchema={Yup.object().shape({ + name: Yup.string().trim().required(getString('environmentNameIsRequired')) + })} + > + {formikProps => { + return ( + + + + {editable ? 'Edit Environment' : 'New Environment'} + + + {getString('environmentDescription')} + +
+ ( - - {item.name} - - )} /> - -
+ + + + {getString('environmentType')} + + objective._cardName === formikProps.values.type)} + data={environmentTypes} + onChange={key => { + formikProps.setFieldValue('type', key._cardName); + }} + cornerSelected + className={css.cardContainer} + renderItem={item => ( + + {item.name} + + )} + /> + +