Support configuring column data type

src/components/molecules/InputConfigListItem.stories.tsx

@@ -26,5 +26,7 @@ Default.args = {
     display_name: "display_name",
     necessity: "recommended" as const,
     is_secret: false,
+    dtype: "string",
+    aggregation: "first",
   },
 };

src/components/molecules/InputConfigListItem.tsx

@@ -6,12 +6,7 @@ import IconButton from "@mui/material/IconButton";
 import React, { ReactNode } from "react";
 import { DatabaseColumnsConfigType } from "utils";
 
-export type ValueType = Required<
-  Pick<
-    DatabaseColumnsConfigType[number],
-    "display_name" | "name" | "necessity" | "is_secret"
-  >
->;
+export type ValueType = DatabaseColumnsConfigType[number];
 
 export type InputConfigListItemPresentationProps = InputConfigListItemProps;
 export type InputConfigListItemProps = {

src/components/organisms/DatabaseConfigModal/InputFieldsConfigBody.stories.tsx

@@ -29,13 +29,17 @@ export const Presentation = (): JSX.Element => (
         name: "Test1",
         necessity: "required",
         is_secret: false,
+        dtype: "string",
+        aggregation: "first",
       },
       {
         order_of_input: 2,
         display_name: "test2",
         name: "Test2",
         necessity: "optional",
         is_secret: true,
+        dtype: "string",
+        aggregation: "first",
       },
     ]}
     nonInputColumns={[]}

src/components/organisms/DatabaseConfigModal/InputFieldsConfigBody.tsx

