fix: changed design of Input Schema to improve usability (#8720)

* Added description and label for tweaks component

* Removed unused div

* Added edit node button size

* Added placeholder to parameter render component and reduced disabled opacity

* Changed texts and classes

* reduced opacity

---------

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

src/frontend/src/components/core/codeTabsComponent/components/tweaksComponent/index.tsx

@@ -4,13 +4,9 @@ import { TweakComponent } from "../tweakComponent";
 
 export function TweaksComponent({ open }: { open: boolean }) {
   const nodes = useTweaksStore((state) => state.nodes);
-  return (
+  return nodes?.map((node: AllNodeType, i) => (
-    <div className="h-full w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll">
+    <div className="px-3" key={i}>
-      {nodes?.map((node: AllNodeType, i) => (
+      <TweakComponent open={open} node={node} />
-        <div className="px-3" key={i}>
-          <TweakComponent open={open} node={node} />
-        </div>
-      ))}
     </div>
-  );
+  ));
 }

src/frontend/src/components/core/parameterRenderComponent/components/sortableListComponent/index.tsx

@@ -79,6 +79,7 @@ const SortableListItem = memo(
 const SortableListComponent = ({
   tooltip = "",
   name,
+  editNode = false,
   helperText = "",
   helperMetadata = { icon: undefined, variant: "muted-foreground" },
   options = [],
@@ -139,10 +140,18 @@ const SortableListComponent = ({
             size="xs"
             role="combobox"
             onClick={handleOpenListSelectionDialog}
-            className="dropdown-component-outline input-edit-node w-full py-2"
+            className={cn(
+              "dropdown-component-outline input-edit-node w-full",
+              editNode ? "py-1" : "py-2",
+            )}
             data-testid="button_open_list_selection"
           >
-            <div className={cn("flex items-center text-sm font-semibold")}>
+            <div
+              className={cn(
+                "flex items-center",
+                editNode ? "text-xs" : "text-sm",
+              )}
+            >
               {placeholder}
             </div>
           </Button>
@@ -182,6 +191,7 @@ const SortableListComponent = ({
         open={open}
         onClose={handleCloseListSelectionDialog}
         searchCategories={searchCategory}
+        editNode={editNode}
         setSelectedList={setListDataHandler}
         selectedList={listData}
         options={options}

src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/tableNodeCellRender/index.tsx

@@ -57,12 +57,13 @@ export default function TableNodeCellRender({
       <div
         className={cn(
           "group mx-auto flex h-full max-h-48 w-[300px] items-center justify-center overflow-auto px-1 py-2.5 custom-scroll",
-          isTweaks && "pointer-events-none opacity-70",
+          isTweaks && "pointer-events-none opacity-30",
         )}
       >
         <ParameterRenderComponent
           nodeId={nodeId}
           handleOnNewValue={handleOnNewValue}
+          placeholder={parameter.placeholder}
           templateData={parameter}
           name={parameterId}
           templateValue={parameter.value}

src/frontend/src/modals/apiModal/index.tsx

@@ -216,8 +216,17 @@ export default function ApiModal({
               />
             </Label>
           )}
-          <div className="h-full w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll">
+          <div className="flex flex-1 flex-col gap-2 overflow-hidden">
-            <TweaksComponent open={openTweaks} />
+            <div className="flex flex-col gap-1">
+              <span className="shrink-0 text-sm font-medium">Expose API</span>
+              <span className="text-mmd text-muted-foreground">
+                Select which component fields to expose as inputs in this flow's
+                API schema.
+              </span>
+            </div>
+            <div className="min-h-0 w-full flex-1 flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll">
+              <TweaksComponent open={openTweaks} />
+            </div>
           </div>
         </BaseModal.Content>
       </BaseModal>

src/frontend/src/modals/editNodeModal/hooks/use-column-defs.ts

@@ -26,7 +26,7 @@ const useColumnDefs = (
         autoHeight: true,
         flex: 1,
         resizable: false,
-        cellClass: "no-border cursor-default",
+        cellClass: "no-border cursor-default text-muted-foreground !py-1",
       },
       {
         headerName: "Description",
@@ -36,10 +36,10 @@ const useColumnDefs = (
         autoHeight: true,
         flex: 2,
         resizable: false,
-        cellClass: "no-border cursor-default",
+        cellClass: "no-border cursor-default text-muted-foreground !py-1",
       },
       {
-        headerName: "Value",
+        headerName: isTweaks ? "Current Value" : "Value",
         field: "value",
         cellRenderer: TableNodeCellRender,
         cellStyle: {
@@ -61,12 +61,12 @@ const useColumnDefs = (
         autoHeight: true,
         flex: 1,
         resizable: false,
-        cellClass: "no-border cursor-default",
+        cellClass: "no-border cursor-default !py-1",
       },
     ];
     if (!hideVisibility) {
-      colDefs.push({
+      colDefs.unshift({
-        headerName: isTweaks ? "Enable Input" : "Show",
+        headerName: isTweaks ? "Expose Input" : "Show",
         field: "advanced",
         cellRenderer: TableAdvancedToggleCellRender,
         valueGetter: (params: ValueGetterParams) => {
@@ -80,7 +80,7 @@ const useColumnDefs = (
         maxWidth: !isTweaks ? 80 : 120,
         minWidth: !isTweaks ? 80 : 120,
         resizable: false,
-        cellClass: "no-border cursor-default",
+        cellClass: "no-border cursor-default !py-1",
       });
     }
     return colDefs;