Merge branch 'develop' of https://github.com/rowyio/rowy into develop

src/components/CodeEditor/CodeEditorHelper.tsx

@@ -22,18 +22,10 @@ export default function CodeEditorHelper({
   const [projectId] = useAtom(projectIdAtom, projectScope);
 
   const availableVariables = [
-    {
-      key: "row",
-      description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
-    },
     {
       key: "db",
       description: `db object provides access to firestore database instance of this project. giving you access to any collection or document in this firestore instance`,
     },
-    {
-      key: "ref",
-      description: `ref object that represents the reference to the current row in firestore db (ie: doc.ref).`,
-    },
     {
       key: "auth",
       description: `auth provides access to a firebase auth instance, can be used to manage auth users or generate tokens.`,
@@ -44,7 +36,7 @@ export default function CodeEditorHelper({
     },
     {
       key: "rowy",
-      description: `rowy provides a set of functions that are commonly used, such as easy access to GCP Secret Manager`,
+      description: `rowy provides a set of functions that are commonly used, such as easy file uploads & access to GCP Secret Manager`,
     },
   ];
 

src/components/CodeEditor/useMonacoCustomizations.ts

@@ -78,6 +78,8 @@ export default function useMonacoCustomizations({
 
     try {
       monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        moduleResolution:
+          monaco.languages.typescript.ModuleResolutionKind.NodeJs,
         target: monaco.languages.typescript.ScriptTarget.ES2020,
         allowNonTsExtensions: true,
       });
@@ -125,6 +127,7 @@ export default function useMonacoCustomizations({
         ...JSON.parse(stringifiedDiagnosticsOptions),
         diagnosticCodesToIgnore: [
           1323, // remove dynamic import error
+          2307, // silence type declarations not found for dynamic import
         ],
       });
     } catch (error) {

src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx

@@ -204,7 +204,19 @@ export default function DefaultValueInput({
 
       {column.config?.defaultValue?.type === "dynamic" && (
         <>
-          <CodeEditorHelper docLink={WIKI_LINKS.howToDefaultValues} />
+          <CodeEditorHelper
+            docLink={WIKI_LINKS.howToDefaultValues}
+            additionalVariables={[
+              {
+                key: "row",
+                description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+              },
+              {
+                key: "ref",
+                description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+              },
+            ]}
+          />
           <Suspense fallback={<FieldSkeleton height={100} />}>
             <CodeEditor
               column={column}

src/components/Table/Table.tsx

@@ -114,11 +114,7 @@ export default function Table({
           tableSettings.readOnly && !userRoles.includes("ADMIN")
             ? false
             : column.editable ?? true,
-        width: (column.width as number)
-          ? (column.width as number) > MAX_COL_WIDTH
-            ? MAX_COL_WIDTH
-            : (column.width as number)
-          : DEFAULT_COL_WIDTH,
+        width: column.width ?? 100,
       }));
 
     if (userRoles.includes("ADMIN") || !tableSettings.readOnly) {

src/components/TableModals/ExtensionsModal/Step3Conditions.tsx

@@ -13,6 +13,14 @@ const CodeEditor = lazy(
 );
 
 const additionalVariables = [
+  {
+    key: "row",
+    description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+  },
+  {
+    key: "ref",
+    description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+  },
   {
     key: "change",
     description:

src/components/TableModals/ExtensionsModal/Step4Body.tsx

@@ -14,6 +14,14 @@ const CodeEditor = lazy(
 );
 
 const additionalVariables = [
+  {
+    key: "row",
+    description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+  },
+  {
+    key: "ref",
+    description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+  },
   {
     key: "change",
     description:

src/components/TableModals/WebhooksModal/Step3Parser.tsx

@@ -11,6 +11,10 @@ import { WIKI_LINKS } from "@src/constants/externalLinks";
 import { parserExtraLibs } from "./utils";
 
 const additionalVariables = [
+  {
+    key: "ref",
+    description: `reference object that represents the reference to the current collection in firestore db.`,
+  },
   {
     key: "req",
     description: "webhook request",

src/components/fields/Action/Settings.tsx

@@ -414,7 +414,16 @@ const Settings = ({ config, onChange, fieldName }: ISettingsProps) => {
                     </Suspense>
                     <CodeEditorHelper
                       docLink={WIKI_LINKS.fieldTypesAction + "#script"}
-                      additionalVariables={[]}
+                      additionalVariables={[
+                        {
+                          key: "row",
+                          description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+                        },
+                        {
+                          key: "ref",
+                          description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+                        },
+                      ]}
                     />
                   </FormControl>
 
@@ -530,7 +539,16 @@ const Settings = ({ config, onChange, fieldName }: ISettingsProps) => {
                   </Suspense>
                   <CodeEditorHelper
                     docLink={WIKI_LINKS.fieldTypesAction + "#script"}
-                    additionalVariables={[]}
+                    additionalVariables={[
+                      {
+                        key: "row",
+                        description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+                      },
+                      {
+                        key: "ref",
+                        description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+                      },
+                    ]}
                   />
                 </FormControl>
               </Stack>

src/components/fields/Connector/Settings.tsx

@@ -72,7 +72,16 @@ export default function Settings({ config, onChange }: ISettingsProps) {
         </Suspense>
         <CodeEditorHelper
           docLink={WIKI_LINKS.fieldTypesConnector + "#examples"}
-          additionalVariables={[]}
+          additionalVariables={[
+            {
+              key: "row",
+              description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+            },
+            {
+              key: "ref",
+              description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+            },
+          ]}
         />
       </div>
       <FormControl>

src/components/fields/Derivative/Settings.tsx

@@ -135,7 +135,19 @@ export default function Settings({
 
       <div>
         <InputLabel>Derivative script</InputLabel>
-        <CodeEditorHelper docLink={WIKI_LINKS.fieldTypesDerivative} />
+        <CodeEditorHelper
+          docLink={WIKI_LINKS.fieldTypesDerivative}
+          additionalVariables={[
+            {
+              key: "row",
+              description: `row has the value of doc.data() it has type definitions using this table's schema, but you can access any field in the document.`,
+            },
+            {
+              key: "ref",
+              description: `reference object that represents the reference to the current row in firestore db (ie: doc.ref).`,
+            },
+          ]}
+        />
         <Suspense fallback={<FieldSkeleton height={200} />}>
           <CodeEditor
             diagnosticsOptions={

src/components/fields/LongText/Filter.tsx

@@ -0,0 +1,12 @@
+import { IFilterOperator } from "@src/components/fields/types";
+
+export const filterOperators: IFilterOperator[] = [
+  {
+    label: "equals",
+    value: "==",
+  },
+  {
+    label: "not equals",
+    value: "!=",
+  },
+];

src/components/fields/LongText/Settings.tsx

@@ -0,0 +1,31 @@
+import { ISettingsProps } from "@src/components/fields/types";
+import { TextField } from "@mui/material";
+
+export default function Settings({ onChange, config }: ISettingsProps) {
+  return (
+    <>
+      <TextField
+        type="number"
+        label="Character limit"
+        id="character-limit"
+        value={config.maxLength}
+        fullWidth
+        onChange={(e) => {
+          if (e.target.value === "0") onChange("maxLength")(null);
+          else onChange("maxLength")(e.target.value);
+        }}
+      />
+      <TextField
+        type="text"
+        label="Validation regex"
+        id="validation-regex"
+        value={config.validationRegex}
+        fullWidth
+        onChange={(e) => {
+          if (e.target.value === "") onChange("validationRegex")(null);
+          else onChange("validationRegex")(e.target.value);
+        }}
+      />
+    </>
+  );
+}

src/components/fields/LongText/index.tsx

@@ -5,7 +5,8 @@ import withBasicCell from "@src/components/fields/_withTableCell/withBasicCell";
 import LongTextIcon from "@mui/icons-material/Notes";
 import BasicCell from "./BasicCell";
 import TextEditor from "@src/components/Table/editors/TextEditor";
-import { filterOperators } from "@src/components/fields/ShortText/Filter";
+
+import { filterOperators } from "./Filter";
 import BasicContextMenuActions from "@src/components/fields/_BasicCell/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
@@ -15,6 +16,10 @@ const SideDrawerField = lazy(
     )
 );
 
+const Settings = lazy(
+  () => import("./Settings" /* webpackChunkName: "Settings-LongText" */)
+);
+
 export const config: IFieldConfig = {
   type: FieldType.longText,
   name: "Long Text",
@@ -28,6 +33,7 @@ export const config: IFieldConfig = {
   TableCell: withBasicCell(BasicCell),
   TableEditor: TextEditor,
   SideDrawerField,
+  settings: Settings,
   filter: {
     operators: filterOperators,
   },

src/components/fields/Rating/Settings.tsx

@@ -1,48 +1,95 @@
 import { ISettingsProps } from "@src/components/fields/types";
-
-import { Slider, InputLabel, TextField, Grid } from "@mui/material";
+import RatingIcon from "@mui/icons-material/Star";
+import RatingOutlineIcon from "@mui/icons-material/StarBorder"
+import { InputLabel, TextField, Grid, FormControlLabel, Checkbox, Stack } from "@mui/material";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import MuiRating from "@mui/material/Rating";
+import { get } from "lodash-es";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   return (
-    <>
-      <Grid container spacing={2} justifyItems="end" direction={"row"}>
-        <Grid item xs={6}>
-          <TextField
-            label="Maximum number of stars"
-            type={"number"}
-            value={config.max}
-            fullWidth
-            onChange={(e) => {
-              onChange("max")(parseInt(e.target.value));
-            }}
-            inputProps={{ min: 1, max: 20 }}
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <InputLabel>Star fraction</InputLabel>
-          <ToggleButtonGroup
-            value={config.precision}
-            exclusive
-            fullWidth
-            onChange={(_, value) => {
-              onChange("precision")(value);
-            }}
-            aria-label="text alignment"
-          >
-            <ToggleButton value={0.25} aria-label="quarter">
-              1/4
-            </ToggleButton>
-            <ToggleButton value={0.5} aria-label="half">
-              1/2
-            </ToggleButton>
-            <ToggleButton value={1} aria-label="whole">
-              1
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Grid>
+    <Grid container spacing={2} justifyItems="end" direction={"row"}>
+      <Grid item xs={6}>
+        <TextField
+          label="Highest possible rating"
+          type={"number"}
+          value={config.max}
+          fullWidth
+          error={false}
+          onChange={(e) => {
+            let input = parseInt(e.target.value) || 0
+            if (input > 20) { input = 20 }
+            onChange("max")(input);
+          }}
+        />
       </Grid>
-    </>
+      <Grid item xs={6}>
+        <InputLabel>Rating fraction</InputLabel>
+        <ToggleButtonGroup
+          value={config.precision}
+          exclusive
+          fullWidth
+          onChange={(_, value) => {
+            onChange("precision")(value);
+          }}
+          aria-label="text alignment"
+          sx={{ pt: 0.5 }}
+        >
+          <ToggleButton value={0.25} aria-label="quarter">
+            1/4
+          </ToggleButton>
+          <ToggleButton value={0.5} aria-label="half">
+            1/2
+          </ToggleButton>
+          <ToggleButton value={1} aria-label="whole">
+            1
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Grid>
+      <Grid item xs={6}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={config.customIcons?.enabled}
+              onChange={(e) =>
+                onChange("customIcons.enabled")(e.target.checked)
+              }
+              name="customIcons.enabled"
+            />
+          }
+          label="Customize ratings with emoji"
+          style={{ marginLeft: -11 }}
+        />
+      </Grid>
+      {config.customIcons?.enabled && (
+        <Grid item xs={6} sm={true}>
+          <Stack direction="row" spacing={1}>
+            <TextField
+              id="customIcons.rating"
+              value={get(config, "customIcons.rating")}
+              onChange={(e) =>
+                onChange("customIcons.rating")(e.target.value)
+              }
+              label="Custom icon preview:"
+              className="labelHorizontal"
+              inputProps={{ style: { width: "2ch" } }}
+            />
+
+            <MuiRating aria-label="Preview of the rating field with custom icon"
+              name="Preview"
+              onClick={(e) => e.stopPropagation()}
+              icon={get(config, "customIcons.rating") || <RatingIcon />}
+              size="small"
+              emptyIcon={get(config, "customIcons.rating") || <RatingOutlineIcon />}
+              max={get(config, "max")}
+              precision={get(config, "precision")}
+              sx={{ pt: 0.5 }}
+            />
+          </Stack>
+
+        </Grid>
+      )}
+    </Grid>
   );
-}
+}

src/components/fields/Rating/SideDrawerField.tsx

@@ -3,9 +3,8 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { Grid } from "@mui/material";
 import { Rating as MuiRating } from "@mui/material";
 import "@mui/lab";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
-
-import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
+import { getStateIcon, getStateOutline } from "./TableCell";
+import { fieldSx } from "@src/components/SideDrawer/utils";
 
 export default function Rating({
   column,
@@ -29,7 +28,9 @@ export default function Rating({
           onChange(newValue);
           onSubmit();
         }}
-        emptyIcon={<StarBorderIcon fontSize="inherit" />}
+        icon={getStateIcon(column.config)}
+        emptyIcon={getStateOutline(column.config)}
+        size="small"
         max={max}
         precision={precision}
         sx={{ ml: -0.5 }}

src/components/fields/Rating/TableCell.tsx

@@ -1,7 +1,21 @@
 import { IHeavyCellProps } from "@src/components/fields/types";
 
 import MuiRating from "@mui/material/Rating";
-import StarBorderIcon from "@mui/icons-material/StarBorder";
+import RatingIcon from "@mui/icons-material/Star";
+import RatingOutlineIcon from "@mui/icons-material/StarBorder"
+import { get } from "lodash-es";
+
+
+export const getStateIcon = (config: any) => {
+  // only use the config to get the custom rating icon if enabled via toggle
+  if (!get(config, "customIcons.enabled")) { return <RatingIcon /> }
+  return get(config, "customIcons.rating") || <RatingIcon />;
+};
+
+export const getStateOutline = (config: any) => {
+  if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
+  return get(config, "customIcons.rating") || <RatingOutlineIcon />;
+}
 
 export default function Rating({
   row,
@@ -28,9 +42,11 @@ export default function Rating({
       name={`${row.id}-${column.key}`}
       value={typeof value === "number" ? value : 0}
       onClick={(e) => e.stopPropagation()}
+      icon={getStateIcon(column.config)}
+      size="small"
       disabled={disabled}
       onChange={(_, newValue) => onSubmit(newValue)}
-      emptyIcon={<StarBorderIcon />}
+      emptyIcon={getStateOutline(column.config)}
       max={max}
       precision={precision}
       sx={{ mx: -0.25 }}

src/components/fields/ShortText/index.tsx

@@ -15,6 +15,7 @@ const SideDrawerField = lazy(
       "./SideDrawerField" /* webpackChunkName: "SideDrawerField-ShortText" */
     )
 );
+
 const Settings = lazy(
   () => import("./Settings" /* webpackChunkName: "Settings-ShortText" */)
 );