feat: create workflow configuration main column with two placeholder steps (#433) (#434)

Author: frano-m

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/GTFStep/gtfStep.tsx

@@ -0,0 +1,24 @@
+import { StepContent } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/components/StepContent/stepContent";
+import { StepLabel } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/components/StepLabel/stepLabel";
+import { Icon } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/icon";
+import { LOREM_IPSUM } from "@databiosphere/findable-ui/lib/storybook/loremIpsum";
+import { StepProps } from "../types";
+import { Step } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/step";
+
+export const GTFStep = ({
+  active,
+  completed,
+  description,
+  index,
+  label,
+}: StepProps): JSX.Element => {
+  return (
+    <Step active={active} completed={completed} index={index}>
+      <StepLabel>
+        {label}
+        <Icon slotProps={{ tooltip: { title: description } }} />
+      </StepLabel>
+      <StepContent>{LOREM_IPSUM.LONG}</StepContent>
+    </Step>
+  );
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/GTFStep/step.ts

@@ -0,0 +1,9 @@
+import { StepConfig } from "../types";
+import { GTFStep } from "./gtfStep";
+
+export const STEP: StepConfig = {
+  Step: GTFStep,
+  description: "Select the GTF files for the workflow",
+  key: "gtf-files",
+  label: "GTF Files",
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/ReferenceAssemblyStep/referenceAssemblyStep.tsx

@@ -0,0 +1,18 @@
+import { Step } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/step";
+import { StepContent } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/components/StepContent/stepContent";
+import { StepLabel } from "@databiosphere/findable-ui/lib/components/Stepper/components/Step/components/StepLabel/stepLabel";
+import { StepProps } from "../types";
+
+export const ReferenceAssemblyStep = ({
+  active,
+  completed,
+  index,
+  label,
+}: StepProps): JSX.Element => {
+  return (
+    <Step active={active} completed={completed} index={index}>
+      <StepLabel>{label}</StepLabel>
+      <StepContent>None</StepContent>
+    </Step>
+  );
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/ReferenceAssemblyStep/step.ts

@@ -0,0 +1,9 @@
+import { StepConfig } from "../types";
+import { ReferenceAssemblyStep } from "./referenceAssemblyStep";
+
+export const STEP: StepConfig = {
+  Step: ReferenceAssemblyStep,
+  disabled: true,
+  key: "reference-assembly",
+  label: "Reference Assembly",
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/types.ts

@@ -0,0 +1,16 @@
+import { ComponentType, ReactNode } from "react";
+import { StepProps as MStepProps } from "@mui/material";
+
+export interface StepConfig {
+  description?: ReactNode;
+  disabled?: boolean;
+  key: string;
+  label: string;
+  Step: ComponentType<StepProps>;
+}
+
+export interface StepProps
+  extends Omit<StepConfig, "Step" | "key">,
+    Pick<MStepProps, "active" | "completed" | "index" | "last"> {
+  configKey: string;
+}

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/constants.ts

@@ -0,0 +1,12 @@
+import { StepperProps } from "@mui/material";
+import { STEPPER_PROPS as MUI_STEPPER_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/stepper";
+import { StepConfig } from "./components/Step/types";
+import { STEP as REFERENCE_ASSEMBLY_STEP } from "./components/Step/ReferenceAssemblyStep/step";
+import { STEP as GTF_STEP } from "./components/Step/GTFStep/step";
+
+export const STEPPER_PROPS: StepperProps = {
+  connector: null,
+  orientation: MUI_STEPPER_PROPS.ORIENTATION.VERTICAL,
+};
+
+export const STEPS: StepConfig[] = [REFERENCE_ASSEMBLY_STEP, GTF_STEP];

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/stepper.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { Stepper } from "@mui/material";
+
+export const StyledStepper = styled(Stepper)`
+  gap: 16px;
+`;

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/stepper.tsx

@@ -0,0 +1,25 @@
+import { STEPPER_PROPS, STEPS } from "./constants";
+import { StyledStepper } from "./stepper.styles";
+import { Props } from "./types";
+
+export const Stepper = (props: Props): JSX.Element => {
+  const activeStep = 1;
+  return (
+    <StyledStepper activeStep={activeStep} {...STEPPER_PROPS}>
+      {STEPS.map(({ key, Step, ...stepProps }, i) => {
+        const active = activeStep === i;
+        const completed = activeStep > i;
+        return (
+          <Step
+            key={key}
+            active={active}
+            completed={completed}
+            configKey={key}
+            {...stepProps}
+            {...props}
+          />
+        );
+      })}
+    </StyledStepper>
+  );
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/types.ts

@@ -0,0 +1,9 @@
+import {
+  BRCDataCatalogGenome,
+  Workflow,
+} from "../../../../../../../../apis/catalog/brc-analytics-catalog/common/entities";
+
+export interface Props {
+  genome: BRCDataCatalogGenome;
+  workflow: Workflow;
+}

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/main.tsx

@@ -0,0 +1,6 @@
+import { Props } from "./types";
+import { Stepper } from "./components/Stepper/stepper";
+
+export const Main = ({ genome, workflow }: Props): JSX.Element => {
+  return <Stepper genome={genome} workflow={workflow} />;
+};