feat: add drag and drop for templated variables (pinterest#1112)

* temp * feat: add drag and drop for templated variables * resolved comments * make templated variables in the frontend array based * meta.variables should always be defined
CAI-TECHNOLOGIES · Dec 23, 2022 · 23337b6 · 23337b6
1 parent 96648c3
commit 23337b6
Show file tree

Hide file tree

Showing 21 changed files with 281 additions and 172 deletions.
diff --git a/components/DataDoc/DataDoc.tsx b/components/DataDoc/DataDoc.tsx
@@ -22,6 +22,7 @@ import {
     IDataCell,
     IDataCellMeta,
     IDataDoc,
+    IDataDocMeta,
     IDataQueryCell,
 } from 'const/datadoc';
 import { ISearchOptions, ISearchResult } from 'const/searchAndReplace';
@@ -632,7 +633,7 @@ class DataDocComponent extends React.PureComponent<IProps, IState> {
                     key={cell.id}
                     docId={dataDoc.id}
                     numberOfCells={dataDoc.dataDocCells.length}
-                    templatedVariables={dataDoc.meta}
+                    templatedVariables={dataDoc.meta.variables}
                     cell={cell}
                     index={index}
                     queryIndexInDoc={queryIndexInDoc}
@@ -907,7 +908,7 @@ function mapDispatchToProps(dispatch: Dispatch) {
             );
         },
 
-        changeDataDocMeta: (docId: number, meta: IDataCellMeta) =>
+        changeDataDocMeta: (docId: number, meta: IDataDocMeta) =>
             dispatch(dataDocActions.updateDataDocField(docId, 'meta', meta)),
 
         cloneDataDoc: (docId: number) =>

diff --git a/components/DataDocCell/DataDocCell.tsx b/components/DataDocCell/DataDocCell.tsx
@@ -8,7 +8,11 @@ import { DataDocChartCell } from 'components/DataDocChartCell/DataDocChartCell';
 import { DataDocQueryCell } from 'components/DataDocQueryCell/DataDocQueryCell';
 import { DataDocTextCell } from 'components/DataDocTextCell/DataDocTextCell';
 import { UserAvatar } from 'components/UserBadge/UserAvatar';
-import { DataCellUpdateFields, IDataCell } from 'const/datadoc';
+import {
+    DataCellUpdateFields,
+    IDataCell,
+    TDataDocMetaVariables,
+} from 'const/datadoc';
 import { DataDocContext } from 'context/DataDoc';
 import { useMakeSelector } from 'hooks/redux/useMakeSelector';
 import { useBoundFunc } from 'hooks/useBoundFunction';
@@ -22,7 +26,7 @@ import './DataDocCell.scss';
 interface IDataDocCellProps {
     docId: number;
     numberOfCells: number;
-    templatedVariables: Record<string, string>;
+    templatedVariables: TDataDocMetaVariables;
 
     cell: IDataCell;
     index: number;

diff --git a/components/DataDocQueryCell/DataDocQueryCell.tsx b/components/DataDocQueryCell/DataDocQueryCell.tsx
@@ -21,7 +21,7 @@ import { QuerySnippetInsertionModal } from 'components/QuerySnippetInsertionModa
 import { TemplatedQueryView } from 'components/TemplateQueryView/TemplatedQueryView';
 import { TranspileQueryModal } from 'components/TranspileQueryModal/TranspileQueryModal';
 import { UDFForm } from 'components/UDFForm/UDFForm';
-import { IDataQueryCellMeta } from 'const/datadoc';
+import { IDataQueryCellMeta, TDataDocMetaVariables } from 'const/datadoc';
 import type { IQueryEngine, IQueryTranspiler } from 'const/queryEngine';
 import CodeMirror from 'lib/codemirror';
 import { createSQLLinter } from 'lib/codemirror/codemirror-lint';
@@ -73,7 +73,7 @@ interface IOwnProps {
     cellId: number;
 
     queryIndexInDoc: number;
-    templatedVariables: Record<string, string>;
+    templatedVariables: TDataDocMetaVariables;
 
     shouldFocus: boolean;
     isFullScreen: boolean;
@@ -364,7 +364,7 @@ class DataDocQueryCellComponent extends React.PureComponent<IProps, IState> {
 
     @bind
     public async getTransformedQuery() {
-        const { templatedVariables = {} } = this.props;
+        const { templatedVariables = [] } = this.props;
         const { query } = this.state;
         const selectedRange =
             this.queryEditorRef.current &&

diff --git a/components/DataDocRightSidebar/DataDocRightSidebar.tsx b/components/DataDocRightSidebar/DataDocRightSidebar.tsx
@@ -5,7 +5,7 @@ import { DataDocBoardsButton } from 'components/DataDocBoardsButton/DataDocBoard
 import { DataDocDAGExporterButton } from 'components/DataDocDAGExporter/DataDocDAGExporterButton';
 import { DataDocTemplateButton } from 'components/DataDocTemplateButton/DataDocTemplateButton';
 import { DataDocUIGuide } from 'components/UIGuide/DataDocUIGuide';
-import { IDataDoc } from 'const/datadoc';
+import { IDataDoc, IDataDocMeta } from 'const/datadoc';
 import { useAnnouncements } from 'hooks/redux/useAnnouncements';
 import { useScrollToTop } from 'hooks/ui/useScrollToTop';
 import { fetchDAGExporters } from 'redux/dataDoc/action';
@@ -24,7 +24,7 @@ interface IProps {
     isEditable: boolean;
     isConnected: boolean;
 
-    changeDataDocMeta: (docId: number, meta: Record<string, any>) => any;
+    changeDataDocMeta: (docId: number, meta: IDataDocMeta) => Promise<void>;
     onClone: () => any;
 
     onCollapse: () => any;

diff --git a/components/DataDocTemplateButton/DataDocTemplateButton.tsx b/components/DataDocTemplateButton/DataDocTemplateButton.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import toast from 'react-hot-toast';
 
 import { DataDocTemplateVarForm } from 'components/DataDocTemplateButton/DataDocTemplateVarForm';
-import { IDataDoc } from 'const/datadoc';
+import { IDataDoc, IDataDocMeta } from 'const/datadoc';
 import { IconButton } from 'ui/Button/IconButton';
 import { Modal } from 'ui/Modal/Modal';
 
 import { DataDocTemplateInfoButton } from './DataDocTemplateInfoButton';
 
 interface IProps {
-    changeDataDocMeta: (docId: number, meta: Record<string, any>) => any;
+    changeDataDocMeta: (docId: number, meta: IDataDocMeta) => Promise<void>;
     dataDoc: IDataDoc;
     isEditable?: boolean;
 }
@@ -31,11 +30,13 @@ export const DataDocTemplateButton: React.FunctionComponent<IProps> = ({
         >
             <DataDocTemplateVarForm
                 isEditable={isEditable}
-                templatedVariables={dataDoc.meta}
-                onSave={(meta) => {
-                    changeDataDocMeta(dataDoc.id, meta);
+                variables={dataDoc.meta.variables}
+                onSave={(variables) => {
                     setShowTemplateForm(false);
-                    toast.success('Variables saved');
+                    return changeDataDocMeta(dataDoc.id, {
+                        ...dataDoc.meta,
+                        variables,
+                    });
                 }}
             />
         </Modal>

diff --git a/components/DataDocTemplateButton/DataDocTemplateCell.tsx b/components/DataDocTemplateButton/DataDocTemplateCell.tsx
@@ -1,16 +1,14 @@
-import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import toast from 'react-hot-toast';
 
 import { DataDocTemplateVarForm } from 'components/DataDocTemplateButton/DataDocTemplateVarForm';
-import { IDataDoc } from 'const/datadoc';
+import { IDataDoc, IDataDocMeta } from 'const/datadoc';
 import { TextButton } from 'ui/Button/Button';
 import { AccentText } from 'ui/StyledText/StyledText';
 
 import { DataDocTemplateInfoButton } from './DataDocTemplateInfoButton';
 
 interface IProps {
-    changeDataDocMeta: (docId: number, meta: Record<string, any>) => any;
+    changeDataDocMeta: (docId: number, meta: IDataDocMeta) => Promise<void>;
     dataDoc: IDataDoc;
     isEditable?: boolean;
 }
@@ -21,12 +19,12 @@ export const DataDocTemplateCell: React.FunctionComponent<IProps> = ({
     isEditable,
 }) => {
     const hasMeta = useMemo(
-        () => dataDoc.meta && !isEmpty(dataDoc.meta),
+        () => dataDoc.meta.variables.length > 0,
         [dataDoc.meta]
     );
-    const [showFacade, setShowFacde] = useState(!hasMeta && isEditable);
+    const [showFacade, setShowFacade] = useState(!hasMeta && isEditable);
     useEffect(() => {
-        setShowFacde(!hasMeta && isEditable);
+        setShowFacade(!hasMeta && isEditable);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataDoc.id]);
 
@@ -42,7 +40,7 @@ export const DataDocTemplateCell: React.FunctionComponent<IProps> = ({
                     icon="Plus"
                     className="mr4"
                     title="New Variable"
-                    onClick={() => setShowFacde(false)}
+                    onClick={() => setShowFacade(false)}
                 />
                 <DataDocTemplateInfoButton style="icon" />
             </div>
@@ -63,13 +61,15 @@ export const DataDocTemplateCell: React.FunctionComponent<IProps> = ({
                 </div>
                 <DataDocTemplateVarForm
                     isEditable={isEditable}
-                    templatedVariables={dataDoc.meta}
-                    onSave={(meta) => {
-                        changeDataDocMeta(dataDoc.id, meta);
-                        if (isEmpty(meta)) {
-                            setShowFacde(true);
+                    variables={dataDoc.meta.variables}
+                    onSave={(newVariables) => {
+                        if (newVariables.length === 0) {
+                            setShowFacade(true);
                         }
-                        toast.success('Variables saved');
+                        return changeDataDocMeta(dataDoc.id, {
+                            ...dataDoc.meta,
+                            variables: newVariables,
+                        });
                     }}
                 />
             </>