added project in api for pipeline,stacks and stack components

Author: talhainvenxion

src/api/endpoints.ts

@@ -30,13 +30,15 @@ export const endpoints = {
       `/pipelines/${pipelineId}?unlisted=false&hydrated=true`,
   },
   Stacks: {
-    my: '/stacks?hydrated=true',
+    my: (project: string): string =>
+      `/projects/${project}/stacks?hydrated=true`,
     get: (stackId: TId): string =>
       `/stacks/${stackId}?unlisted=false&hydrated=true`,
   },
   StackComponents: {
     types: '/component-types',
-    my: (type: string): string => `/components?type=${type}&hydrated=true`,
+    my: (type: string, project: string): string =>
+      `/projects/${project}/components?type=${type}&hydrated=true`,
     get: (stackComponentId: TId): string =>
       `/components/${stackComponentId}?hydrated=true`,
   },

src/api/stackComponents/getStackComponentListApi.ts

@@ -6,12 +6,14 @@ import { apiUrl } from '../apiUrl';
 const getMyStackComponentsApi = ({
   authenticationToken,
   type,
+  project,
 }: {
+  project: string;
   authenticationToken: string;
   type: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.StackComponents.my(type)),
+    url: apiUrl(endpoints.StackComponents.my(type, project)),
     method: httpMethods.get,
     authenticationToken,
   });

src/api/stacks/getMyStacksApi.ts

@@ -4,12 +4,14 @@ import { httpMethods } from '../constants';
 import { apiUrl } from '../apiUrl';
 
 const getMyStacksApi = ({
+  project,
   authenticationToken,
 }: {
+  project: string;
   authenticationToken: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.Stacks.my),
+    url: apiUrl(endpoints.Stacks.my(project)),
     method: httpMethods.get,
     authenticationToken,
   });

src/redux/actions/stackComponents/getStackComponentListAction.ts

