Add history tab to workflow page (#643)

* add history tab to workflow page

* fix linting issues

src/views/workflow-history/workflow-history.styles.ts

@@ -0,0 +1,28 @@
+import type {
+ StyletronCSSObject,
+ StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+ pageContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ eventsContainer: (theme) => ({
+ display: 'flex',
+ marginTop: theme.sizing.scale500,
+ }),
+ compactSection: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '370px',
+ },
+ timelineSection: {
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ },
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+ cssStylesObj;

src/views/workflow-history/workflow-history.tsx

@@ -0,0 +1,26 @@
+'use client';
+import React from 'react';
+
+import { HeadingXSmall } from 'baseui/typography';
+
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+
+import { cssStyles } from './workflow-history.styles';
+
+export default function WorkflowHistory() {
+ const { cls } = useStyletronClasses(cssStyles);
+
+ return (
+ <div className={cls.pageContainer}>
+ <HeadingXSmall>Workflow history</HeadingXSmall>
+ <div className={cls.eventsContainer}>
+ <section className={cls.compactSection}>
+ <p>compact</p>
+ </section>
+ <section className={cls.timelineSection}>
+ <p>timeline</p>
+ </section>
+ </div>
+ </div>
+ );
+}

src/views/workflow-page/config/workflow-page-tabs-contents-map.config.ts

@@ -1,9 +1,11 @@
+import WorkflowHistory from '@/views/workflow-history/workflow-history';
 import WorkflowSummaryTab from '@/views/workflow-summary-tab/workflow-summary-tab';
 
 import type { WorkflowPageTabsContentsMap } from '../workflow-page-tab-content/workflow-page-tab-content.types';
 
 const workflowPageTabsContentsMapConfig = {
  summary: WorkflowSummaryTab,
+ history: WorkflowHistory,
 } as const satisfies WorkflowPageTabsContentsMap;
 
 export default workflowPageTabsContentsMapConfig;

src/views/workflow-page/config/workflow-page-tabs.config.ts

@@ -1,4 +1,4 @@
-import { MdListAlt } from 'react-icons/md';
+import { MdListAlt, MdOutlineHistory } from 'react-icons/md';
 
 import type { WorkflowPageTabs } from '../workflow-page-tabs/workflow-page-tabs.types';
 
@@ -8,6 +8,11 @@ const workflowPageTabsConfig = [
  title: 'Summary',
  artwork: MdListAlt,
  },
+ {
+ key: 'history',
+ title: 'History',
+ artwork: MdOutlineHistory,
+ },
 ] as const satisfies WorkflowPageTabs;
 
 export default workflowPageTabsConfig;

src/views/workflow-summary-tab/config/workflow-summary-tab-details.config.ts

@@ -1,4 +1,4 @@
-import { Fragment, createElement } from 'react';
+import { createElement } from 'react';
 
 import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
 import getWorkflowIsCompleted from '@/views/workflow-page/helpers/get-workflow-is-completed';