feat: Update tooltips, add task timings, fix diagram links (#475)

Dockerfile

@@ -1,4 +1,4 @@
-FROM epamedp/headlamp:0.22.32
+FROM epamedp/headlamp:0.22.34
 
 COPY --chown=100:101 assets/ /headlamp/frontend
 COPY --chown=100:101 dist/main.js /headlamp/plugins/edp/main.js

src/override.css

@@ -1,15 +1,3 @@
-.MuiTooltip-tooltip {
-    padding: 10px 15px !important;
-    font-size: 1rem !important;
-    line-height: 1.5em !important;
-    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.35);
-}
-
-.MuiTooltip-arrow {
-    box-shadow: 0 0 9px -4px white;
-    color: #000;
-}
-
 .MuiSelect-select:focus {
     border-radius: inherit !important;
     background-color: inherit !important;
@@ -19,18 +7,6 @@
     line-height: 1;
 }
 
-nav[aria-label="Navigation Tabs"] li[class*="linkMainSelected"] {
-    background-color: #2ccfe2 !important;
-}
-
-nav[aria-label="Navigation Tabs"] li[class*="linkSelected"] .Mui-selected * {
-    color: #2ccfe2 !important;
-}
-
-div[class*="SnackbarItem-variantWarning"] {
-    color: #000;
-}
-
 .react-transform-wrapper, .react-transform-component {
     width: 100% !important;
     height: auto !important;

src/pages/component-details/page.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { PageLogicWrapper } from '../../components/PageLogicWrapper';
 import { DialogContextProvider } from '../../providers/Dialog/provider';
 import { PermissionsContextProvider } from '../../providers/Permissions/provider';
+import { TabsContextProvider } from '../../providers/Tabs/provider';
 import { permissionsToCheckConfig } from './constants';
 import { DataContextProvider } from './providers/Data/provider';
 import { DynamicDataContextProvider } from './providers/DynamicData/provider';
@@ -14,7 +15,9 @@ export default function () {
         <PermissionsContextProvider permissionConfigs={permissionsToCheckConfig}>
           <DynamicDataContextProvider>
             <DataContextProvider>
-              <PageView />
+              <TabsContextProvider initialTabIdx={0} rememberLastTab id="component-page">
+                <PageView />
+              </TabsContextProvider>
             </DataContextProvider>
           </DynamicDataContextProvider>
         </PermissionsContextProvider>

src/pages/component-details/view.tsx

@@ -5,7 +5,6 @@ import { useParams } from 'react-router-dom';
 import { PageWrapper } from '../../components/PageWrapper';
 import { QuickLink } from '../../components/QuickLink';
 import { Section } from '../../components/Section';
-import { Tabs } from '../../components/Tabs';
 import { CODEBASE_TYPES } from '../../constants/codebaseTypes';
 import { ICONS } from '../../icons/iconify-icons-mapping';
 import { Resources } from '../../icons/sprites/Resources';
@@ -15,6 +14,8 @@ import {
 } from '../../k8s/groups/EDP/QuickLink/constants';
 import { useQuickLinksURLsQuery } from '../../k8s/groups/EDP/QuickLink/hooks/useQuickLinksURLQuery';
 import { ResourceActionListContextProvider } from '../../providers/ResourceActionList/provider';
+import { Tabs } from '../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../providers/Tabs/hooks';
 import { LinkCreationService } from '../../services/link-creation';
 import { CodebaseActionsMenu } from '../../widgets/CodebaseActionsMenu';
 import { routeComponentList } from '../component-list/route';
@@ -34,6 +35,8 @@ export const PageView = () => {
 
   const tabs = usePageTabs();
 
+  const { activeTab, handleChangeTab } = useTabsContext();
+
   return (
     <PageWrapper
       breadcrumbs={[
@@ -101,7 +104,7 @@ export const PageView = () => {
         description={'Review your codebases, monitor their status, and execute build pipelines.'}
       >
         <Resources />
-        <Tabs tabs={tabs} initialTabIdx={0} rememberLastTab id="component-page" />
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
       </Section>
     </PageWrapper>
   );

src/pages/configuration/pages/pipeline-details/page.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { PageLogicWrapper } from '../../../../components/PageLogicWrapper';
 import { DialogContextProvider } from '../../../../providers/Dialog/provider';
+import { TabsContextProvider } from '../../../../providers/Tabs/provider';
 import { PageView } from './view';
 
 export default function () {
   return (
     <PageLogicWrapper>
       <DialogContextProvider>
-        <PageView />
+        <TabsContextProvider initialTabIdx={0} rememberLastTab id="pipeline-details-page">
+          <PageView />
+        </TabsContextProvider>
       </DialogContextProvider>
     </PageLogicWrapper>
   );

src/pages/configuration/pages/pipeline-details/view.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import { LoadingWrapper } from '../../../../components/LoadingWrapper';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { Section } from '../../../../components/Section';
-import { Tabs } from '../../../../components/Tabs';
 import { PipelineKubeObject } from '../../../../k8s/groups/Tekton/Pipeline';
+import { Tabs } from '../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../providers/Tabs/hooks';
 import { routePipelineList } from '../pipeline-list/route';
 import { useTabs } from './hooks/useTabs';
 import { PipelineDetailsRouteParams } from './types';
@@ -15,6 +16,8 @@ export const PageView = () => {
 
   const tabs = useTabs({ pipeline: item });
 
+  const { activeTab, handleChangeTab } = useTabsContext();
+
   return (
     <PageWrapper
       containerMaxWidth={'xl'}
@@ -32,7 +35,7 @@ export const PageView = () => {
     >
       <Section title={name}>
         <LoadingWrapper isLoading={item === null && !error}>
-          <Tabs tabs={tabs} initialTabIdx={0} rememberLastTab id="pipeline-details-page" />
+          <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
         </LoadingWrapper>
       </Section>
     </PageWrapper>

src/pages/configuration/pages/task-details/page.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { PageLogicWrapper } from '../../../../components/PageLogicWrapper';
 import { DialogContextProvider } from '../../../../providers/Dialog/provider';
+import { TabsContextProvider } from '../../../../providers/Tabs/provider';
 import { PageView } from './view';
 
 export default function () {
   return (
     <PageLogicWrapper>
       <DialogContextProvider>
-        <PageView />
+        <TabsContextProvider initialTabIdx={0} rememberLastTab id="task-details-page">
+          <PageView />
+        </TabsContextProvider>
       </DialogContextProvider>
     </PageLogicWrapper>
   );

src/pages/configuration/pages/task-details/view.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import { LoadingWrapper } from '../../../../components/LoadingWrapper';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { Section } from '../../../../components/Section';
-import { Tabs } from '../../../../components/Tabs';
 import { TaskKubeObject } from '../../../../k8s/groups/Tekton/Task';
+import { Tabs } from '../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../providers/Tabs/hooks';
 import { routeTaskList } from '../task-list/route';
 import { useTabs } from './hooks/useTabs';
 import { TaskDetailsRouteParams } from './types';
@@ -14,6 +15,7 @@ export const PageView = () => {
   const [item, error] = TaskKubeObject.useGet(name, namespace);
 
   const tabs = useTabs({ task: item });
+  const { activeTab, handleChangeTab } = useTabsContext();
 
   return (
     <PageWrapper
@@ -32,7 +34,7 @@ export const PageView = () => {
     >
       <Section title={name}>
         <LoadingWrapper isLoading={item === null && !error}>
-          <Tabs tabs={tabs} initialTabIdx={0} rememberLastTab id="task-details-page" />
+          <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
         </LoadingWrapper>
       </Section>
     </PageWrapper>

src/pages/pipeline-details/components/Details/components/TaskRunStepWrapper/components/TaskRunStep/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tabs } from '../../../../../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../../../../../providers/Tabs/hooks';
+
+export const TaskRunStep = ({
+  tabs,
+}: {
+  tabs: { label: string; component: React.ReactNode; disabled?: boolean }[];
+}) => {
+  const { activeTab, handleChangeTab } = useTabsContext();
+
+  return <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />;
+};

src/pages/pipeline-details/components/Details/components/TaskRunStep/index.tsx → src/pages/pipeline-details/components/Details/components/TaskRunStepWrapper/index.tsx

@@ -1,20 +1,21 @@
 import { Divider, Paper, Stack, Typography } from '@mui/material';
 import React from 'react';
 import { LoadingWrapper } from '../../../../../../components/LoadingWrapper';
-import { Tabs } from '../../../../../../components/Tabs';
 import { PodKubeObject } from '../../../../../../k8s/groups/default/Pod';
 import { TaskRunKubeObjectInterface } from '../../../../../../k8s/groups/Tekton/TaskRun/types';
 import {
   getTaskRunStepReason,
   getTaskRunStepStatus,
 } from '../../../../../../k8s/groups/Tekton/TaskRun/utils/getStatus';
+import { TabsContextProvider } from '../../../../../../providers/Tabs/provider';
 import { humanize } from '../../../../../../utils/date/humanize';
 import { capitalizeFirstLetter } from '../../../../../../utils/format/capitalizeFirstLetter';
 import { StyledDetailsBody, StyledDetailsHeader } from '../../styles';
+import { TaskRunStep } from './components/TaskRunStep';
 import { useTabs } from './hooks/useTabs';
 import { TaskRunStepProps } from './types';
 
-export const TaskRunStep = ({ pipelineRunTaskData, stepName }: TaskRunStepProps) => {
+export const TaskRunStepWrapper = ({ pipelineRunTaskData, stepName }: TaskRunStepProps) => {
   const step = pipelineRunTaskData.taskRun
     ? pipelineRunTaskData.taskRun?.status?.steps?.find(
         (step: TaskRunKubeObjectInterface) => step?.name === stepName
@@ -117,7 +118,12 @@ export const TaskRunStep = ({ pipelineRunTaskData, stepName }: TaskRunStepProps)
       <Divider orientation="horizontal" />
       <StyledDetailsBody>
         <LoadingWrapper isLoading={pods === null}>
-          <Tabs tabs={tabs} initialTabIdx={initialTabIdx} />
+          <TabsContextProvider
+            id="pipeline-details-page-inner-taskrun-step"
+            initialTabIdx={initialTabIdx}
+          >
+            <TaskRunStep tabs={tabs} />
+          </TabsContextProvider>
         </LoadingWrapper>
       </StyledDetailsBody>
     </Paper>

src/pages/pipeline-details/components/Details/components/TaskRunWrapper/components/CustomTaskRun/index.tsx

@@ -2,7 +2,6 @@ import { Utils } from '@kinvolk/headlamp-plugin/lib';
 import { KubeObjectInterface } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import { Divider, Paper, Stack, Typography } from '@mui/material';
 import React from 'react';
-import { Tabs } from '../../../../../../../../components/Tabs';
 import { CRUD_TYPES } from '../../../../../../../../constants/crudTypes';
 import { useResourceCRUDMutation } from '../../../../../../../../hooks/useResourceCRUDMutation';
 import { ICONS } from '../../../../../../../../icons/iconify-icons-mapping';
@@ -13,6 +12,8 @@ import { CustomRunKubeObject } from '../../../../../../../../k8s/groups/Tekton/C
 import { TaskRunKubeObject } from '../../../../../../../../k8s/groups/Tekton/TaskRun';
 import { TASK_RUN_LABEL_SELECTOR_PIPELINE_TASK } from '../../../../../../../../k8s/groups/Tekton/TaskRun/labels';
 import { useDialogContext } from '../../../../../../../../providers/Dialog/hooks';
+import { Tabs } from '../../../../../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../../../../../providers/Tabs/hooks';
 import { humanize } from '../../../../../../../../utils/date/humanize';
 import { StyledDetailsBody, StyledDetailsHeader } from '../../../../styles';
 import { ChoiceButtonGroup } from './components/ChoiceButtonGroup';
@@ -163,6 +164,8 @@ export const CustomTaskRun = ({ pipelineRunTaskData }: CustomTaskRunProps) => {
 
   const taskDescription = pipelineRunTaskData.task?.spec?.description || '';
 
+  const { activeTab, handleChangeTab } = useTabsContext();
+
   return (
     <Paper>
       <StyledDetailsHeader>
@@ -230,7 +233,7 @@ export const CustomTaskRun = ({ pipelineRunTaskData }: CustomTaskRunProps) => {
       </StyledDetailsHeader>
       <Divider orientation="horizontal" />
       <StyledDetailsBody>
-        <Tabs tabs={tabs} initialTabIdx={0} />
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
       </StyledDetailsBody>
     </Paper>
   );

src/pages/pipeline-details/components/Details/components/TaskRunWrapper/components/TaskRun/index.tsx

@@ -1,8 +1,9 @@
 import { Divider, Paper, Stack, Typography } from '@mui/material';
 import React from 'react';
-import { Tabs } from '../../../../../../../../components/Tabs';
 import { TaskRunKubeObject } from '../../../../../../../../k8s/groups/Tekton/TaskRun';
 import { TASK_RUN_LABEL_SELECTOR_PIPELINE_TASK } from '../../../../../../../../k8s/groups/Tekton/TaskRun/labels';
+import { Tabs } from '../../../../../../../../providers/Tabs/components/Tabs';
+import { useTabsContext } from '../../../../../../../../providers/Tabs/hooks';
 import { humanize } from '../../../../../../../../utils/date/humanize';
 import { StyledDetailsBody, StyledDetailsHeader } from '../../../../styles';
 import { useTabs } from './hooks/useTabs';
@@ -30,6 +31,8 @@ export const TaskRun = ({ pipelineRunTaskData }: TaskRunProps) => {
 
   const taskDescription = pipelineRunTaskData.task?.spec?.description || '';
 
+  const { activeTab, handleChangeTab } = useTabsContext();
+
   return (
     <Paper>
       <StyledDetailsHeader>
@@ -89,7 +92,7 @@ export const TaskRun = ({ pipelineRunTaskData }: TaskRunProps) => {
       </StyledDetailsHeader>
       <Divider orientation="horizontal" />
       <StyledDetailsBody>
-        <Tabs tabs={tabs} initialTabIdx={0} />
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
       </StyledDetailsBody>
     </Paper>
   );

src/pages/pipeline-details/components/Details/components/TaskRunWrapper/index.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
+import { TabsContextProvider } from '../../../../../../providers/Tabs/provider';
 import { CustomTaskRun } from './components/CustomTaskRun';
 import { TaskRun } from './components/TaskRun';
 import { TaskRunWrapperProps } from './types';
 
 export const TaskRunWrapper = ({ pipelineRunTaskData }: TaskRunWrapperProps) => {
   const isApprovalTask = !!pipelineRunTaskData?.approvalTask;
 
-  return isApprovalTask ? (
-    <CustomTaskRun pipelineRunTaskData={pipelineRunTaskData} />
-  ) : (
-    <TaskRun pipelineRunTaskData={pipelineRunTaskData} />
+  return (
+    <TabsContextProvider id="pipeline-details-page-inner-taskrun" initialTabIdx={0}>
+      {isApprovalTask ? (
+        <CustomTaskRun pipelineRunTaskData={pipelineRunTaskData} />
+      ) : (
+        <TaskRun pipelineRunTaskData={pipelineRunTaskData} />
+      )}
+    </TabsContextProvider>
   );
 };

src/pages/pipeline-details/components/Details/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { MenuAccordion } from './components/MenuAccordion';
-import { TaskRunStep } from './components/TaskRunStep';
+import { TaskRunStepWrapper } from './components/TaskRunStepWrapper';
 import { TaskRunWrapper } from './components/TaskRunWrapper';
 
 export const Details = () => {
@@ -49,7 +49,10 @@ export const Details = () => {
       return <TaskRunWrapper pipelineRunTaskData={activePipelineRunTaskData} />;
     } else if (queryParamTaskRun && queryParamStep) {
       return (
-        <TaskRunStep pipelineRunTaskData={activePipelineRunTaskData} stepName={queryParamStep} />
+        <TaskRunStepWrapper
+          pipelineRunTaskData={activePipelineRunTaskData}
+          stepName={queryParamStep}
+        />
       );
     }
 

src/pages/pipeline-details/hooks/useTabs.tsx

@@ -1,6 +1,7 @@
 import { Box } from '@mui/material';
 import React from 'react';
 import { ViewYAML } from '../../../components/Editor';
+import { useTabsContext } from '../../../providers/Tabs/hooks';
 import { PipelineRunGraph } from '../../../widgets/PipelineRunGraph';
 import { Details } from '../components/Details';
 import { Overview } from '../components/Overview';
@@ -9,6 +10,12 @@ import { useDynamicDataContext } from '../providers/DynamicData/hooks';
 export const useTabs = () => {
   const { pipelineRun } = useDynamicDataContext();
 
+  const { handleChangeTab } = useTabsContext();
+
+  const onNodeElementLinkClick = React.useCallback(() => {
+    handleChangeTab(null, 1);
+  }, [handleChangeTab]);
+
   return React.useMemo(() => {
     return [
       {
@@ -55,10 +62,13 @@ export const useTabs = () => {
               pt: (t) => t.typography.pxToRem(24),
             }}
           >
-            <PipelineRunGraph pipelineRun={pipelineRun.data} />
+            <PipelineRunGraph
+              pipelineRun={pipelineRun.data}
+              onNodeElementLinkClick={onNodeElementLinkClick}
+            />
           </Box>
         ),
       },
     ];
-  }, [pipelineRun.data]);
+  }, [onNodeElementLinkClick, pipelineRun.data]);
 };