@@ -2,10 +2,12 @@ import { stackComponentActionTypes } from '../../actionTypes';
 import getStackComponentListApi from '../../../api/stackComponents/getStackComponentListApi';
 
 export const getStackComponentListAction = ({
+  project,
   type,
   onSuccess,
   onFailure,
 }: {
+  project: string;
   type: TId;
   onSuccess?: () => void;
   onFailure?: () => void;
@@ -16,7 +18,7 @@ export const getStackComponentListAction = ({
     isAuthenticated: true,
     failureActionType: stackComponentActionTypes.getStackComponentList.failure,
     successActionType: stackComponentActionTypes.getStackComponentList.success,
-    params: { type },
+    params: { type, project },
     onSuccess,
     onFailure,
   },

src/redux/actions/stacks/getMyStacksAction.ts

@@ -2,9 +2,11 @@ import { stackActionTypes } from '../../actionTypes';
 import getMyStacksApi from '../../../api/stacks/getMyStacksApi';
 
 export const getMyStacksAction = ({
+  project,
   onSuccess,
   onFailure,
 }: {
+  project: string;
   onSuccess?: () => void;
   onFailure?: () => void;
 }): TRequestAction => ({
@@ -14,6 +16,7 @@ export const getMyStacksAction = ({
     isAuthenticated: true,
     failureActionType: stackActionTypes.getMyStacks.failure,
     successActionType: stackActionTypes.getMyStacks.success,
+    params: { project },
     onSuccess,
     onFailure,
   },

src/routes/appRoutesConfig.tsx

@@ -69,15 +69,15 @@ const routes = [
     exact: true,
   },
   {
-    path: routePaths.pipelines.list,
+    path: routePaths.pipelines.list(':string'),
     Component: Pipelines,
     visibility: {
       authentication: RouteVisibilityAuthentication.authenticatedOnly,
     },
     exact: true,
   },
   {
-    path: routePaths.pipelines.allRuns,
+    path: routePaths.pipelines.allRuns(':string'),
     Component: Pipelines,
     visibility: {
       authentication: RouteVisibilityAuthentication.authenticatedOnly,
@@ -283,7 +283,7 @@ const routes = [
   },
 
   {
-    path: routePaths.stackComponents.base(':type'),
+    path: routePaths.stackComponents.base(':type', ':string'),
     Component: stackComponents,
     visibility: {
       authentication: RouteVisibilityAuthentication.authenticatedOnly,

src/routes/routePaths.tsx

@@ -5,9 +5,11 @@ export const routePaths = {
   forgot: '/forgot-password',
   home: '/',
   pipelines: {
-    base: '/pipelines',
-    list: '/pipelines/list',
-    allRuns: '/pipelines/all-runs',
+    // base: '/pipelines',
+    base: `/pipelines`,
+    list: (project: string): string => `/projects/${project}/pipelines/list`,
+    allRuns: (project: string): string =>
+      `/projects/${project}/pipelines/all-runs`,
   },
   pipeline: {
     base: (id: TId): string => `/pipelines/${id}`,
@@ -69,7 +71,8 @@ export const routePaths = {
   },
 
   stackComponents: {
-    base: (type: string): string => `/components/${type}`,
+    base: (type: string, project: string): string =>
+      `/projects/${project}/components/${type}`,
     configuration: (type: string, id: TId): string =>
       `/components/${type}/${id}/configuration`,
     runs: (type: string, id: TId): string => `/components/${type}/${id}/runs`,

src/ui/layouts/Home.tsx

@@ -25,7 +25,10 @@ import { sessionSelectors } from '../../redux/selectors/session';
 import { usePushRoute, useSelector } from '../hooks';
 import axios from 'axios';
 import { routePaths } from '../../routes/routePaths';
-import { stackComponentSelectors } from '../../redux/selectors';
+import {
+  projectSelectors,
+  stackComponentSelectors,
+} from '../../redux/selectors';
 
 export const translate = getTranslateByScope('ui.layouts.Dashboard');
 
@@ -67,6 +70,7 @@ export const Home: React.FC = () => {
   const stackComponentsTypes: any[] = useSelector(
     stackComponentSelectors.stackComponentTypes,
   );
+  const selectedProject = useSelector(projectSelectors.selectedProject);
   const [fetching, setFetching] = useState(false);
   const [dashboardData, setDashboardData] = useState('');
   const authToken = useSelector(sessionSelectors.authenticationToken);
@@ -148,11 +152,12 @@ export const Home: React.FC = () => {
                         } else if (e.text === 'pipelines') {
                           push(routePaths.pipelines.base);
                         } else if (e.text === 'runs') {
-                          push(routePaths.pipelines.allRuns);
+                          push(routePaths.pipelines.allRuns(selectedProject));
                         } else if (e.text === 'components') {
                           push(
                             routePaths.stackComponents.base(
                               stackComponentsTypes[0],
+                              selectedProject,
                             ),
                           );
                         }

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx

@@ -7,14 +7,18 @@ import { translate } from '../translate';
 import { useLocationPath } from '../../../../../../hooks';
 import { matchPath } from 'react-router-dom';
 import { useSelector } from './../../../../../../../ui/hooks';
-import { stackComponentSelectors } from '../../../../../../../redux/selectors';
+import {
+  projectSelectors,
+  stackComponentSelectors,
+} from '../../../../../../../redux/selectors';
 
 export const Menu: React.FC = () => {
   const locationPath = useLocationPath();
 
   const stackComponentsTypes: any[] = useSelector(
     stackComponentSelectors.stackComponentTypes,
   );
+  const selectedProject = useSelector(projectSelectors.selectedProject);
 
   return (
     <>
@@ -34,14 +38,14 @@ export const Menu: React.FC = () => {
         Icon={() => (
           <icons.pipeline color={iconColors.white} size={iconSizes.md} />
         )}
-        to={routePaths.pipelines.list}
+        to={routePaths.pipelines.list(selectedProject)}
         text={translate('menu.pipelines.text')}
       />
       <MenuItem
         isActive={() => {
           return (
             !!matchPath(locationPath, {
-              path: routePaths.pipelines.allRuns,
+              path: routePaths.pipelines.allRuns(selectedProject),
               exact: false,
             }) ||
             !!matchPath(locationPath, {
@@ -53,7 +57,7 @@ export const Menu: React.FC = () => {
         Icon={() => (
           <icons.pipeline color={iconColors.white} size={iconSizes.md} />
         )}
-        to={routePaths.pipelines.allRuns}
+        to={routePaths.pipelines.allRuns(selectedProject)}
         text={'Runs'}
       />
       <MenuItem
@@ -79,7 +83,7 @@ export const Menu: React.FC = () => {
       <MenuItem
         isActive={() => {
           return !!matchPath(locationPath, {
-            path: routePaths.stackComponents.base(''),
+            path: routePaths.stackComponents.base('', selectedProject),
             exact: false,
           });
         }}
@@ -88,6 +92,7 @@ export const Menu: React.FC = () => {
         )}
         to={routePaths.stackComponents.base(
           stackComponentsTypes ? stackComponentsTypes[0] : '',
+          selectedProject,
         )}
         text={translate('menu.stackComponents.text')}
       />
@@ -97,7 +102,7 @@ export const Menu: React.FC = () => {
           <MenuItem
             isActive={() => {
               return !!matchPath(locationPath, {
-                path: routePaths.stackComponents.base(item),
+                path: routePaths.stackComponents.base(item, selectedProject),
                 exact: false,
               });
             }}
@@ -108,7 +113,7 @@ export const Menu: React.FC = () => {
                 size={iconSizes.md}
               />
             )}
-            to={routePaths.stackComponents.base(item)}
+            to={routePaths.stackComponents.base(item, selectedProject)}
             text={item}
           />
         ))}

src/ui/layouts/pipelines/PipelineDetail/index.tsx

@@ -11,7 +11,8 @@ import { useService } from './useService';
 import FilterComponent, {
   getInitialFilterStateForRuns,
 } from '../../../components/Filters';
-import { useLocationPath } from '../../../hooks';
+import { useLocationPath, useSelector } from '../../../hooks';
+import { projectSelectors } from '../../../../redux/selectors';
 
 interface Props {
   pipelineId: TId;
@@ -60,12 +61,15 @@ const getTabPages = (pipelineId: TId): TabPage[] => {
   ];
 };
 
-const getBreadcrumbs = (pipelineId: TId): TBreadcrumb[] => {
+const getBreadcrumbs = (
+  pipelineId: TId,
+  selectedProject: string,
+): TBreadcrumb[] => {
   return [
     {
       name: translate('header.breadcrumbs.pipelines.text'),
       clickable: true,
-      to: routePaths.pipelines.list,
+      to: routePaths.pipelines.list(selectedProject),
     },
     {
       name: pipelineId,
@@ -81,9 +85,9 @@ export interface PipelineDetailRouteParams {
 
 export const PipelineDetail: React.FC = () => {
   const { pipeline } = useService();
-
+  const selectedProject = useSelector(projectSelectors.selectedProject);
   const tabPages = getTabPages(pipeline.id);
-  const breadcrumbs = getBreadcrumbs(pipeline.id);
+  const breadcrumbs = getBreadcrumbs(pipeline.id, selectedProject);
 
   const boxStyle = {
     backgroundColor: '#E9EAEC',