From a023a0f8a96cc346baabf06513af7fd5c7effc3f Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Tue, 20 Dec 2022 01:51:15 +0500 Subject: [PATCH 1/7] fixed selected project rendering issue on login --- src/ui/layouts/Home.tsx | 42 ++++++++++++------- .../AuthenticatedHeader.tsx | 11 +++-- src/ui/layouts/session/Login/index.tsx | 15 +++++-- src/ui/layouts/session/Login/useService.ts | 23 +++++++--- 4 files changed, 63 insertions(+), 28 deletions(-) diff --git a/src/ui/layouts/Home.tsx b/src/ui/layouts/Home.tsx index 614c4112d..369d45904 100644 --- a/src/ui/layouts/Home.tsx +++ b/src/ui/layouts/Home.tsx @@ -109,7 +109,7 @@ export const Home: React.FC = () => { if (authToken) { const getDashboardData = async () => { setFetching(true); - startLoad(); + // startLoad(); try { const { data } = await axios.get( @@ -119,21 +119,31 @@ export const Home: React.FC = () => { { headers: { Authorization: `bearer ${authToken}` } }, ); - await dispatch( - projectsActions.getSelectedProject({ - allProjects: projects, - seletecdProject: selectedProject - ? selectedProject - : DEFAULT_PROJECT_NAME, - }), - ); - await dispatch( - pipelinesActions.getMy({ - project: selectedProject ? selectedProject : DEFAULT_PROJECT_NAME, - onSuccess: () => stopLoad(), - onFailure: () => stopLoad(), - }), - ); + // await dispatch( + // projectsActions.getMy({ + // selectDefault: false, + // selectedProject: selectedProject, + // onSuccess: () => stopLoad(), + // onFailure: () => stopLoad(), + // }), + // ); + + // await dispatch( + // projectsActions.getSelectedProject({ + // allProjects: projects, + // seletecdProject: selectedProject + // ? selectedProject + // : DEFAULT_PROJECT_NAME, + // }), + // ); + + // await dispatch( + // pipelinesActions.getMy({ + // project: selectedProject ? selectedProject : DEFAULT_PROJECT_NAME, + // onSuccess: () => stopLoad(), + // onFailure: () => stopLoad(), + // }), + // ); setDashboardData(data); setFetching(false); diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx index d76523712..b2174abd1 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx @@ -74,16 +74,16 @@ export const AuthenticatedHeader: React.FC<{ }, [history]); useEffect(() => { + // debugger; if (locationPath.includes('projects')) { - const selectedProject = locationPath.split('/')[2]; + const projectFromUrl = locationPath.split('/')[2]; dispatch( projectsActions.getMy({ selectDefault: false, - selectedProject, + selectedProject: projectFromUrl ? projectFromUrl : selectedProject, }), ); } - // debugger; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!user) return null; @@ -148,6 +148,11 @@ export const AuthenticatedHeader: React.FC<{ {!window.location.href?.includes('settings') && ( <> + {console.log( + selectedProject, + DEFAULT_PROJECT_NAME, + 'locationPath', + )} + dispatch( + projectsActions.getMy({ + selectDefault: false, + selectedProject, + }), + ) + } onChange={(e: any) => onChange(e)} defaultValue={ selectedProject ? selectedProject : DEFAULT_PROJECT_NAME diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx index bc78c4082..c2fe4d20a 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx @@ -1,7 +1,7 @@ /* eslint-disable */ import React, { useState } from 'react'; import cn from 'classnames'; -import styles from './index.module.scss' +import styles from './index.module.scss'; import { toasterTypes } from '../../../../../constants'; import { showToasterAction } from '../../../../../redux/actions'; import { @@ -13,11 +13,26 @@ import { GhostButton, PrimaryButton, } from '../../../../components'; -import { useSelector, useDispatch } from '../../../../hooks'; +import { + useSelector, + useDispatch, + useHistory, + usePushRoute, +} from '../../../../hooks'; import { Popup } from '../../../common/Popup'; -import { projectsActions, pipelinesActions, pipelinePagesActions, runPagesActions, stackPagesActions } from '../../../../../redux/actions'; -import { sessionSelectors, projectSelectors } from '../../../../../redux/selectors'; +import { + projectsActions, + pipelinesActions, + pipelinePagesActions, + runPagesActions, + stackPagesActions, +} from '../../../../../redux/actions'; +import { + sessionSelectors, + projectSelectors, +} from '../../../../../redux/selectors'; import axios from 'axios'; +import { routePaths } from '../../../../../routes/routePaths'; export const ProjectPopup: React.FC<{ setPopupOpen: (attr: boolean) => void; @@ -25,53 +40,69 @@ export const ProjectPopup: React.FC<{ const [submitting, setSubmitting] = useState(false); const [name, setName] = useState(''); const [description, setDescription] = useState(''); - + + const { push } = usePushRoute(); + const history = useHistory(); const dispatch = useDispatch(); const authToken = useSelector(sessionSelectors.authenticationToken); const projects = useSelector(projectSelectors.myProjects); const startLoad = () => { - dispatch(pipelinePagesActions.setFetching({ fetching: true })) + dispatch(pipelinePagesActions.setFetching({ fetching: true })); dispatch(runPagesActions.setFetching({ fetching: true })); dispatch(stackPagesActions.setFetching({ fetching: true })); - } + }; const stopLoad = () => { - dispatch(pipelinePagesActions.setFetching({ fetching: false })) - dispatch(runPagesActions.setFetching({ fetching: false })) - dispatch(stackPagesActions.setFetching({ fetching: false })); - } + dispatch(pipelinePagesActions.setFetching({ fetching: false })); + dispatch(runPagesActions.setFetching({ fetching: false })); + dispatch(stackPagesActions.setFetching({ fetching: false })); + }; const handleCreateProject = async () => { - setSubmitting(true); - await axios.post(`${process.env.REACT_APP_BASE_API_URL}/projects`, { name, description }, { headers: { Authorization: `Bearer ${authToken}` }}) - .then(async () => { - - startLoad() - await dispatch(projectsActions.getSelectedProject({ - allProjects: projects, - seletecdProject: name, - })) - await dispatch(projectsActions.getMy({ selectDefault: false })); - await dispatch(pipelinesActions.getMy({ project: name, - onSuccess: () => stopLoad(), - onFailure: () => stopLoad(), - })) - - setSubmitting(false); - setPopupOpen(false) - }).catch(async (err) => { - await dispatch( - showToasterAction({ - description: err?.response?.data?.detail, - type: toasterTypes.failure, - }), - ); - setSubmitting(false); - setPopupOpen(false) - }); - } - + setSubmitting(true); + await axios + .post( + `${process.env.REACT_APP_BASE_API_URL}/projects`, + { name, description }, + { headers: { Authorization: `Bearer ${authToken}` } }, + ) + .then(async () => { + startLoad(); + await dispatch( + projectsActions.getSelectedProject({ + allProjects: projects, + seletecdProject: name, + }), + ); + await dispatch( + projectsActions.getMy({ + selectDefault: false, + selectedProject: name, + }), + ); + // await dispatch( + // pipelinesActions.getMy({ + // project: name, + // onSuccess: () => stopLoad(), + // onFailure: () => stopLoad(), + // }), + // ); + push(routePaths.home(name)); + setSubmitting(false); + setPopupOpen(false); + }) + .catch(async (err) => { + await dispatch( + showToasterAction({ + description: err?.response?.data?.detail, + type: toasterTypes.failure, + }), + ); + setSubmitting(false); + setPopupOpen(false); + }); + }; return ( -

Create a project

+

+ Create a project +

- + - + setName(val)} error={{ hasError: false, text: '', }} - type='textarea' + type="textarea" /> - - - - - - + + + + + + - - + + @@ -125,12 +160,12 @@ export const ProjectPopup: React.FC<{ disabled={name === '' || submitting} loading={submitting} onClick={handleCreateProject} - >Create + > + Create - ); -}; \ No newline at end of file +}; From 8564662463631ccde592b94b489176ae099c184c Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Tue, 20 Dec 2022 19:22:17 +0500 Subject: [PATCH 6/7] fixed warnings --- src/routes/utils/replaceRouteIfNeeded.ts | 83 +------------------ .../AuthenticatedHeader.tsx | 6 +- .../AuthenticatedSidebar/Menu/MenuItem.tsx | 4 +- .../AuthenticatedSidebar/Menu/index.tsx | 2 +- .../AuthenticatedSidebar/SideFooter/index.tsx | 12 +-- .../SideHeader/MenuItem.tsx | 6 +- src/ui/layouts/session/UserEmail/index.tsx | 6 +- 7 files changed, 17 insertions(+), 102 deletions(-) diff --git a/src/routes/utils/replaceRouteIfNeeded.ts b/src/routes/utils/replaceRouteIfNeeded.ts index 25a1c258e..f7aa4b471 100644 --- a/src/routes/utils/replaceRouteIfNeeded.ts +++ b/src/routes/utils/replaceRouteIfNeeded.ts @@ -1,87 +1,8 @@ -// import { RouteVisibilityAuthentication } from '../RouteVisibility'; -// import { loggedOutRoute, loggedInRoute } from '../../constants'; - -// const isUnauthenticatedOrMissingRoute = ( -// currentLocation: any | undefined, -// ): boolean => -// currentLocation -// ? currentLocation.visibility && -// currentLocation.visibility.authentication === -// RouteVisibilityAuthentication.unauthenticatedOnly -// : false; - -// const isAuthenticatedOrMissingRoute = ( -// currentLocation: any | undefined, -// ): boolean => -// currentLocation -// ? currentLocation.visibility && -// currentLocation.visibility.authentication === -// RouteVisibilityAuthentication.authenticatedOnly -// : false; - -// let timeout = null as any; - -// export const replaceRouteIfNeeded = ({ -// user, -// isAuthenticated, -// currentLocation, -// replaceRoute, -// routeFromSearchParam, -// }: { -// user: any; -// isAuthenticated: any; -// currentLocation: any | undefined; -// replaceRoute: (arg1: string) => void; -// routeFromSearchParam: null | string; -// }): void => { -// clearTimeout(timeout); - -// const routeToReplace = () => { -// return isAuthenticated ? loggedInRoute : loggedOutRoute; -// }; -// const replaceToLoggedInRoute = -// isAuthenticated && isUnauthenticatedOrMissingRoute(currentLocation); - -// const replaceToLoggedOutRoute = -// !isAuthenticated && isAuthenticatedOrMissingRoute(currentLocation); - -// const replaceToLoggedInRouteForEmailOptedIn = -// isAuthenticated && -// user?.emailOptedIn === null && -// currentLocation?.path !== `/user-email`; -// const shouldReplaceRoute = -// replaceToLoggedInRoute || -// replaceToLoggedOutRoute || -// replaceToLoggedInRouteForEmailOptedIn; - -// if (shouldReplaceRoute) { -// timeout = setTimeout(() => { -// let route = routeToReplace(); -// if (user?.emailOptedIn === null) { -// route = `/user-email`; -// } -// console.log(currentLocation, 'currentLocation', routeFromSearchParam); - -// if (replaceToLoggedOutRoute && currentLocation) { -// route = `${route}?route=${currentLocation.path}`; -// } else if (replaceToLoggedInRoute && routeFromSearchParam) { -// route = routeFromSearchParam; -// } - -// replaceRoute(route); -// }, 0); -// } -// }; - import { RouteInterface, RouteVisibilityAuthentication, } from '../RouteVisibility'; -import { - loggedOutRoute, - loggedInRoute, - DEFAULT_PROJECT_NAME, -} from '../../constants'; +import { loggedOutRoute, DEFAULT_PROJECT_NAME } from '../../constants'; import { routePaths } from '../routePaths'; const isUnauthenticatedOrMissingRoute = ( @@ -122,7 +43,7 @@ export const replaceRouteIfNeeded = ({ clearTimeout(timeout); const routeToReplace = () => { - const url = window.location.search; + // const url = window.location.search; const logRoute = user?.emailOptedIn === null ? `/user-email` diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx index c3cdbbaa6..01217882b 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx @@ -1,4 +1,4 @@ -import React, { Key, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { FlexBox, @@ -42,7 +42,7 @@ import cn from 'classnames'; import css from './../../../../../ui/components/inputs/index.module.scss'; import { ProjectPopup } from './ProjectPopup'; import CookieConsent from 'react-cookie-consent'; -import { endpoints } from '../../../../../api/endpoints'; +// import { endpoints } from '../../../../../api/endpoints'; export const AuthenticatedHeader: React.FC<{ setMobileMenuOpen: (val: boolean) => void; @@ -79,7 +79,7 @@ export const AuthenticatedHeader: React.FC<{ if (locationPath.includes('projects')) { const projectFromUrl = locationPath.split('/')[2]; - if (selectedProject != projectFromUrl && user) { + if (selectedProject !== projectFromUrl && user) { push(routePaths.home(projectFromUrl)); } diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx index 9dccef7a2..6abfdd005 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx @@ -5,8 +5,6 @@ import cn from 'classnames'; import styles from './MenuItem.module.scss'; import { camelCaseToParagraph } from '../../../../../../../utils'; // import { DEFAULT_PROJECT_NAME } from '../../../../../../../constants'; -import { useSelector } from '../../../../../../hooks'; -import { projectSelectors } from '../../../../../../../redux/selectors'; export const MenuItem: React.FC<{ innerItem?: boolean; @@ -24,7 +22,7 @@ export const MenuItem: React.FC<{ // const url = new URL(url_string); // const projectName = url.searchParams.get('project'); - const selectedProject = useSelector(projectSelectors.selectedProject); + // const selectedProject = useSelector(projectSelectors.selectedProject); console.log(location, 'test111'); return ( { const locationPath = useLocationPath(); diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx index e21b6e49f..f17313762 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx @@ -3,11 +3,7 @@ import { MenuItem } from '../Menu/MenuItem'; import { MenuItemExternal } from './MenuItemExternal'; import { routePaths } from '../../../../../../../routes/routePaths'; import { Box, Separator, icons, Paragraph } from '../../../../../../components'; -import { - iconSizes, - iconColors, - DEFAULT_PROJECT_NAME, -} from '../../../../../../../constants'; +import { iconSizes, iconColors } from '../../../../../../../constants'; import { translate } from '../translate'; import { sessionSelectors } from '../../../../../../../redux/selectors/session'; import { useSelector } from '../../../../../../hooks'; @@ -35,9 +31,9 @@ export const SideFooter: React.FC = () => { } }, [authToken]); - const url_string = window.location.href; - const url = new URL(url_string); - const projectName = url.searchParams.get('project'); + // const url_string = window.location.href; + // const url = new URL(url_string); + // const projectName = url.searchParams.get('project'); return ( <> diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/MenuItem.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/MenuItem.tsx index da8a0543a..3eca158da 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/MenuItem.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/MenuItem.tsx @@ -5,8 +5,8 @@ import cn from 'classnames'; import styles from './MenuItem.module.scss'; import { camelCaseToParagraph } from '../../../../../../../utils'; // import { DEFAULT_PROJECT_NAME } from '../../../../../../../constants'; -import { useSelector } from '../../../../../../hooks'; -import { projectSelectors } from '../../../../../../../redux/selectors'; +// import { useSelector } from '../../../../../../hooks'; +// import { projectSelectors } from '../../../../../../../redux/selectors'; // const url_string = window.location.href; // const url = new URL(url_string); @@ -21,7 +21,7 @@ export const MenuItem: React.FC<{ Icon: React.ComponentType; isActive?: ({ match, location }: { match: any; location: any }) => boolean; }> = ({ text, to, exact = false, Icon, isActive, subItem }) => { - const selectedProject = useSelector(projectSelectors.selectedProject); + // const selectedProject = useSelector(projectSelectors.selectedProject); let location = useLocation(); return ( { const translate = getTranslateByScope('ui.layouts.UserEmail'); - const { push } = usePushRoute(); + // const { push } = usePushRoute(); const dispatch = useDispatch(); const authToken = useSelector(sessionSelectors.authenticationToken); From 010d768e63e4688e975e5178db57451a4ba9b91a Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Tue, 20 Dec 2022 23:03:38 +0500 Subject: [PATCH 7/7] fixed rendering and if project is invalid it show 404 --- src/redux/reducers/projectsReducer.ts | 20 +++++----- src/ui/layouts/Home.tsx | 38 +++++++++++++------ .../AuthenticatedHeader.tsx | 16 +++++++- .../AuthenticatedSidebar/Menu/index.tsx | 3 ++ .../AuthenticatedSidebar/SideHeader/index.tsx | 8 +++- .../AuthenticatedLayout/ProjectPopup.tsx | 3 +- 6 files changed, 61 insertions(+), 27 deletions(-) diff --git a/src/redux/reducers/projectsReducer.ts b/src/redux/reducers/projectsReducer.ts index aff7938ff..b9af9aec7 100644 --- a/src/redux/reducers/projectsReducer.ts +++ b/src/redux/reducers/projectsReducer.ts @@ -1,3 +1,4 @@ +import { DEFAULT_PROJECT_NAME } from '../../constants'; import { camelCaseArray } from '../../utils/camelCase'; import { projectActionTypes } from '../actionTypes'; import { byKeyInsert, idsInsert } from './reducerHelpers'; @@ -7,7 +8,7 @@ export interface State { byId: Record; myProjectIds: TId[]; selectedProject: string; - projectStats: any + projectStats: any; } type ProjectsPayload = Projects[]; @@ -25,20 +26,20 @@ export const initialState: State = { byId: {}, myProjectIds: [], selectedProject: '', - projectStats: {} + projectStats: {}, }; const newState = ( state: State, projects: Projects[], defaultSelectedProject?: string, - projectStats?: object + projectStats?: object, ): State => ({ ...state, ids: idsInsert(state.ids, projects), byId: byKeyInsert(state.byId, projects), selectedProject: defaultSelectedProject as string, - projectStats: projectStats + projectStats: projectStats, }); const projectsReducer = ( @@ -55,7 +56,7 @@ const projectsReducer = ( (project: Projects) => project.id, ); if (action.requestParams.selectDefault === undefined) { - const defaultSelectedProject = projects[0].name; + const defaultSelectedProject = DEFAULT_PROJECT_NAME; return { ...newState(state, projects, defaultSelectedProject), myProjectIds, @@ -73,22 +74,21 @@ const projectsReducer = ( const myProjectIds: TId[] = allProjects.map( (project: Projects) => project.id, ); - + return { ...newState(state, allProjects, seletecdProject), myProjectIds, }; } - case projectActionTypes.getMyProjectStats.success: { // const { projectStats } = action.payload as any; const projectStats = action.payload; - - return { ...newState(state, projectStats) }; + + return { ...newState(state, projectStats) }; } - default: + default: return state; } }; diff --git a/src/ui/layouts/Home.tsx b/src/ui/layouts/Home.tsx index ec7a3c00a..8e66fd658 100644 --- a/src/ui/layouts/Home.tsx +++ b/src/ui/layouts/Home.tsx @@ -40,6 +40,7 @@ import { pipelinePagesActions, runPagesActions, } from '../../redux/actions'; +import { NotFound } from '../../ui/layouts/NotFound'; import Tour from './Tour'; @@ -84,6 +85,7 @@ export const Home: React.FC = () => { const stackComponentsTypes: any[] = useSelector( stackComponentSelectors.stackComponentTypes, ); + const [notFound, setNotFound] = useState(false); const selectedProject = useSelector(projectSelectors.selectedProject); const projects = useSelector(projectSelectors.myProjects); @@ -109,7 +111,7 @@ export const Home: React.FC = () => { if (authToken) { const getDashboardData = async () => { setFetching(true); - // startLoad(); + startLoad(); try { const { data } = await axios.get( @@ -137,24 +139,34 @@ export const Home: React.FC = () => { // }), // ); - await dispatch( - pipelinesActions.getMy({ - project: selectedProject ? selectedProject : DEFAULT_PROJECT_NAME, - onSuccess: () => stopLoad(), - onFailure: () => stopLoad(), - }), - ); + // await dispatch( + // pipelinesActions.getMy({ + // project: selectedProject ? selectedProject : DEFAULT_PROJECT_NAME, + // onSuccess: () => stopLoad(), + // onFailure: () => stopLoad(), + // }), + // ); setDashboardData(data); setFetching(false); - } catch (err) { - // @ts-ignore + } catch (e) { dispatch( showToasterAction({ - description: translate('toasts.successful.passwordText'), - type: toasterTypes.success, + description: 'Not found', + type: toasterTypes.failure, }), ); + + await dispatch( + projectsActions.getMy({ + selectDefault: false, + selectedProject: DEFAULT_PROJECT_NAME, + onSuccess: () => setNotFound(true), + onFailure: () => stopLoad(), + }), + ); + + // push(routePaths.home(DEFAULT_PROJECT_NAME)); } }; getDashboardData(); @@ -176,6 +188,8 @@ export const Home: React.FC = () => { setBox(''); setIsHover(false); }; + console.log(notFound, 'notFound'); + if (notFound) return ; return ( diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx index 01217882b..8e8d85c1b 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx @@ -191,10 +191,21 @@ export const AuthenticatedHeader: React.FC<{ } onChange={(e: any) => onChange(e)} defaultValue={ - selectedProject ? selectedProject : DEFAULT_PROJECT_NAME + projects.some( + (project) => + project['name'] === locationPath.split('/')[2], + ) + ? locationPath.split('/')[2] + : DEFAULT_PROJECT_NAME + // projects ? selectedProject : DEFAULT_PROJECT_NAME } value={ - selectedProject ? selectedProject : DEFAULT_PROJECT_NAME + projects.some( + (project) => + project['name'] === locationPath.split('/')[2], + ) + ? locationPath.split('/')[2] + : DEFAULT_PROJECT_NAME } placeholder={'Projects'} className={cn(css.input)} @@ -207,6 +218,7 @@ export const AuthenticatedHeader: React.FC<{ color: '#424240', }} > + {console.log(projects, 'projects')} diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx index 71b17f7a3..1d829d8d9 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx @@ -32,6 +32,7 @@ export const Menu: React.FC = () => { Icon={() => ( )} + innerItem={window.location.href?.includes('pipelines')} // to={routePaths.pipelines.base} text={translate('menu.pipelines.text')} isActive={() => window.location.href?.includes('pipelines')} @@ -47,6 +48,7 @@ export const Menu: React.FC = () => { to={routePaths.pipelines.allRuns(selectedProject)} isActive={() => window.location.href?.includes('all-runs')} text={'Runs'} + innerItem={window.location.href?.includes('all-runs')} // isActive={() => { // return ( // !!matchPath(locationPath, { @@ -65,6 +67,7 @@ export const Menu: React.FC = () => { Icon={() => ( )} + innerItem={window.location.href?.includes('stacks')} // to={routePaths.stacks.base} text={translate('menu.stacks.text')} isActive={() => window.location.href?.includes('stacks')} diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx index 97dc9a8d4..0fea6d087 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx @@ -4,15 +4,19 @@ import { routePaths } from '../../../../../../../routes/routePaths'; import { Box, Separator, icons } from '../../../../../../components'; import { iconSizes, iconColors } from '../../../../../../../constants'; import { translate } from '../translate'; +import { useSelector } from '../../../../../../hooks'; +import { projectSelectors } from '../../../../../../../redux/selectors'; export const SideHeader: React.FC = () => { const url = window.location.pathname; - + const selectedProject = useSelector(projectSelectors.selectedProject); return ( <> } - to={routePaths.home(url.split('/')[2])} + to={routePaths.home( + url.includes('projects') ? url.split('/')[2] : selectedProject, + )} text={translate('menu.home.text')} exact /> diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx index c2fe4d20a..172b5160d 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/ProjectPopup.tsx @@ -79,6 +79,7 @@ export const ProjectPopup: React.FC<{ projectsActions.getMy({ selectDefault: false, selectedProject: name, + onSuccess: () => push(routePaths.home(name)), }), ); // await dispatch( @@ -88,7 +89,7 @@ export const ProjectPopup: React.FC<{ // onFailure: () => stopLoad(), // }), // ); - push(routePaths.home(name)); + setSubmitting(false); setPopupOpen(false); })