Merge pull request #437 from bento-platform/style/drop-box-json-input

refact: new drop box JSON select form input + fixed JSON type

src/components/common/JsonView.tsx

@@ -1,6 +1,6 @@
 import ReactJson from "react18-json-view";
 import type { Collapsed } from "react18-json-view/dist/types";
-import type { JSONType } from "ajv";
+import type { JSONType } from "@/types/json";
 
 type JsonViewProps = {
   src: JSONType | JSONType[] | Record<string, JSONType>;

src/components/datasets/DatasetForm.js

@@ -10,9 +10,9 @@ import { DATA_USE_PROP_TYPE_SHAPE, INITIAL_DATA_USE_VALUE } from "@/duo";
 import { useDatsValidator } from "@/hooks";
 import { useDiscoveryValidator } from "@/modules/metadata/hooks";
 import { simpleDeepCopy } from "@/utils/misc";
-import { DropBoxJsonSelect } from "../manager/DropBoxTreeSelect";
+import DropBoxJsonSelect from "../manager/dropBox/DropBoxJsonSelect";
 
-const DatasetForm = ({ initialValue, form, updateMode }) => {
+const DatasetForm = ({ initialValue, form }) => {
   const discoveryValidator = useDiscoveryValidator();
   const datsValidator = useDatsValidator();
   if (initialValue && !initialValue?.data_use) {
@@ -29,28 +29,12 @@ const DatasetForm = ({ initialValue, form, updateMode }) => {
       <Item label="Contact Information" name="contact_info">
         <Input.TextArea placeholder={"Name\[email protected]"} />
       </Item>
-      <DropBoxJsonSelect
-        name="dats_file"
-        initialValue={initialValue?.dats_file}
-        labels={{
-          parent: "DATS",
-          select: "DATS file",
-          defaultContent: "DATS data",
-          updatedContent: updateMode ? "New DATS data" : "DATS data",
-        }}
-        rules={[{ required: true }, { validator: datsValidator }]}
-      />
-      <DropBoxJsonSelect
-        name="discovery"
-        initialValue={initialValue?.discovery}
-        labels={{
-          parent: "Public Discovery Configuration",
-          select: "Config file",
-          defaultContent: "Discovery config",
-          updatedContent: updateMode ? "New discovery config" : "Discovery config",
-        }}
-        rules={[{ validator: discoveryValidator }]}
-      />
+      <Item label="DATS File" name="dats_file" rules={[{ required: true }, { validator: datsValidator }]}>
+        <DropBoxJsonSelect initialValue={initialValue?.dats_file} />
+      </Item>
+      <Item label="Discovery Configuration" name="discovery" rules={[{ validator: discoveryValidator }]}>
+        <DropBoxJsonSelect initialValue={initialValue?.discovery} />
+      </Item>
       <Item
         label="Consent Code and Data Use Requirements"
         name="data_use"
@@ -81,7 +65,6 @@ DatasetForm.propTypes = {
     discovery: PropTypes.object,
   }),
   form: PropTypes.object,
-  updateMode: PropTypes.bool,
 };
 
 export default DatasetForm;

src/components/display/FileDisplay.tsx

@@ -4,8 +4,6 @@ import { useAuthorizationHeader } from "bento-auth-js";
 
 import fetch from "cross-fetch";
 
-import type { JSONType } from "ajv";
-
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import { a11yLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
@@ -23,6 +21,8 @@ import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
 
+import type { JSONType } from "@/types/json";
+
 import AudioDisplay from "./AudioDisplay";
 import CsvDisplay from "./CsvDisplay";
 import ImageBlobDisplay from "./ImageBlobDisplay";

src/components/display/JsonDisplay.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import type { JSONType } from "ajv";
 import { Collapse, Select, Typography } from "antd";
 
 import JsonView from "@/components/common/JsonView";
 import MonospaceText from "@/components/common/MonospaceText";
+import type { JSONType } from "@/types/json";
 
 const DEFAULT_JSON_VIEW_OPTIONS = {
   collapsed: true,
@@ -98,12 +98,17 @@ const JsonObjectDisplay = ({ doc }: JsonObjectDisplayProps) => {
 type JsonDisplayProps = {
   jsonSrc?: JSONType;
   showObjectWithReactJson?: boolean;
+  showArrayTitle?: boolean;
 };
 
-const JsonDisplay = ({ jsonSrc, showObjectWithReactJson }: JsonDisplayProps) => {
+const JsonDisplay = ({ jsonSrc, showObjectWithReactJson, showArrayTitle }: JsonDisplayProps) => {
   if (Array.isArray(jsonSrc)) {
     // Special display for array nav
-    return <JsonArrayDisplay doc={jsonSrc || []} standalone />;
+    return <JsonArrayDisplay doc={jsonSrc || []} standalone={showArrayTitle ?? true} />;
+  }
+
+  if (jsonSrc === null) {
+    return <MonospaceText>null</MonospaceText>;
   }
 
   if (typeof jsonSrc === "object") {

src/components/manager/ManagerDropBoxContent.js

@@ -36,7 +36,7 @@ import { LAYOUT_CONTENT_STYLE } from "@/styles/layoutContent";
 
 import ActionContainer from "./ActionContainer";
 import DownloadButton from "../common/DownloadButton";
-import DropBoxTreeSelect from "./DropBoxTreeSelect";
+import DropBoxTreeSelect from "./dropBox/DropBoxTreeSelect";
 import FileModal from "../display/FileModal";
 import ForbiddenContent from "../ForbiddenContent";
 

src/components/manager/RunSetupInputForm.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import Handlebars from "handlebars";
 
 import { Button, Checkbox, Form, Input, Select, Spin } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 import { FORM_LABEL_COL, FORM_WRAPPER_COL, FORM_BUTTON_COL } from "./workflowCommon";
 
@@ -13,9 +14,8 @@ import { workflowPropTypesShape } from "@/propTypes";
 import { testFileAgainstPattern } from "@/utils/files";
 import { nop } from "@/utils/misc";
 
+import DropBoxTreeSelect from "./dropBox/DropBoxTreeSelect";
 import DatasetTreeSelect, { ID_FORMAT_PROJECT_DATASET } from "./DatasetTreeSelect";
-import DropBoxTreeSelect from "./DropBoxTreeSelect";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 const EnumSelect = forwardRef(({ mode, onChange, values: valuesConfig, value }, ref) => {
   const isUrl = typeof valuesConfig === "string";

src/components/manager/dropBox/DropBoxJsonSelect.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { Radio } from "antd";
+
+import { BENTO_DROP_BOX_FS_BASE_PATH } from "@/config";
+import { useDropBoxJsonContent } from "@/modules/dropBox/hooks";
+import { dropBoxTreeNodeEnabledJson } from "@/utils/files";
+
+import DropBoxTreeSelect from "./DropBoxTreeSelect";
+import JsonDisplay from "@/components/display/JsonDisplay";
+import type { JSONType } from "@/types/json";
+
+const InnerDropBoxJsonSelect = ({
+  selectedFile,
+  setSelectedFile,
+}: {
+  selectedFile?: string;
+  setSelectedFile: (x: string) => void;
+}) => {
+  return (
+    <DropBoxTreeSelect
+      basePrefix={BENTO_DROP_BOX_FS_BASE_PATH}
+      multiple={false}
+      nodeEnabled={dropBoxTreeNodeEnabledJson}
+      allowClear={true}
+      value={selectedFile}
+      onChange={(v) => setSelectedFile(v)}
+    />
+  );
+};
+
+export type DropBoxJsonSelectProps = {
+  initialValue?: JSONType;
+  value?: JSONType;
+  onChange?: (x: JSONType) => void;
+};
+
+/** A form input component for DropBox JSON file selection. */
+const DropBoxJsonSelect = ({ initialValue, onChange }: DropBoxJsonSelectProps) => {
+  const editing = initialValue !== undefined;
+
+  const [radioValue, setRadioValue] = useState<"existing" | "new">(editing ? "existing" : "new");
+  const [selectedFile, setSelectedFile] = useState<string | undefined>(undefined);
+
+  const currentFieldData = useDropBoxJsonContent(selectedFile, null);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(radioValue === "new" ? currentFieldData : initialValue ?? null);
+    }
+  }, [currentFieldData, initialValue, onChange, radioValue]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      {editing && (
+        <Radio.Group value={radioValue} onChange={(e) => setRadioValue(e.target.value)}>
+          <Radio value="existing">Existing value</Radio>
+          <Radio value="new">New value from file</Radio>
+        </Radio.Group>
+      )}
+
+      {radioValue === "new" && <InnerDropBoxJsonSelect selectedFile={selectedFile} setSelectedFile={setSelectedFile} />}
+
+      {(radioValue !== "new" || selectedFile) && (
+        <JsonDisplay
+          showObjectWithReactJson={true}
+          jsonSrc={radioValue === "new" ? currentFieldData : initialValue}
+          showArrayTitle={false}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DropBoxJsonSelect;