Talha/feedback fixes

src/ui/layouts/common/Table/index.tsx

@@ -9,6 +9,7 @@ import {
   If,
   H3,
   Truncate,
+  FullWidthSpinner,
   // FullWidthSpinner,
 } from '../../../components';
 import { getPaginationData } from '../../../../utils/pagination';
@@ -60,15 +61,15 @@ export const Table: React.FC<TableProps> = ({
     rowsToDisplay = itemsForPage;
   }
 
-  // if (loading) {
-  //   return <FullWidthSpinner color="black" size="md" />;
-  // }
+  if (loading) {
+    return <FullWidthSpinner color="black" size="md" />;
+  }
 
   return (
     <FlexBox.Column className={styles.tableWrapper} fullWidth>
       <IfElse
-        // condition={tableRows.length > 0 && !loading}
-        condition={tableRows.length > 0}
+        condition={tableRows.length > 0 && !loading}
+        // condition={tableRows.length > 0}
         renderWhenTrue={() => (
           <>
             <table className={styles.table}>

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

@@ -3,6 +3,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 import { Paragraph, Box, FlexBox } from '../../../../../../components';
 import cn from 'classnames';
 import styles from './MenuItem.module.scss';
+import { camelCaseToParagraph } from '../../../../../../../utils';
 
 export const MenuItem: React.FC<{
   subItem?: boolean;
@@ -39,7 +40,7 @@ export const MenuItem: React.FC<{
           </Box>
           <Box paddingLeft="md">
             <Paragraph color="darkGrey" size="small">
-              {text}
+              {camelCaseToParagraph(text)}
             </Paragraph>
           </Box>
         </FlexBox>

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

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+// import { pipelinesActions, runsActions } from '../../../../../redux/actions';
 import {
   pipelinePagesSelectors,
   runSelectors,
@@ -11,21 +13,12 @@ interface ServiceInterface {
 
 export const useService = (): ServiceInterface => {
   const fetching = useSelector(pipelinePagesSelectors.fetching);
-  // const currentWorkspace = useSelector(pipelinePagesSelectors.currentWorkspace);
-
-  // const runs1 = useSelector((state: any) => {
-  //   debugger;
-  //   return state.persisted.runs.allNewRuns || [];
-  // });
 
   const runs = useSelector(runSelectors.myRuns);
-
-  // const filteredRuns = runs.filter(
-  //   (run: TRun) => currentWorkspace && run.workspaceId === currentWorkspace.id,
-  // );
+  useEffect(() => {}, [runs]);
 
   const runIds = runs.map((run: TRun) => run.id);
-  // debugger;
+
   return {
     fetching,
     runIds,

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

@@ -57,7 +57,7 @@ export const useService = (
     // );
 
     setFilteredPipelines(orderedPipelines);
-  }, [filter]);
+  }, [filter, pipelines]);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(pipelinePagesActions.setSelectedRunIds({ runIds }));

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

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import {
   pipelinePagesActions,
   runsActions,
-  workspacesActions,
+  pipelinesActions,
 } from '../../../../redux/actions';
 import {
   pipelinePagesSelectors,
@@ -16,15 +16,15 @@ interface ServiceInterface {
   setFetching: (arg: boolean) => void;
   setCurrentWorkspace: (arg: TWorkspace | null) => void;
   currentWorkspace: TWorkspace | null;
-  workspaces: TWorkspace[];
+  // workspaces: TWorkspace[];
 }
 
 export const useService = (): ServiceInterface => {
   const currentWorkspace = useSelector(pipelinePagesSelectors.currentWorkspace);
 
   const dispatch = useDispatch();
 
-  const workspaces = useSelector(workspaceSelectors.myWorkspaces);
+  // const workspaces = useSelector(workspaceSelectors.myWorkspaces);
 
   // useRequestOnMount(workspacesActions.getMy, {});
 
@@ -63,6 +63,6 @@ export const useService = (): ServiceInterface => {
     setFetching,
     setCurrentWorkspace,
     currentWorkspace,
-    workspaces,
+    // workspaces,
   };
 };

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

@@ -40,7 +40,10 @@ export const RunsTable: React.FC<{
     fromAllruns
       ? history.push(routePaths.run.run.statistics(run.id))
       : history.push(
-          routePaths.run.pipeline.statistics(run.id, run.pipeline_id),
+          routePaths.run.pipeline.statistics(
+            run.id,
+            run.pipeline_id ? run.pipeline_id : run.pipelineId,
+          ),
         );
   };
 

src/ui/layouts/pipelines/useService.ts

@@ -1,13 +1,27 @@
+import { useEffect } from 'react';
+import { pipelinesActions, runsActions } from '../../../redux/actions';
 import { organizationSelectors } from '../../../redux/selectors';
-import { useSelector } from '../../hooks';
+import { useSelector, useDispatch } from '../../hooks';
 
 interface ServiceInterface {
   organization: TOrganization | null;
 }
 
 export const useService = (): ServiceInterface => {
   const organization = useSelector(organizationSelectors.myOrganization);
+  const dispatch = useDispatch();
+  // useEffect(() => {
+  //   dispatch(pipelinesActions.getMy());
+  // }, []);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      //assign interval to a variable to clear it.
+      dispatch(runsActions.allRuns({}));
+      dispatch(pipelinesActions.getMy());
+    }, 5000);
 
+    return () => clearInterval(intervalId); //This is important
+  });
   return {
     organization,
   };

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

@@ -3,7 +3,7 @@ import { translate } from './translate';
 import { List } from './List';
 import { BasePage } from '../BasePage';
 import { routePaths } from '../../../../routes/routePaths';
-import { WorkspaceDropdown } from './WorkspaceDropdown';
+// import { WorkspaceDropdown } from './WorkspaceDropdown';
 import { useService } from './useService';
 
 const PAGES = [
@@ -33,12 +33,8 @@ const BREADCRUMBS = [
 ];
 
 export const Stacks: React.FC = () => {
-  const {
-    setFetching,
-    setCurrentWorkspace,
-    currentWorkspace,
-    workspaces,
-  } = useService();
+  const { setFetching } = useService();
+  console.log(setFetching);
 
   return (
     <BasePage
@@ -47,16 +43,17 @@ export const Stacks: React.FC = () => {
       breadcrumbs={BREADCRUMBS}
       headerWithButtons
       renderHeaderRight={() => (
-        <WorkspaceDropdown
-          workspaces={workspaces}
-          currentWorkspace={currentWorkspace}
-          setCurrentWorkspace={(workspace: TWorkspace): void => {
-            if (currentWorkspace && workspace.id !== currentWorkspace.id) {
-              setFetching(true);
-            }
-            setCurrentWorkspace(workspace);
-          }}
-        />
+        <></>
+        // <WorkspaceDropdown
+        //   workspaces={workspaces}
+        //   currentWorkspace={currentWorkspace}
+        //   setCurrentWorkspace={(workspace: TWorkspace): void => {
+        //     if (currentWorkspace && workspace.id !== currentWorkspace.id) {
+        //       setFetching(true);
+        //     }
+        //     setCurrentWorkspace(workspace);
+        //   }}
+        // />
       )}
     />
   );

src/ui/layouts/runs/Stacks/useService.ts

@@ -21,17 +21,17 @@ interface ServiceInterface {
   setFetching: (arg: boolean) => void;
   setCurrentWorkspace: (arg: TWorkspace | null) => void;
   currentWorkspace: TWorkspace | null;
-  workspaces: TWorkspace[];
+  // workspaces: TWorkspace[];
 }
 
 export const useService = (): ServiceInterface => {
   const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace);
   const locationPath = useLocationPath();
   const dispatch = useDispatch();
 
-  const workspaces = useSelector(workspaceSelectors.myWorkspaces);
+  // const workspaces = useSelector(workspaceSelectors.myWorkspaces);
 
-  useRequestOnMount(workspacesActions.getMy, {});
+  // useRequestOnMount(workspacesActions.getMy, {});
 
   useEffect(() => {
     setFetching(true);
@@ -56,6 +56,6 @@ export const useService = (): ServiceInterface => {
     setFetching,
     setCurrentWorkspace,
     currentWorkspace,
-    workspaces,
+    // workspaces,
   };
 };

src/ui/layouts/settings/Organization/DeleteMember.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Box,
@@ -21,6 +21,14 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => {
   const [submitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      //assign interval to a variable to clear it.
+      dispatch(organizationActions.getMembers({}));
+    }, 5000);
+
+    return () => clearInterval(intervalId); //This is important
+  });
   const onDelete = () => {
     setSubmitting(true);
     dispatch(
@@ -60,7 +68,9 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => {
             </H3>
           </FlexBox.Row>
           <Box marginTop="md">
-            <Paragraph>{`${translate('deleteMemberPopup.text')} ${member?.email}`}</Paragraph>
+            <Paragraph>{`${translate('deleteMemberPopup.text')} ${
+              member?.email
+            }`}</Paragraph>
           </Box>
           <FlexBox justifyContent="flex-end" marginTop="xl" flexWrap>
             <Box marginRight="sm" marginBottom="md">
@@ -81,7 +91,7 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => {
         </Popup>
       )}
       <Box>
-        <LinkBox onClick={() => setPopupOpen(true)} >
+        <LinkBox onClick={() => setPopupOpen(true)}>
           <icons.closeWithBorder color={iconColors.grey} />
         </LinkBox>
       </Box>

src/ui/layouts/settings/Organization/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { organizationActions } from '../../../../redux/actions';
 import { organizationSelectors } from '../../../../redux/selectors';
@@ -39,7 +39,9 @@ export const Organization: React.FC = () => {
   const members = useSelector(organizationSelectors.myMembers);
   // const invites = useSelector(organizationSelectors.invites);
   const memberHeaderCols = useMemberHeaderCols();
-
+  useEffect(() => {
+    //This is important
+  }, [members]);
   if (!organization) return null;
 
   return (

src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx

@@ -18,6 +18,7 @@ import { Popup } from '../../common/Popup';
 import { DocumentationLink } from './DocumentationLink';
 import { CommandBoxWScroll } from '../../common/CommandBox';
 import { constantCommandsToCreateComponent } from '../../../../constants/constantCommands';
+import { camelCaseToParagraph } from '../../../../utils';
 
 export const CreatePipelineButton: React.FC = () => {
   const locationPath = useLocationPath();
@@ -45,14 +46,14 @@ export const CreatePipelineButton: React.FC = () => {
       paddingHorizontal="sm"
     >
       <PrimaryButton onClick={() => setCreatePipelinePopupOpen(true)}>
-        Create {locationPath.split('/')[2]}
+        Create {camelCaseToParagraph(locationPath.split('/')[2])}
       </PrimaryButton>
 
       {createPipelinePopupOpen && (
         <Popup onClose={() => setCreatePipelinePopupOpen(false)}>
           <FlexBox.Row>
             <H3 bold color="darkGrey">
-              Create {locationPath.split('/')[2]}
+              Create {camelCaseToParagraph(locationPath.split('/')[2])}
             </H3>
           </FlexBox.Row>
           {locationPath.split('/')[2] ===

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { routePaths } from '../../../../routes/routePaths';
 import { Box, Paragraph, icons } from '../../../components';
 import { iconColors, iconSizes } from '../../../../constants';
-import { formatDateToDisplay } from '../../../../utils';
+import { camelCaseToParagraph, formatDateToDisplay } from '../../../../utils';
 import { translate } from './translate';
 import { Configuration } from './Configuration';
 import { Runs } from './Runs';
@@ -35,15 +35,16 @@ const getTabPages = (stackId: TId, locationPath: any): TabPage[] => {
 const getBreadcrumbs = (stackId: TId, locationPath: any): TBreadcrumb[] => {
   return [
     {
-      name: locationPath.split('/')[2],
+      name: camelCaseToParagraph(locationPath.split('/')[2]),
+
       clickable: true,
       to: routePaths.stackComponents.base(locationPath.split('/')[2]),
     },
     {
       name: stackId,
       clickable: true,
       to: routePaths.stackComponents.configuration(
-        locationPath.split('/')[2],
+        camelCaseToParagraph(locationPath.split('/')[2]),
         stackId,
       ),
     },

src/ui/layouts/stackComponents/Stacks/List/useService.ts

@@ -53,11 +53,7 @@ export const useService = (
     if (isValidFilter) {
       orderedStacks = getFilteredDataForTable(orderedStacks, filter);
     }
-    // const filteredPipelines = orderedPipelines.filter(
-    //   (pipeline: TPipeline) =>
-    //     currentWorkspace && pipeline.projectName === currentWorkspace.id,
-    // );
-    // debugger;
+
     setFilteredStacks(orderedStacks);
   }, [stackComponents, filter]);