Update header to show last updated and close button (#190)

Signed-off-by: Tyler Ohlsen <[email protected]>
(cherry picked from commit b85f4a7)

public/pages/workflow_detail/components/header.tsx

@@ -4,32 +4,46 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   EuiPageHeader,
-  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import {
   DEFAULT_NEW_WORKFLOW_STATE,
   WORKFLOW_STATE,
   Workflow,
+  toFormattedDate,
 } from '../../../../common';
+import { APP_PATH } from '../../../utils';
 
 interface WorkflowDetailHeaderProps {
   workflow?: Workflow;
 }
 
 export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
+  const history = useHistory();
   // workflow state
   const [workflowName, setWorkflowName] = useState<string>('');
   const [workflowState, setWorkflowState] = useState<WORKFLOW_STATE>('');
+  const [workflowLastUpdated, setWorkflowLastUpdated] = useState<string>('');
 
   useEffect(() => {
     if (props.workflow) {
       setWorkflowName(props.workflow.name);
       setWorkflowState(props.workflow.state || DEFAULT_NEW_WORKFLOW_STATE);
+      try {
+        const formattedDate = toFormattedDate(
+          // @ts-ignore
+          props.workflow.lastUpdated
+        ).toString();
+        setWorkflowLastUpdated(formattedDate);
+      } catch (err) {
+        setWorkflowLastUpdated('');
+      }
     }
   }, [props.workflow]);
 
@@ -45,10 +59,18 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
         </EuiFlexGroup>
       }
       rightSideItems={[
-        // TODO: implement export functionality
-        <EuiButton fill={false} style={{ marginTop: '8px' }} onClick={() => {}}>
-          Export
-        </EuiButton>,
+        <EuiButtonEmpty
+          style={{ marginTop: '8px' }}
+          onClick={() => {
+            // TODO: add lightweight save here when available
+            history.replace(APP_PATH.WORKFLOWS);
+          }}
+        >
+          Close
+        </EuiButtonEmpty>,
+        <EuiText style={{ marginTop: '16px' }} color="subdued" size="s">
+          {`Last updated: ${workflowLastUpdated}`}
+        </EuiText>,
       ]}
       bottomBorder={false}
     />