diff --git a/src/ui/layouts/common/Table/index.tsx b/src/ui/layouts/common/Table/index.tsx index 22a993055..525ad33db 100644 --- a/src/ui/layouts/common/Table/index.tsx +++ b/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 = ({ rowsToDisplay = itemsForPage; } - // if (loading) { - // return ; - // } + if (loading) { + return ; + } return ( 0 && !loading} - condition={tableRows.length > 0} + condition={tableRows.length > 0 && !loading} + // condition={tableRows.length > 0} renderWhenTrue={() => ( <> 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 cf0072ce6..6327f59ce 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx +++ b/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<{ - {text} + {camelCaseToParagraph(text)} diff --git a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts b/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts index 4639e8519..dc3965dd5 100644 --- a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts +++ b/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, diff --git a/src/ui/layouts/pipelines/Pipelines/List/useService.ts b/src/ui/layouts/pipelines/Pipelines/List/useService.ts index 45ec1949c..d16f9b2b8 100644 --- a/src/ui/layouts/pipelines/Pipelines/List/useService.ts +++ b/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 })); diff --git a/src/ui/layouts/pipelines/Pipelines/useService.ts b/src/ui/layouts/pipelines/Pipelines/useService.ts index 73a35d4b0..9ab719625 100644 --- a/src/ui/layouts/pipelines/Pipelines/useService.ts +++ b/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,7 +16,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -24,7 +24,7 @@ export const useService = (): ServiceInterface => { 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, }; }; diff --git a/src/ui/layouts/pipelines/RunsTable/index.tsx b/src/ui/layouts/pipelines/RunsTable/index.tsx index 4cc488e01..74053f590 100644 --- a/src/ui/layouts/pipelines/RunsTable/index.tsx +++ b/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, + ), ); }; diff --git a/src/ui/layouts/pipelines/useService.ts b/src/ui/layouts/pipelines/useService.ts index 059920ec7..0ff5f8763 100644 --- a/src/ui/layouts/pipelines/useService.ts +++ b/src/ui/layouts/pipelines/useService.ts @@ -1,5 +1,7 @@ +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; @@ -7,7 +9,19 @@ interface ServiceInterface { 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, }; diff --git a/src/ui/layouts/runs/Stacks/index.tsx b/src/ui/layouts/runs/Stacks/index.tsx index c174dc190..6c4deb884 100644 --- a/src/ui/layouts/runs/Stacks/index.tsx +++ b/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 ( { breadcrumbs={BREADCRUMBS} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/runs/Stacks/useService.ts b/src/ui/layouts/runs/Stacks/useService.ts index 23faeea8d..193ea066c 100644 --- a/src/ui/layouts/runs/Stacks/useService.ts +++ b/src/ui/layouts/runs/Stacks/useService.ts @@ -21,7 +21,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -29,9 +29,9 @@ export const useService = (): ServiceInterface => { 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, }; }; diff --git a/src/ui/layouts/settings/Organization/DeleteMember.tsx b/src/ui/layouts/settings/Organization/DeleteMember.tsx index 5e9017876..a6711c908 100644 --- a/src/ui/layouts/settings/Organization/DeleteMember.tsx +++ b/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 }) => { - {`${translate('deleteMemberPopup.text')} ${member?.email}`} + {`${translate('deleteMemberPopup.text')} ${ + member?.email + }`} @@ -81,7 +91,7 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { )} - setPopupOpen(true)} > + setPopupOpen(true)}> diff --git a/src/ui/layouts/settings/Organization/index.tsx b/src/ui/layouts/settings/Organization/index.tsx index cce2e833b..0b88725b4 100644 --- a/src/ui/layouts/settings/Organization/index.tsx +++ b/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 ( diff --git a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx b/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx index 072c9cba6..0c58f5348 100644 --- a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx +++ b/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" > setCreatePipelinePopupOpen(true)}> - Create {locationPath.split('/')[2]} + Create {camelCaseToParagraph(locationPath.split('/')[2])} {createPipelinePopupOpen && ( setCreatePipelinePopupOpen(false)}>

- Create {locationPath.split('/')[2]} + Create {camelCaseToParagraph(locationPath.split('/')[2])}

{locationPath.split('/')[2] === diff --git a/src/ui/layouts/stackComponents/StackDetail/index.tsx b/src/ui/layouts/stackComponents/StackDetail/index.tsx index 090708192..754599b02 100644 --- a/src/ui/layouts/stackComponents/StackDetail/index.tsx +++ b/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,7 +35,8 @@ 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]), }, @@ -43,7 +44,7 @@ const getBreadcrumbs = (stackId: TId, locationPath: any): TBreadcrumb[] => { name: stackId, clickable: true, to: routePaths.stackComponents.configuration( - locationPath.split('/')[2], + camelCaseToParagraph(locationPath.split('/')[2]), stackId, ), }, diff --git a/src/ui/layouts/stackComponents/Stacks/List/useService.ts b/src/ui/layouts/stackComponents/Stacks/List/useService.ts index f929bd553..f93804246 100644 --- a/src/ui/layouts/stackComponents/Stacks/List/useService.ts +++ b/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]); diff --git a/src/ui/layouts/stackComponents/Stacks/index.tsx b/src/ui/layouts/stackComponents/Stacks/index.tsx index 6e78ebff2..f0e397356 100644 --- a/src/ui/layouts/stackComponents/Stacks/index.tsx +++ b/src/ui/layouts/stackComponents/Stacks/index.tsx @@ -6,10 +6,11 @@ import { routePaths } from '../../../../routes/routePaths'; // import { WorkspaceDropdown } from './WorkspaceDropdown'; import { useService } from './useService'; import { useLocationPath } from '../../../hooks'; -import { WorkspaceDropdown } from './WorkspaceDropdown'; +// import { WorkspaceDropdown } from './WorkspaceDropdown'; import FilterComponent, { getInitialFilterState, } from '../../../components/Filters'; +import { camelCaseToParagraph } from '../../../../utils'; // const PAGES = [ // { // text: 'Alerter', @@ -54,16 +55,17 @@ export const Stacks: React.FC = () => { const locationPath = useLocationPath(); const { setFetching, - setCurrentWorkspace, - currentWorkspace, - workspaces, + // setCurrentWorkspace, + // currentWorkspace, + // workspaces, } = useService(); + console.log(setFetching); return ( { tabBasePath={routePaths.stackComponents.base('')} breadcrumbs={[ { - name: locationPath.split('/')[2], + name: camelCaseToParagraph(locationPath.split('/')[2]), clickable: true, to: routePaths.stackComponents.base(locationPath.split('/')[2]), }, ]} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/stackComponents/Stacks/useService.ts b/src/ui/layouts/stackComponents/Stacks/useService.ts index 3dd51887d..97f5bfe4f 100644 --- a/src/ui/layouts/stackComponents/Stacks/useService.ts +++ b/src/ui/layouts/stackComponents/Stacks/useService.ts @@ -20,20 +20,20 @@ import { interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; - currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // currentWorkspace: TWorkspace | null; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { const locationPath = useLocationPath(); - const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); + // const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); const dispatch = useDispatch(); - const workspaces = useSelector(workspaceSelectors.myWorkspaces); + // const workspaces = useSelector(workspaceSelectors.myWorkspaces); - useRequestOnMount(workspacesActions.getMy, {}); + // useRequestOnMount(workspacesActions.getMy, {}); useEffect(() => { setFetching(true); @@ -69,7 +69,7 @@ export const useService = (): ServiceInterface => { return { setFetching, setCurrentWorkspace, - currentWorkspace, - workspaces, + // currentWorkspace, + // workspaces, }; }; diff --git a/src/ui/layouts/stackComponents/useService.ts b/src/ui/layouts/stackComponents/useService.ts index 059920ec7..3dc2a09e7 100644 --- a/src/ui/layouts/stackComponents/useService.ts +++ b/src/ui/layouts/stackComponents/useService.ts @@ -1,12 +1,36 @@ +import { useEffect } from 'react'; +import { stackComponentsActions } from '../../../redux/actions'; import { organizationSelectors } from '../../../redux/selectors'; -import { useSelector } from '../../hooks'; +import { + useDispatch, + useLocationPath, + // useRequestOnMount, + useSelector, +} from '../../hooks'; interface ServiceInterface { organization: TOrganization | null; } export const useService = (): ServiceInterface => { + const locationPath = useLocationPath(); + // const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); + + const dispatch = useDispatch(); const organization = useSelector(organizationSelectors.myOrganization); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch( + stackComponentsActions.getMy({ + // id: currentWorkspace.id, + type: locationPath.split('/')[2], + }), + ); + }, 5000); + + return () => clearInterval(intervalId); + }); return { organization, diff --git a/src/ui/layouts/stacks/Stacks/index.tsx b/src/ui/layouts/stacks/Stacks/index.tsx index 3bfd822f5..85ff7a388 100644 --- a/src/ui/layouts/stacks/Stacks/index.tsx +++ b/src/ui/layouts/stacks/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'; import FilterComponent, { @@ -57,13 +57,8 @@ const BREADCRUMBS = [ ]; export const Stacks: React.FC = () => { - const { - setFetching, - setCurrentWorkspace, - currentWorkspace, - workspaces, - } = useService(); - + const { setFetching } = useService(); + console.log(setFetching); return ( { breadcrumbs={BREADCRUMBS} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/stacks/Stacks/useService.ts b/src/ui/layouts/stacks/Stacks/useService.ts index 23faeea8d..193ea066c 100644 --- a/src/ui/layouts/stacks/Stacks/useService.ts +++ b/src/ui/layouts/stacks/Stacks/useService.ts @@ -21,7 +21,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -29,9 +29,9 @@ export const useService = (): ServiceInterface => { 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, }; }; diff --git a/src/ui/layouts/stacks/useService.ts b/src/ui/layouts/stacks/useService.ts index 059920ec7..d317b461f 100644 --- a/src/ui/layouts/stacks/useService.ts +++ b/src/ui/layouts/stacks/useService.ts @@ -1,5 +1,7 @@ +import { useEffect } from 'react'; +import { stacksActions } from '../../../redux/actions'; import { organizationSelectors } from '../../../redux/selectors'; -import { useSelector } from '../../hooks'; +import { useSelector, useDispatch } from '../../hooks'; interface ServiceInterface { organization: TOrganization | null; @@ -7,7 +9,16 @@ interface ServiceInterface { export const useService = (): ServiceInterface => { const organization = useSelector(organizationSelectors.myOrganization); + const dispatch = useDispatch(); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch(stacksActions.getMy({})); + }, 5000); + + return () => clearInterval(intervalId); //This is important + }); return { organization, }; diff --git a/src/utils/camelCase.ts b/src/utils/camelCase.ts index bf5436076..f3ffed626 100644 --- a/src/utils/camelCase.ts +++ b/src/utils/camelCase.ts @@ -12,3 +12,14 @@ export const camelCaseObject = (object: any): any => { export const camelCaseArray = (array: any[]): any[] => { return array.map((arrayItem: any) => camelCaseObject(arrayItem)); }; + +export const camelCaseToParagraph = (string: string) => { + return string + .replace(/(_|-)/g, ' ') + .trim() + .replace(/\w\S*/g, function (str: string) { + return str.charAt(0).toUpperCase() + str.substr(1); + }) + .replace(/([a-z])([A-Z])/g, '$1 $2') + .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'); +}; diff --git a/src/utils/tableFilters.ts b/src/utils/tableFilters.ts index 135722efc..30b91b79b 100644 --- a/src/utils/tableFilters.ts +++ b/src/utils/tableFilters.ts @@ -3,7 +3,7 @@ import { formatDateToDisplay } from './date'; export const getFilteredDataForTable = (data: any, filter: any) => { filter.forEach((f: any) => { // temporary because api format changed after filter implementation this need to be refactor - if (f.column.label === 'Owner') { + if (f.column.label === 'Owner' || f.column.label === 'Author') { if (f.type.value === 'contains') { data = data.filter((os: any) => { if (f.column.value && f.value) {