@@ -31,9 +31,8 @@ export const InputFieldsConfigBodyPresentation = ({
 };
 
 export const InputFieldsConfigBody = (): JSX.Element => {
-  const [databaseConfig, setDatabaseConfig] = useRecoilState(
-    databaseConfigState
-  );
+  const [databaseConfig, setDatabaseConfig] =
+    useRecoilState(databaseConfigState);
 
   if (typeof databaseConfig === "undefined") {
     console.error("database config should not be undefined!!");
@@ -42,47 +41,34 @@ export const InputFieldsConfigBody = (): JSX.Element => {
 
   const inputColumns =
     databaseConfig?.columns.map((column) => ({
-      name: column.name,
-      display_name: column.display_name,
+      ...column,
       necessity: column.necessity || "unnecessary",
       is_secret: column.is_secret || false,
-      order_of_input: column.order_of_input,
     })) || [];
 
-  const onChangeInputColumns: InputFieldsConfigBodyPresentationProps["onChangeInputColumns"] = (
-    newInputColumns
-  ) => {
-    if (databaseConfig) {
-      const newDatabaseConfig = produce(databaseConfig, (draft) => {
-        // update existing columns
-        draft.columns = databaseConfig.columns.map((oldColumn) => {
-          const newColumn = newInputColumns.find(
-            (column) => column.name === oldColumn.name
-          );
-          return { ...oldColumn, ...newColumn };
-        });
-        // add new columns
-        const addedColumns = newInputColumns
-          .filter((column) => {
+  const onChangeInputColumns: InputFieldsConfigBodyPresentationProps["onChangeInputColumns"] =
+    (newInputColumns) => {
+      if (databaseConfig) {
+        const newDatabaseConfig = produce(databaseConfig, (draft) => {
+          // update existing columns
+          draft.columns = databaseConfig.columns.map((oldColumn) => {
+            const newColumn = newInputColumns.find(
+              (column) => column.name === oldColumn.name
+            );
+            return { ...oldColumn, ...newColumn };
+          });
+          // add new columns
+          const addedColumns = newInputColumns.filter((column) => {
             const existingNames = databaseConfig.columns.map(
               (column) => column.name
             );
             return !existingNames.includes(column.name);
-          })
-          .map((column) => ({
-            name: column.name,
-            display_name: column.display_name,
-            necessity: column.necessity,
-            is_secret: column.is_secret,
-            order_of_input: column.order_of_input,
-            dtype: "string" as const,
-            aggregation: "first" as const,
-          }));
-        draft.columns = draft.columns.concat(addedColumns);
-      });
-      setDatabaseConfig(newDatabaseConfig);
-    }
-  };
+          });
+          draft.columns = draft.columns.concat(addedColumns);
+        });
+        setDatabaseConfig(newDatabaseConfig);
+      }
+    };
 
   const nonInputColumns = (databaseConfig?.columns
     .filter(

src/components/organisms/FileEditModal.tsx

@@ -39,10 +39,10 @@ export const FileEditModal = ({
   const { getAccessTokenSilently: getAccessToken } = useAuth0();
   const [error, setError] = useState<ErrorMessageProps | undefined>(undefined);
 
-  const {
-    data: listFilesRes,
-    mutate: listFilesMutate,
-  } = useListFiles(getAccessToken, { databaseId, recordId });
+  const { data: listFilesRes, mutate: listFilesMutate } = useListFiles(
+    getAccessToken,
+    { databaseId, recordId }
+  );
   const {
     data: getFileRes,
     error: getFileError,
@@ -59,7 +59,7 @@ export const FileEditModal = ({
     }
   );
 
-  const fields: MetadataEditModalProps["fields"] = useMemo(
+  const fields = useMemo(
     () =>
       getConfigRes?.columns
         .filter(
@@ -69,19 +69,17 @@ export const FileEditModal = ({
             editableColumnDtype.includes(column.dtype)
         )
         .map((column) => ({
-          name: column.name,
-          display_name: column.display_name,
           necessity: column.necessity || "unnecessary",
+          ...column,
         }))
         .sort(compInputFields) || [],
     [getConfigRes]
   );
   const fetchError = getFileError || getConfigError;
   useEffect(() => {
     if (fetchError) {
-      const { reason, instruction } = extractErrorMessageFromFetchError(
-        fetchError
-      );
+      const { reason, instruction } =
+        extractErrorMessageFromFetchError(fetchError);
       setError({ reason, instruction });
     } else {
       setError(undefined);
@@ -100,9 +98,8 @@ export const FileEditModal = ({
     );
 
     if (saveFileError) {
-      const { reason, instruction } = extractErrorMessageFromFetchError(
-        saveFileError
-      );
+      const { reason, instruction } =
+        extractErrorMessageFromFetchError(saveFileError);
       setError({ reason, instruction });
       return false;
     }

src/components/organisms/InputConfigList.stories.tsx

@@ -19,13 +19,17 @@ Default.args = {
       necessity: "required",
       order_of_input: 1,
       is_secret: false,
+      dtype: "string",
+      aggregation: "first",
     },
     {
       name: "test2",
       display_name: "Test2",
       necessity: "optional",
       order_of_input: 0,
       is_secret: true,
+      dtype: "string",
+      aggregation: "first",
     },
   ],
   onChange: (newValue) =>

src/components/organisms/InputConfigList.tsx

@@ -25,7 +25,7 @@ import {
 } from "utils";
 
 export type ValueType = (InputConfigListItemProps["value"] & {
-  order_of_input: DatabaseColumnsConfigType[number]["order_of_input"];
+  order_of_input?: DatabaseColumnsConfigType[number]["order_of_input"];
 })[];
 
 export type InputConfigListPresentationProps = {
@@ -188,7 +188,14 @@ export const InputConfigList = ({
                   }
               : prevColumn
           )
-        : [...value, { ...newColumn, order_of_input: order.length }]
+        : [
+            ...value,
+            {
+              ...newColumn,
+              order_of_input: order.length,
+              aggregation: "first" as const,
+            },
+          ]
     );
     setRestColumns((prev) => {
       if (prev) {

src/components/organisms/InputConfigListItemModal.stories.tsx

@@ -2,7 +2,6 @@ import { Story } from "@storybook/react";
 import {
   InputConfigListItemModal,
   InputConfigListItemModalProps,
-  NewColumnType,
 } from "./InputConfigListItemModal";
 import { CONST_STORY_BOOK } from "test-utils";
 
@@ -18,8 +17,7 @@ const Template: Story<InputConfigListItemModalProps> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   open: true,
-  onSave: (newConfig: NewColumnType) =>
-    window.alert(`save! ${JSON.stringify(newConfig)}`),
+  onSave: (newConfig) => window.alert(`save! ${JSON.stringify(newConfig)}`),
   options: [
     { name: "test1", display_name: "Test1" },
     { name: "test2", display_name: "Test2" },
@@ -34,8 +32,7 @@ Default.parameters = { ...CONST_STORY_BOOK.PARAM_SKIP_VISUAL_REGRESSION_TEST };
 export const WithInitialData = Template.bind({});
 WithInitialData.args = {
   open: true,
-  onSave: (newConfig: NewColumnType) =>
-    window.alert(`save! ${JSON.stringify(newConfig)}`),
+  onSave: (newConfig) => window.alert(`save! ${JSON.stringify(newConfig)}`),
   options: [
     { name: "test1", display_name: "Test1" },
     { name: "test2", display_name: "Test2" },
@@ -47,6 +44,8 @@ WithInitialData.args = {
     display_name: "Test1",
     necessity: "required",
     is_secret: true,
+    dtype: "string",
+    aggregation: "first",
   },
 };
 // TODO: Include visual regression test.