feat: create workflow configuration side column (#431) (#432)

* feat: introduce workflow configuration page (#422)

* feat: create workflow configuration side column (#431)

* fix: button prop import (#431)

---------

Co-authored-by: Fran McDade <[email protected]>

Author: frano-m

app/components/Entity/components/ConfigureWorkflowInputs/components/SideColumn/sideColumn.tsx

@@ -0,0 +1,27 @@
+import {
+  FluidPaper,
+  GridPaper,
+} from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import { CollapsableSection } from "@databiosphere/findable-ui/lib/components/common/Section/components/CollapsableSection/collapsableSection";
+import { KeyValuePairs } from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/keyValuePairs";
+import { Props } from "./types";
+import {
+  buildGenomeDetails,
+  buildWorkflowDetails,
+} from "../../../../../../viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders";
+
+export const SideColumn = ({ genome, workflow }: Props): JSX.Element => {
+  return (
+    <FluidPaper>
+      <GridPaper>
+        <CollapsableSection title="Configuration">None</CollapsableSection>
+        <CollapsableSection title="Workflow Details">
+          <KeyValuePairs {...buildWorkflowDetails(workflow)} />
+        </CollapsableSection>
+        <CollapsableSection title="Assembly Details">
+          <KeyValuePairs {...buildGenomeDetails(genome)} />
+        </CollapsableSection>
+      </GridPaper>
+    </FluidPaper>
+  );
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/SideColumn/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/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts

@@ -8,6 +8,7 @@ import { ROUTES } from "../../../../../routes/constants";
 import {
   BRCDataCatalogGenome,
   BRCDataCatalogOrganism,
+  Workflow,
 } from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
 import * as C from "../../../../components";
 import {
@@ -562,7 +563,7 @@ export const buildGenomeDetails = (
   );
   return {
     KeyElType: C.KeyElType,
-    KeyValuesElType: (props) => C.Stack({ gap: 4, ...props }),
+    KeyValuesElType: (props) => C.Stack({ ...props, gap: 4 }),
     ValueElType: C.ValueElType,
     keyValuePairs,
   };
@@ -685,6 +686,25 @@ function buildOrganismGenomesTableColumns(): ColumnDef<BRCDataCatalogGenome>[] {
   ];
 }
 
+/**
+ * Build props for the workflow details KeyValuePairs component.
+ * @param workflow - Workflow.
+ * @returns Props to be used for the KeyValuePairs component.
+ */
+export const buildWorkflowDetails = (
+  workflow: Workflow
+): ComponentProps<typeof C.KeyValuePairs> => {
+  const keyValuePairs = new Map<Key, Value>();
+  keyValuePairs.set("Workflow", workflow.workflowName);
+  keyValuePairs.set("Description", workflow.workflowDescription);
+  return {
+    KeyElType: C.KeyElType,
+    KeyValuesElType: (props) => C.Stack({ ...props, gap: 4 }),
+    ValueElType: C.ValueElType,
+    keyValuePairs,
+  };
+};
+
 /**
  * Get the genome entity breadcrumbs.
  * @param genome - Genome entity.

app/views/WorkflowInputsView/workflowInputsView.tsx

@@ -1,9 +1,14 @@
 import { Detail } from "@databiosphere/findable-ui/lib/components/Detail/detail";
 import { Props } from "./types";
 import { Top } from "../../components/Entity/components/ConfigureWorkflowInputs/components/Top/top";
+import { SideColumn } from "../../components/Entity/components/ConfigureWorkflowInputs/components/SideColumn/sideColumn";
 
 export const WorkflowInputsView = (props: Props): JSX.Element => {
   return (
-    <Detail mainColumn={null} sideColumn={null} top={<Top {...props} />} />
+    <Detail
+      mainColumn={null}
+      sideColumn={<SideColumn {...props} />}
+      top={<Top {...props} />}
+    />
   );
 };