add EmptyTableConfig with import wizard button

www/src/components/Table/EmptyTableConfig.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import {
+  makeStyles,
+  createStyles,
+  Grid,
+  Typography,
+  Button,
+} from "@material-ui/core";
+import ImportIcon from "assets/icons/Import";
+
+import { APP_BAR_HEIGHT } from "components/Navigation";
+import { useFiretableContext } from "contexts/firetableContext";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      height: `calc(100vh - ${APP_BAR_HEIGHT}px)`,
+      width: 300,
+      margin: "0 auto",
+      textAlign: "center",
+      userSelect: "none",
+    },
+  })
+);
+
+export default function EmptyTableConfig() {
+  const classes = useStyles();
+  const { tableState, importWizardRef } = useFiretableContext();
+
+  return (
+    <Grid
+      container
+      direction="column"
+      wrap="nowrap"
+      alignItems="center"
+      justify="center"
+      spacing={2}
+      className={classes.root}
+    >
+      <Grid item>
+        <Typography variant="overline">
+          You have existing data in your Firestore collection “
+          {tableState?.tablePath}”
+        </Typography>
+      </Grid>
+
+      <Grid item>
+        <Typography variant="overline">
+          You can start by importing this existing data to your Firetable
+        </Typography>
+      </Grid>
+
+      <Grid item>
+        <Button
+          variant="contained"
+          color="secondary"
+          startIcon={<ImportIcon />}
+          onClick={() => importWizardRef?.current?.setOpen(true)}
+        >
+          Import
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}

www/src/components/Wizards/ImportWizard/Step1Columns.tsx

@@ -24,7 +24,7 @@ import { IStepProps } from ".";
 import FadeList from "./FadeList";
 import Column from "./Column";
 import EmptyState from "components/EmptyState";
-import AddColumnIcon from "assets/icons/ColumnPlusAfter";
+import AddColumnIcon from "assets/icons/AddColumn";
 
 import { useFiretableContext } from "contexts/firetableContext";
 import { FieldType } from "constants/fields";

www/src/components/Wizards/ImportWizard/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import _merge from "lodash/merge";
-import _isEmpty from "lodash/isEmpty";
 
 import { useTheme, useMediaQuery, Typography } from "@material-ui/core";
 
@@ -15,6 +14,11 @@ import { useFiretableContext } from "contexts/firetableContext";
 
 export type TableColumnsConfig = { [key: string]: ColumnConfig };
 
+export type ImportWizardRef = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 export interface IStepProps {
   config: TableColumnsConfig;
   setConfig: React.Dispatch<React.SetStateAction<TableColumnsConfig>>;
@@ -26,32 +30,25 @@ export default function ImportWizard() {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.down("xs"));
 
+  const { tableState, tableActions, importWizardRef } = useFiretableContext();
+
   const [open, setOpen] = useState(false);
+  if (importWizardRef) importWizardRef.current = { open, setOpen };
 
   const [config, setConfig] = useState<TableColumnsConfig>({});
   const updateConfig: IStepProps["updateConfig"] = (value) => {
     setConfig((prev) => ({ ..._merge(prev, value) }));
   };
 
-  const { tableState, tableActions } = useFiretableContext();
   useEffect(() => {
-    if (!tableState) return;
+    if (!tableState || !open) return;
 
-    if (
-      tableState.config.tableConfig.doc &&
-      _isEmpty(tableState.config.tableConfig.doc?.columns)
-    ) {
-      setOpen(true);
+    if (Array.isArray(tableState.filters) && tableState.filters?.length > 0)
+      tableActions!.table.filter([]);
 
-      if (Array.isArray(tableState.filters) && tableState.filters?.length > 0)
-        tableActions!.table.filter([]);
-
-      if (Array.isArray(tableState.orderBy) && tableState.orderBy?.length > 0)
-        tableActions!.table.orderBy([]);
-
-      return;
-    }
-  }, [tableState]);
+    if (Array.isArray(tableState.orderBy) && tableState.orderBy?.length > 0)
+      tableActions!.table.orderBy([]);
+  }, [open, tableState]);
 
   if (tableState?.rows.length === 0) return null;
 

www/src/contexts/firetableContext.tsx

@@ -12,6 +12,7 @@ import { useAppContext } from "./appContext";
 import { useSnackContext } from "./snackContext";
 import { SideDrawerRef } from "components/SideDrawer";
 import { ColumnMenuRef } from "components/Table/ColumnMenu";
+import { ImportWizardRef } from "components/Wizards/ImportWizard";
 
 export type Table = {
   collection: string;
@@ -59,6 +60,8 @@ interface FiretableContextProps {
   sideDrawerRef: React.MutableRefObject<SideDrawerRef | undefined>;
   // A ref to the column menu. Prevents unnecessary re-renders
   columnMenuRef: React.MutableRefObject<ColumnMenuRef | undefined>;
+  // A ref ot the import wizard. Prevents unnecessary re-renders
+  importWizardRef: React.MutableRefObject<ImportWizardRef | undefined>;
 }
 
 const firetableContext = React.createContext<Partial<FiretableContextProps>>(
@@ -175,6 +178,7 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
   const dataGridRef = useRef<DataGridHandle>(null);
   const sideDrawerRef = useRef<SideDrawerRef>();
   const columnMenuRef = useRef<ColumnMenuRef>();
+  const importWizardRef = useRef<ImportWizardRef>();
 
   return (
     <firetableContext.Provider
@@ -190,6 +194,7 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
         dataGridRef,
         sideDrawerRef,
         columnMenuRef,
+        importWizardRef,
       }}
     >
       {children}

www/src/views/TableView.tsx

@@ -9,6 +9,8 @@ import Table from "components/Table";
 import SideDrawer from "components/SideDrawer";
 import TableHeaderSkeleton from "components/Table/Skeleton/TableHeaderSkeleton";
 import HeaderRowSkeleton from "components/Table/Skeleton/HeaderRowSkeleton";
+import EmptyTableConfig from "components/Table/EmptyTableConfig";
+import ImportWizard from "components/Wizards/ImportWizard";
 
 import { useFiretableContext } from "contexts/firetableContext";
 import { useAppContext } from "contexts/appContext";
@@ -66,6 +68,11 @@ export default function TableView() {
           <Table key={tableCollection} />
         )}
 
+        {!tableState.loadingColumns && _isEmpty(tableState.columns) && (
+          <EmptyTableConfig />
+        )}
+        <ImportWizard />
+
         <Hidden smDown>
           <SideDrawer />
         </Hidden>