remove hydrated and added project scope for all runs

Author: talhainvenxion

src/api/endpoints.ts

@@ -24,42 +24,35 @@ export const endpoints = {
   },
 
   pipelines: {
-    my: (project: string): string =>
-      `/projects/${project}/pipelines?hydrated=true`,
-    get: (pipelineId: TId): string =>
-      `/pipelines/${pipelineId}?unlisted=false&hydrated=true`,
+    my: (project: string): string => `/projects/${project}/pipelines`,
+    get: (pipelineId: TId): string => `/pipelines/${pipelineId}`,
   },
   Stacks: {
-    my: (project: string): string =>
-      `/projects/${project}/stacks?hydrated=true`,
-    get: (stackId: TId): string =>
-      `/stacks/${stackId}?unlisted=false&hydrated=true`,
+    my: (project: string): string => `/projects/${project}/stacks`,
+    get: (stackId: TId): string => `/stacks/${stackId}`,
   },
   StackComponents: {
     types: '/component-types',
     my: (type: string, project: string): string =>
-      `/projects/${project}/components?type=${type}&hydrated=true`,
-    get: (stackComponentId: TId): string =>
-      `/components/${stackComponentId}?hydrated=true`,
+      `/projects/${project}/components?type=${type}`,
+    get: (stackComponentId: TId): string => `/components/${stackComponentId}`,
   },
   runs: {
     pipeline: {
-      get: (pipelineId: TId): string =>
-        `/runs?pipeline_id=${pipelineId}&unlisted=false&hydrated=true`,
+      get: (pipelineId: TId): string => `/runs?pipeline_id=${pipelineId}`,
     },
     stack: {
-      get: (stackId: TId): string =>
-        `/runs?stack_id=${stackId}&unlisted=false&hydrated=true`,
+      get: (stackId: TId): string => `/runs?stack_id=${stackId}`,
     },
     stackComponent: {
       get: (stackComponentId: TId): string =>
-        `/runs?component_id=${stackComponentId}&unlisted=false&hydrated=true`,
+        `/runs?component_id=${stackComponentId}`,
     },
     graphById: {
       get: (runId: TId): string => `/runs/${runId}/graph`,
     },
-    all: `/runs?unlisted=false&hydrated=true`,
-    get: (runId: TId): string => `/runs/${runId}?unlisted=false&hydrated=true`,
+    all: (project: string): string => `/projects/${project}/runs`,
+    get: (runId: TId): string => `/runs/${runId}`,
   },
   roles: {
     all: `/roles`,

src/api/runs/getAllRunsApi.ts

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

src/redux/actions/runs/getAllRunsAction.ts

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

src/routes/appRoutesConfig.tsx

@@ -117,7 +117,7 @@ const routes = [
     exact: true,
   },
   {
-    path: routePaths.stacks.list,
+    path: routePaths.stacks.list(':string'),
     Component: stacks,
     visibility: {
       authentication: RouteVisibilityAuthentication.authenticatedOnly,

src/routes/routePaths.tsx

@@ -56,7 +56,7 @@ export const routePaths = {
   },
   stacks: {
     base: '/stacks',
-    list: '/stacks/list',
+    list: (project: string): string => `/projects/${project}/stacks/list`,
     allRuns: '/stacks/all-runs',
   },
   stack: {

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

@@ -76,7 +76,7 @@ export const Menu: React.FC = () => {
         Icon={() => (
           <icons.stack color={iconColors.white} size={iconSizes.md} />
         )}
-        to={routePaths.stacks.list}
+        to={routePaths.stacks.list(selectedProject)}
         text={translate('menu.stacks.text')}
       />
 

src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx

@@ -69,9 +69,9 @@ export const GetHeaderCols = ({
         >
           <FlexBox justifyContent="center">
             {openPipelineIds.indexOf(pipeline.id) === -1 ? (
-              <icons.rightArrow color={iconColors.grey} size={iconSizes.md} />
+              <icons.rightArrow color={iconColors.grey} size={iconSizes.sm} />
             ) : (
-              <icons.chevronDown color={iconColors.grey} size={iconSizes.md} />
+              <icons.chevronDown color={iconColors.grey} size={iconSizes.sm} />
             )}
           </FlexBox>
         </LinkBox>

src/ui/layouts/pipelines/Pipelines/useService.ts

@@ -25,6 +25,7 @@ export const useService = (): ServiceInterface => {
     setFetchingForAllRuns(true);
     dispatch(
       runsActions.allRuns({
+        project: selectedProject,
         onSuccess: () => setFetchingForAllRuns(false),
         onFailure: () => setFetchingForAllRuns(false),
       }),

src/ui/layouts/runs/StackDetail/index.tsx

@@ -9,6 +9,8 @@ import { Configuration } from './Configuration';
 import { Runs } from './Runs';
 import { BasePage } from '../BasePage';
 import { useService } from './useService';
+import { useSelector } from '../../../hooks';
+import { projectSelectors } from '../../../../redux/selectors';
 
 const getTabPages = (stackId: TId): TabPage[] => {
   return [
@@ -25,12 +27,15 @@ const getTabPages = (stackId: TId): TabPage[] => {
   ];
 };
 
-const getBreadcrumbs = (stackId: TId): TBreadcrumb[] => {
+const getBreadcrumbs = (
+  stackId: TId,
+  selectedProject: string,
+): TBreadcrumb[] => {
   return [
     {
       name: translate('header.breadcrumbs.stacks.text'),
       clickable: true,
-      to: routePaths.stacks.list,
+      to: routePaths.stacks.list(selectedProject),
     },
     {
       name: stackId,
@@ -46,9 +51,9 @@ export interface StackDetailRouteParams {
 
 export const StackDetail: React.FC = () => {
   const { stack } = useService();
-
+  const selectedProject = useSelector(projectSelectors.selectedProject);
   const tabPages = getTabPages(stack.id);
-  const breadcrumbs = getBreadcrumbs(stack.id);
+  const breadcrumbs = getBreadcrumbs(stack.id, selectedProject);
 
   const boxStyle = {
     backgroundColor: '#E9EAEC',

src/ui/layouts/runs/Stacks/index.tsx

@@ -5,32 +5,30 @@ import { BasePage } from '../BasePage';
 import { routePaths } from '../../../../routes/routePaths';
 
 import { useService } from './useService';
-
-const PAGES = [
-  {
-    text: translate('tabs.stacks.text'),
-    Component: List,
-    path: routePaths.stacks.list,
-  },
-];
-
-const BREADCRUMBS = [
-  {
-    name: translate('header.breadcrumbs.stacks.text'),
-    clickable: true,
-    to: routePaths.stacks.list,
-  },
-];
+import { useSelector } from '../../../hooks';
+import { projectSelectors } from '../../../../redux/selectors';
 
 export const Stacks: React.FC = () => {
   const { setFetching } = useService();
   console.log(setFetching);
-
+  const selectedProject = useSelector(projectSelectors.selectedProject);
   return (
     <BasePage
-      tabPages={PAGES}
+      tabPages={[
+        {
+          text: translate('tabs.stacks.text'),
+          Component: List,
+          path: routePaths.stacks.list(selectedProject),
+        },
+      ]}
       tabBasePath={routePaths.stacks.base}
-      breadcrumbs={BREADCRUMBS}
+      breadcrumbs={[
+        {
+          name: translate('header.breadcrumbs.stacks.text'),
+          clickable: true,
+          to: routePaths.stacks.list(selectedProject),
+        },
+      ]}
       headerWithButtons
       renderHeaderRight={() => <></>}
     />