datacube: add csv file as one of the data cube source for hosted data…

…cube

.changeset/early-socks-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@finos/legend-application-data-cube': minor
+'@finos/legend-data-cube': patch
+'@finos/legend-shared': patch
+---
+
+DataCube: Add CSV File as one of the data cube source

packages/legend-application-data-cube/src/components/builder/LegendDataCubeBuilder.tsx

@@ -38,6 +38,7 @@ import {
 import { useEffect } from 'react';
 import { LegendDataCubeSettingStorageKey } from '../../__lib__/LegendDataCubeSetting.js';
 import type { LegendDataCubeBuilderStore } from '../../stores/builder/LegendDataCubeBuilderStore.js';
+import { CSVFileQueryDataCubeSource } from '../../stores/model/CSVFileQueryDataCubeSource.js';
 
 const LegendDataCubeBuilderHeader = observer(() => {
   const store = useLegendDataCubeBuilderStore();
@@ -57,7 +58,10 @@ const LegendDataCubeBuilderHeader = observer(() => {
       <FormButton
         compact={true}
         className="ml-1.5"
-        disabled={!store.builder?.dataCube}
+        disabled={
+          !store.builder?.dataCube ||
+          store.builder.source instanceof CSVFileQueryDataCubeSource
+        }
         onClick={() => store.saverDisplay.open()}
       >
         Save DataCube

packages/legend-application-data-cube/src/components/builder/LegendDataCubeCreator.tsx

@@ -28,6 +28,8 @@ import { LegendQueryDataCubeSourceBuilder } from './source/LegendQueryDataCubeSo
 import { AdhocQueryDataCubeSourceBuilder } from './source/AdhocQueryDataCubeSourceBuilder.js';
 import { AdhocQueryDataCubeSourceBuilderState } from '../../stores/builder/source/AdhocQueryDataCubeSourceBuilderState.js';
 import { useLegendDataCubeBuilderStore } from './LegendDataCubeBuilderStoreProvider.js';
+import { CSVFileQueryDataCubeSourceBuilderState } from '../../stores/builder/source/CSVFileQueryDataCubeSourceBuilderState.js';
+import { CSVFileQueryDataCubeSourceBuilder } from './source/CSVFileQueryDataCubeSourceBuilder.js';
 
 export const LegendDataCubeCreator = observer(() => {
   const store = useLegendDataCubeBuilderStore();
@@ -61,6 +63,7 @@ export const LegendDataCubeCreator = observer(() => {
                 {[
                   LegendDataCubeSourceBuilderType.LEGEND_QUERY,
                   LegendDataCubeSourceBuilderType.ADHOC_QUERY,
+                  LegendDataCubeSourceBuilderType.CSV_FILE_QUERY,
                 ].map((type) => (
                   <FormDropdownMenuItem
                     key={type}
@@ -89,6 +92,12 @@ export const LegendDataCubeCreator = observer(() => {
                   sourceBuilder={sourceBuilder}
                 />
               )}
+              {sourceBuilder instanceof
+                CSVFileQueryDataCubeSourceBuilderState && (
+                <CSVFileQueryDataCubeSourceBuilder
+                  sourceBuilder={sourceBuilder}
+                />
+              )}
             </div>
           </div>
         </div>

packages/legend-application-data-cube/src/components/builder/source/CSVFileQueryDataCubeSourceBuilder.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import type { CSVFileQueryDataCubeSourceBuilderState } from '../../../stores/builder/source/CSVFileQueryDataCubeSourceBuilderState.js';
+import { csvStringify, parseCSVFile } from '@finos/legend-shared';
+
+export const CSVFileQueryDataCubeSourceBuilder = observer(
+  (props: { sourceBuilder: CSVFileQueryDataCubeSourceBuilderState }) => {
+    const { sourceBuilder } = props;
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files ? e.target.files[0] : null;
+
+      if (file) {
+        parseCSVFile(file, {
+          complete: (result) => {
+            // Set the parsed data to state
+            sourceBuilder.setFileData(
+              csvStringify(result.data, { escapeChar: `'`, quoteChar: `'` }),
+            );
+            sourceBuilder.setFileName(file.name);
+            sourceBuilder.setRowCount(result.data.length);
+          },
+          header: true,
+          dynamicTyping: false,
+          skipEmptyLines: true,
+        });
+      }
+    };
+
+    return (
+      <div className="flex h-full w-full">
+        <div className="flex h-6 items-center text-neutral-500">
+          <input type="file" onChange={handleFileChange} />
+        </div>
+      </div>
+    );
+  },
+);