Merge pull request #1405 from rowyio/develop

Develop

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@json2csv/plainjs": "^7.0.1",
     "@mdi/js": "^6.6.96",
     "@monaco-editor/react": "^4.4.4",
@@ -40,7 +41,7 @@
     "match-sorter": "^6.3.1",
     "material-ui-popup-state": "^4.0.1",
     "mdi-material-ui": "^7.3.0",
-    "monaco-editor-auto-typings": "^0.4.0",
+    "monaco-editor-auto-typings": "^0.4.3",
     "notistack": "^2.0.4",
     "path-browserify": "^1.0.1",
     "pb-util": "^1.0.3",

src/atoms/tableScope/table.ts

@@ -16,6 +16,7 @@ import {
   BulkWriteFunction,
 } from "@src/types/table";
 import { updateRowData } from "@src/utils/table";
+import { Table } from "@tanstack/react-table";
 
 /** Root atom from which others are derived */
 export const tableIdAtom = atom("");
@@ -47,6 +48,8 @@ export const tableColumnsOrderedAtom = atom<ColumnConfig[]>((get) => {
     ["desc", "asc"]
   );
 });
+/** Store the table */
+export const reactTableAtom = atom<Table<TableRow> | null>(null);
 /** Reducer function to convert from array of columns to columns object */
 export const tableColumnsReducer = (
   a: Record<string, ColumnConfig>,
@@ -59,6 +62,8 @@ export const tableColumnsReducer = (
 
 /** Filters applied to the local view */
 export const tableFiltersAtom = atom<TableFilter[]>([]);
+/** Join operator applied to mulitple filters */
+export const tableFiltersJoinAtom = atom<"AND" | "OR">("AND");
 /** Sorts applied to the local view */
 export const tableSortsAtom = atom<TableSort[]>([]);
 

src/atoms/tableScope/ui.ts

@@ -41,7 +41,7 @@ export const columnMenuAtom = atom<{
  * ```
  */
 export const columnModalAtom = atomWithHash<{
-  type: "new" | "name" | "type" | "config";
+  type: "new" | "name" | "type" | "config" | "setColumnWidth";
   columnKey?: string;
   index?: number;
 } | null>("columnModal", null, { replaceState: true });

src/components/CodeEditor/CodeEditor.tsx

@@ -14,6 +14,7 @@ import FullScreenButton from "@src/components/FullScreenButton";
 import { spreadSx } from "@src/utils/ui";
 import githubLightTheme from "@src/components/CodeEditor/github-light-default.json";
 import githubDarkTheme from "@src/components/CodeEditor/github-dark-default.json";
+import { AutoTypings, LocalStorageCache } from "monaco-editor-auto-typings";
 
 export interface ICodeEditorProps
   extends Partial<EditorProps>,
@@ -47,7 +48,7 @@ export default function CodeEditor({
   extraLibs,
   diagnosticsOptions,
   onUnmount,
-  defaultLanguage = "javascript",
+  defaultLanguage = "typescript",
   ...props
 }: ICodeEditorProps) {
   const theme = useTheme();
@@ -131,11 +132,22 @@ export default function CodeEditor({
               });
             });
           }}
-          onMount={(editor) => {
+          {...props}
+          onMount={async (editor, monaco) => {
+            if (props.onMount) {
+              props.onMount(editor, monaco);
+            }
             if (onFocus) editor.onDidFocusEditorWidget(onFocus);
             if (onBlur) editor.onDidBlurEditorWidget(onBlur);
+            const autoTypings = await AutoTypings.create(editor, {
+              monaco: monaco,
+              sourceCache: new LocalStorageCache(),
+              debounceDuration: 500, // ms
+              onError: (e) => {
+                console.log("Auto typing error", e);
+              },
+            });
           }}
-          {...props}
           onValidate={onValidate_}
           theme={`github-${theme.palette.mode}`}
           options={{
@@ -149,6 +161,7 @@ export default function CodeEditor({
             fixedOverflowWidgets: true,
             tabSize: 2,
             ...props.options,
+            language: "typescript",
           }}
         />
 

src/components/CodeEditor/useMonacoCustomizations.ts

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useAtom } from "jotai";
+import { matchSorter } from "match-sorter";
 
 import {
   tableScope,
@@ -64,26 +65,26 @@ export default function useMonacoCustomizations({
     if (!monaco) return;
 
     try {
-      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
         moduleResolution:
           monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        module: monaco.languages.typescript.ModuleKind.CommonJS,
         target: monaco.languages.typescript.ScriptTarget.ES2020,
         allowNonTsExtensions: true,
+        typeRoots: ["node_modules/@types"],
       });
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(firestoreDefs);
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(firestoreDefs);
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
         firebaseAuthDefs
       );
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
         firebaseStorageDefs
       );
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
         utilsDefs,
         "ts:filename/utils.d.ts"
       );
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(rowyUtilsDefs);
-
-      setLoggingReplacementActions();
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(rowyUtilsDefs);
     } catch (error) {
       console.error(
         "An error occurred during initialization of Monaco: ",
@@ -97,7 +98,7 @@ export default function useMonacoCustomizations({
     if (!monaco) return;
     if (!extraLibs) return;
     try {
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
         extraLibs.join("\n"),
         "ts:filename/extraLibs.d.ts"
       );
@@ -112,7 +113,7 @@ export default function useMonacoCustomizations({
     if (!monaco) return;
 
     try {
-      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
         ...JSON.parse(stringifiedDiagnosticsOptions),
         diagnosticCodesToIgnore: [
           1323, // remove dynamic import error
@@ -124,13 +125,13 @@ export default function useMonacoCustomizations({
     }
   }, [monaco, stringifiedDiagnosticsOptions]);
 
-  const setLoggingReplacementActions = () => {
+  const setReplacementActions = () => {
     if (!monaco) return;
     const { dispose } = monaco.languages.registerCodeActionProvider(
       "javascript",
       {
         provideCodeActions: (model, range, context, token) => {
-          const actions = context.markers
+          const consoleLogReplacements = context.markers
             .filter((error) => {
               return error.message.includes("Rowy Cloud Logging");
             })
@@ -156,8 +157,63 @@ export default function useMonacoCustomizations({
                 isPreferred: true,
               };
             });
+          const secretNameReplacements = context.markers
+            .filter((error) => {
+              return error.message.includes(
+                "is not assignable to parameter of type 'SecretNames'"
+              );
+            })
+            .map((error) => {
+              const typoSecretName = model
+                .getLineContent(error.startLineNumber)
+                .slice(error.startColumn, error.endColumn - 2);
+              const similarSecretNames =
+                matchSorter(secretNames.secretNames ?? [], typoSecretName) ??
+                [];
+              const otherSecretNames =
+                secretNames.secretNames?.filter(
+                  (secretName) => !similarSecretNames.includes(secretName)
+                ) ?? [];
+              return [
+                ...similarSecretNames.map((secretName) => ({
+                  title: `Replace with "${secretName}"`,
+                  diagnostics: [error],
+                  kind: "quickfix",
+                  edit: {
+                    edits: [
+                      {
+                        resource: model.uri,
+                        edit: {
+                          range: error,
+                          text: `"${secretName}"`,
+                        },
+                      },
+                    ],
+                  },
+                  isPreferred: true,
+                })),
+                ...otherSecretNames.map((secretName) => ({
+                  title: `Replace with "${secretName}"`,
+                  diagnostics: [error],
+                  kind: "quickfix",
+                  edit: {
+                    edits: [
+                      {
+                        resource: model.uri,
+                        edit: {
+                          range: error,
+                          text: `"${secretName}"`,
+                        },
+                      },
+                    ],
+                  },
+                  isPreferred: false,
+                })),
+              ];
+            })
+            .flat();
           return {
-            actions: actions,
+            actions: [...consoleLogReplacements, ...secretNameReplacements],
             dispose: () => {},
           };
         },
@@ -169,7 +225,6 @@ export default function useMonacoCustomizations({
       dispose();
     });
   };
-
   const addJsonFieldDefinition = async (
     columnKey: string,
     interfaceName: string
@@ -178,11 +233,11 @@ export default function useMonacoCustomizations({
       .map((row) => row[columnKey])
       .filter((entry) => entry !== undefined)
       .map((entry) => JSON.stringify(entry));
-    monaco?.languages.typescript.javascriptDefaults.addExtraLib(
+    monaco?.languages.typescript.typescriptDefaults.addExtraLib(
       `type ${interfaceName} = any;`
     );
     // if (!samples || samples.length === 0) {
-    //   monaco?.languages.typescript.javascriptDefaults.addExtraLib(
+    //   monaco?.languages.typescript.typescriptDefaults.addExtraLib(
     //     `type ${interfaceName} = any;`
     //   );
     //   return;
@@ -200,7 +255,7 @@ export default function useMonacoCustomizations({
     //     rendererOptions: { "just-types": "true" },
     //   });
     //   const newLib = result.lines.join("\n").replaceAll("export ", "");
-    //  monaco?.languages.typescript.javascriptDefaults.addExtraLib(newLib);
+    //  monaco?.languages.typescript.typescriptDefaults.addExtraLib(newLib);
     //}
   };
 
@@ -223,13 +278,13 @@ export default function useMonacoCustomizations({
       .map((key) => `"${key}"`)
       .join("|\n");
 
-    monaco?.languages.typescript.javascriptDefaults.addExtraLib(
+    monaco?.languages.typescript.typescriptDefaults.addExtraLib(
       ["/**", " * extensions type configuration", " */", extensionsDefs].join(
         "\n"
       ),
       "ts:filename/extensions.d.ts"
     );
-    monaco?.languages.typescript.javascriptDefaults.addExtraLib(
+    monaco?.languages.typescript.typescriptDefaults.addExtraLib(
       [
         "// basic types that are used in all places",
         "declare var require: any;",
@@ -261,14 +316,16 @@ export default function useMonacoCustomizations({
     if (!secretNames.secretNames) return;
     const secretsDef = `type SecretNames = ${secretNames.secretNames
       .map((secret: string) => `"${secret}"`)
-      .join(" | ")}
+      .join(" | ")} \n
         enum secrets {
           ${secretNames.secretNames
-            .map((secret: string) => `${secret} = "${secret}"`)
+            .map((secret: string) => `"${secret}" = "${secret}"`)
             .join("\n")}
         }
        `;
     monaco?.languages.typescript.javascriptDefaults.addExtraLib(secretsDef);
+
+    setReplacementActions();
   }, [monaco, secretNames]);
 
   let boxSx: SystemStyleObject<Theme> = {

src/components/ColumnMenu/ColumnMenu.tsx

@@ -24,6 +24,7 @@ import {
 } from "@src/assets/icons";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import StraightenIcon from "@mui/icons-material/Straighten";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import SettingsIcon from "@mui/icons-material/SettingsOutlined";
 import EvalIcon from "@mui/icons-material/PlayCircleOutline";
@@ -59,6 +60,7 @@ import { getFieldProp } from "@src/components/fields";
 import { analytics, logEvent } from "@src/analytics";
 import {
   formatSubTableName,
+  generateId,
   getTableBuildFunctionPathname,
   getTableSchemaPath,
 } from "@src/utils/table";
@@ -251,6 +253,7 @@ export default function ColumnMenu({
                   : column.type
               )!.operators[0]?.value || "==",
             value: "",
+            id: generateId(),
           },
         });
         handleClose();
@@ -263,6 +266,16 @@ export default function ColumnMenu({
           : column.type
       ),
     },
+    {
+      key: "setColumnWidth",
+      label: "Set Column Width",
+      icon: <StraightenIcon />,
+      onClick: () => {
+        openColumnModal({ type: "setColumnWidth", columnKey: column.key });
+        handleClose();
+      },
+      disabled: column.resizable === false,
+    },
   ];
 
   const configActions: IMenuContentsProps["menuItems"] = [

src/components/ColumnModals/ColumnModals.tsx

@@ -5,6 +5,7 @@ import NewColumnModal from "./NewColumnModal";
 import NameChangeModal from "./NameChangeModal";
 import TypeChangeModal from "./TypeChangeModal";
 import ColumnConfigModal from "./ColumnConfigModal";
+import SetColumnWidthModal from "./SetColumnWidthModal";
 
 import {
   tableScope,
@@ -40,5 +41,8 @@ export default function ColumnModals() {
   if (columnModal.type === "config")
     return <ColumnConfigModal onClose={onClose} column={column} />;
 
+  if (columnModal.type === "setColumnWidth")
+    return <SetColumnWidthModal onClose={onClose} column={column} />;
+
   return null;
 }