SideDrawer: add option to show hidden fields

src/components/SideDrawer/Form/index.tsx

@@ -2,8 +2,9 @@ import { createElement, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import _sortBy from "lodash/sortBy";
 import _isEmpty from "lodash/isEmpty";
+import createPersistedState from "use-persisted-state";
 
-import { Stack } from "@mui/material";
+import { Stack, FormControlLabel, Switch } from "@mui/material";
 
 import { Values } from "./utils";
 import { getFieldProp } from "@src/components/fields";
@@ -16,6 +17,10 @@ import { useAppContext } from "@src/contexts/AppContext";
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { sanitizeFirestoreRefs } from "@src/utils/fns";
 
+const useSideDrawerShowHiddenFieldsState = createPersistedState(
+  "__ROWY__SIDE_DRAWER_SHOW_HIDDEN_FIELDS"
+);
+
 export interface IFormProps {
   values: Values;
 }
@@ -23,12 +28,18 @@ export interface IFormProps {
 export default function Form({ values }: IFormProps) {
   const { tableState, sideDrawerRef } = useProjectContext();
   const { userDoc } = useAppContext();
-  const userDocHiddenFields =
-    userDoc.state.doc?.tables?.[`${tableState!.tablePath}`]?.hiddenFields ?? [];
 
-  const fields = _sortBy(Object.values(tableState!.columns), "index").filter(
-    (f) => !userDocHiddenFields.includes(f.name)
-  );
+  const userDocHiddenFields =
+    userDoc.state.doc?.tables?.[`${tableState!.config.id}`]?.hiddenFields ?? [];
+
+  const [showHiddenFields, setShowHiddenFields] =
+    useSideDrawerShowHiddenFieldsState(false);
+
+  const fields = showHiddenFields
+    ? _sortBy(Object.values(tableState!.columns), "index")
+    : _sortBy(Object.values(tableState!.columns), "index").filter(
+        (f) => !userDocHiddenFields.includes(f.key)
+      );
 
   // Get initial values from fields config. This won’t be written to the db
   // when the SideDrawer is opened. Only dirty fields will be written
@@ -121,6 +132,24 @@ export default function Form({ values }: IFormProps) {
           label="Document path"
           debugText={values.ref?.path ?? values.id ?? "No ref"}
         />
+
+        {userDocHiddenFields.length > 0 && (
+          <FormControlLabel
+            label="Show hidden fields"
+            control={
+              <Switch
+                checked={showHiddenFields}
+                onChange={(e) => setShowHiddenFields(e.target.checked)}
+              />
+            }
+            sx={{
+              borderTop: 1,
+              borderColor: "divider",
+              pt: 3,
+              "& .MuiSwitch-root": { ml: -0.5 },
+            }}
+          />
+        )}
       </Stack>
     </form>
   );

src/components/Table/HiddenFields.tsx

@@ -13,6 +13,7 @@ import { useProjectContext } from "@src/contexts/ProjectContext";
 import { useAppContext } from "@src/contexts/AppContext";
 import { DocActions } from "@src/hooks/useDoc";
 import { formatSubTableName } from "../../utils/fns";
+
 const useStyles = makeStyles((theme) =>
   createStyles({
     listbox: {},