workflow_detail.tsx

/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useEffect, useState } from 'react';
import { RouteComponentProps, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
import queryString from 'query-string';
import { EuiPage, EuiPageBody } from '@elastic/eui';
import { BREADCRUMBS } from '../../utils';
import { getCore } from '../../services';
import { WorkflowDetailHeader } from './components';
import {
  AppState,
  getWorkflow,
  searchModels,
  useAppDispatch,
} from '../../store';
import { ResizableWorkspace } from './workspace';
import {
  DEFAULT_NEW_WORKFLOW_NAME,
  FETCH_ALL_QUERY_BODY,
  NEW_WORKFLOW_ID_URL,
} from '../../../common';
import { Resources } from './resources';

// styling
import './workflow-detail-styles.scss';

export interface WorkflowDetailRouterProps {
  workflowId: string;
}

interface WorkflowDetailProps
  extends RouteComponentProps<WorkflowDetailRouterProps> {}

enum WORKFLOW_DETAILS_TAB {
  EDITOR = 'editor',
  // TODO: temporarily adding a resources tab until UX is finalized.
  // This gives clarity into what has been done on the cluster on behalf
  // of the frontend provisioning workflows.
  RESOURCES = 'resources',
}

const ACTIVE_TAB_PARAM = 'tab';

function replaceActiveTab(activeTab: string, props: WorkflowDetailProps) {
  props.history.replace({
    ...history,
    search: queryString.stringify({
      [ACTIVE_TAB_PARAM]: activeTab,
    }),
  });
}

/**
 * The workflow details page. This is where users will configure, create, and
 * test their created workflows. Additionally, can be used to load existing workflows
 * to view details and/or make changes to them.
 * New, unsaved workflows are cached in the redux store and displayed here.
 */

export function WorkflowDetail(props: WorkflowDetailProps) {
  const dispatch = useAppDispatch();
  const { workflows, cachedWorkflow, errorMessage } = useSelector(
    (state: AppState) => state.workflows
  );

  // selected workflow state
  const workflowId = props.match?.params?.workflowId;
  const isNewWorkflow = workflowId === NEW_WORKFLOW_ID_URL;
  const workflow = isNewWorkflow ? cachedWorkflow : workflows[workflowId];
  const workflowName = workflow
    ? workflow.name
    : isNewWorkflow && !workflow
    ? DEFAULT_NEW_WORKFLOW_NAME
    : '';

  // tab state
  const tabFromUrl = queryString.parse(useLocation().search)[
    ACTIVE_TAB_PARAM
  ] as WORKFLOW_DETAILS_TAB;
  const [selectedTabId, setSelectedTabId] = useState<WORKFLOW_DETAILS_TAB>(
    tabFromUrl
  );

  // Default to editor tab if there is none or invalid tab ID specified via url.
  useEffect(() => {
    if (
      !selectedTabId ||
      !Object.values(WORKFLOW_DETAILS_TAB).includes(selectedTabId)
    ) {
      setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
      replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
    }
  }, []);

  useEffect(() => {
    getCore().chrome.setBreadcrumbs([
      BREADCRUMBS.FLOW_FRAMEWORK,
      BREADCRUMBS.WORKFLOWS,
      { text: workflowName },
    ]);
  });

  // On initial load:
  // - fetch workflow, if there is an existing workflow ID
  // - fetch available models as their IDs may be used when building flows
  useEffect(() => {
    if (!isNewWorkflow) {
      dispatch(getWorkflow(workflowId));
    }
    dispatch(searchModels(FETCH_ALL_QUERY_BODY));
  }, []);

  // Show a toast if an error message exists in state
  useEffect(() => {
    if (errorMessage) {
      console.error(errorMessage);
      getCore().notifications.toasts.addDanger(errorMessage);
    }
  }, [errorMessage]);

  const tabs = [
    {
      id: WORKFLOW_DETAILS_TAB.EDITOR,
      label: 'Editor',
      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.EDITOR,
      onClick: () => {
        setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
        replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
      },
    },
    {
      id: WORKFLOW_DETAILS_TAB.RESOURCES,
      label: 'Resources',
      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES,
      onClick: () => {
        setSelectedTabId(WORKFLOW_DETAILS_TAB.RESOURCES);
        replaceActiveTab(WORKFLOW_DETAILS_TAB.RESOURCES, props);
      },
    },
  ];

  return (
    <ReactFlowProvider>
      <EuiPage>
        <EuiPageBody className="workflow-detail">
          <WorkflowDetailHeader
            workflow={workflow}
            isNewWorkflow={isNewWorkflow}
            tabs={tabs}
          />
          {selectedTabId === WORKFLOW_DETAILS_TAB.EDITOR && (
            <ReactFlowProvider>
              <ResizableWorkspace
                isNewWorkflow={isNewWorkflow}
                workflow={workflow}
              />
            </ReactFlowProvider>
          )}
          {selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES && (
            <Resources workflow={workflow} />
          )}
        </EuiPageBody>
      </EuiPage>
    </ReactFlowProvider>
  );
}