From 65be619d51bc3771bd1dec37c7132f8d107cc552 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Mar 2022 16:07:11 +0100
Subject: [PATCH] Showing data nav by default + empty message update

---
 .../components/DataView/DataView.tsx          | 183 ++++++++++--------
 .../components/Header/Tabs.tsx                |  18 +-
 .../components/Layout/PageLayout.tsx          |   2 +-
 .../components/SnippetsView/Snippets.tsx      |   5 +-
 4 files changed, 110 insertions(+), 98 deletions(-)

diff --git a/src/dashboardWebView/components/DataView/DataView.tsx b/src/dashboardWebView/components/DataView/DataView.tsx
index 02173f25..8551d79c 100644
--- a/src/dashboardWebView/components/DataView/DataView.tsx
+++ b/src/dashboardWebView/components/DataView/DataView.tsx
@@ -15,7 +15,7 @@ import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
-import { ChevronRightIcon } from '@heroicons/react/outline';
+import { ChevronRightIcon, DatabaseIcon } from '@heroicons/react/outline';
 import { ToastContainer, toast, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
@@ -136,96 +136,109 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
     <div className="flex flex-col h-full overflow-auto inset-y-0">
       <Header settings={settings} />
 
-      <div className="relative w-full flex-grow mx-auto overflow-hidden">
+      {
+        (settings?.dataFiles && settings.dataFiles.length > 0) ? (
+          <div className="relative w-full flex-grow mx-auto overflow-hidden">
 
-        <div className={`flex w-64 flex-col absolute inset-y-0`}>
+            <div className={`flex w-64 flex-col absolute inset-y-0`}>
 
-          <aside className={`flex flex-col flex-grow overflow-y-auto border-r border-gray-200 dark:border-vulcan-300  py-6 px-4 overflow-auto`}>
-            <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Select your data type</h2>
+              <aside className={`flex flex-col flex-grow overflow-y-auto border-r border-gray-200 dark:border-vulcan-300  py-6 px-4 overflow-auto`}>
+                <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Select your data type</h2>
 
-            <nav className={`flex-1 py-4 -mx-4 `}>
-              <div className={`divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>
-                {
-                  (dataFiles && dataFiles.length > 0) && (
-                    dataFiles.map((dataFile) => (
-                      <button
-                        key={dataFile.id}
-                        type='button'
-                        className={`px-4 py-2 flex items-center text-sm font-medium w-full text-left hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500 ${selectedData?.id === dataFile.id ? 'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500' : 'text-gray-500 dark:text-whisper-900'}`}
-                        onClick={() => setSchema(dataFile)}>
-                        <ChevronRightIcon className='-ml-1 w-5 mr-2' />
-                        <span>{dataFile.title}</span>
-                      </button>
-                    )
-                  ))
-                }
-              </div>
-            </nav>
-          </aside>
-
-        </div>
-
-        <section className={`pl-64 flex min-w-0 h-full`}>
-          {
-            selectedData ? (
-              <>
-                <div className={`w-1/3 py-6 px-4 flex-1 border-r border-gray-200 dark:border-vulcan-300 overflow-auto`}>
-                  <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Your {selectedData.title.toLowerCase()} data items</h2>
-
-                  <div className='py-4'>
+                <nav className={`flex-1 py-4 -mx-4 `}>
+                  <div className={`divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>
                     {
-                      (dataEntries && dataEntries.length > 0) ? (
-                        <>
-                          <Container onSortEnd={onSortEnd} useDragHandle>
-                            {
-                              (dataEntries || []).map((dataEntry, idx) => (
-                                <SortableItem 
-                                  key={dataEntry[selectedData.labelField] || `entry-${idx}`}
-                                  value={dataEntry[selectedData.labelField] || `Entry ${idx+1}`}
-                                  index={idx}
-                                  crntIndex={idx}
-                                  selectedIndex={selectedIndex}
-                                  onSelectedIndexChange={(index: number) => setSelectedIndex(index)}
-                                  onDeleteItem={deleteItem}
-                                  />
-                              ))
-                            }
-                          </Container>
-                          <Button
-                            className='mt-4'
-                            onClick={() => setSelectedIndex(null)}>
-                            Add a new entry
-                          </Button>
-                        </>
-                      ) : (
-                        <div className={`flex flex-col items-center justify-center`}>
-                          <p className={`text-gray-500 dark:text-whisper-900`}>No {selectedData.title.toLowerCase()} data entries found</p>
-                        </div>
-                      )
+                      (dataFiles && dataFiles.length > 0) && (
+                        dataFiles.map((dataFile) => (
+                          <button
+                            key={dataFile.id}
+                            type='button'
+                            className={`px-4 py-2 flex items-center text-sm font-medium w-full text-left hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500 ${selectedData?.id === dataFile.id ? 'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500' : 'text-gray-500 dark:text-whisper-900'}`}
+                            onClick={() => setSchema(dataFile)}>
+                            <ChevronRightIcon className='-ml-1 w-5 mr-2' />
+                            <span>{dataFile.title}</span>
+                          </button>
+                        )
+                      ))
                     }
                   </div>
-                </div>
-                <div className={`w-2/3 py-6 px-4 overflow-auto`}>
-                  <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Create or modify your {selectedData.title.toLowerCase()} data</h2>
-                  {
-                    selectedData ? (
-                      <DataForm 
-                        schema={selectedData?.schema} 
-                        model={(dataEntries && selectedIndex !== null && selectedIndex !== undefined) ? dataEntries[selectedIndex] : null} 
-                        onSubmit={onSubmit}
-                        onClear={() => setSelectedIndex(null)} />
-                    ) : (
-                      <p>Select a data type to get started</p>
-                    )
-                  }
-                </div>
-              </>
-            ) : (
-              <EmptyView />
-            )
-          }
-        </section>
-      </div>
+                </nav>
+              </aside>
+
+            </div>
+
+            <section className={`pl-64 flex min-w-0 h-full`}>
+              {
+                selectedData ? (
+                  <>
+                    <div className={`w-1/3 py-6 px-4 flex-1 border-r border-gray-200 dark:border-vulcan-300 overflow-auto`}>
+                      <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Your {selectedData.title.toLowerCase()} data items</h2>
+
+                      <div className='py-4'>
+                        {
+                          (dataEntries && dataEntries.length > 0) ? (
+                            <>
+                              <Container onSortEnd={onSortEnd} useDragHandle>
+                                {
+                                  (dataEntries || []).map((dataEntry, idx) => (
+                                    <SortableItem 
+                                      key={dataEntry[selectedData.labelField] || `entry-${idx}`}
+                                      value={dataEntry[selectedData.labelField] || `Entry ${idx+1}`}
+                                      index={idx}
+                                      crntIndex={idx}
+                                      selectedIndex={selectedIndex}
+                                      onSelectedIndexChange={(index: number) => setSelectedIndex(index)}
+                                      onDeleteItem={deleteItem}
+                                      />
+                                  ))
+                                }
+                              </Container>
+                              <Button
+                                className='mt-4'
+                                onClick={() => setSelectedIndex(null)}>
+                                Add a new entry
+                              </Button>
+                            </>
+                          ) : (
+                            <div className={`flex flex-col items-center justify-center`}>
+                              <p className={`text-gray-500 dark:text-whisper-900`}>No {selectedData.title.toLowerCase()} data entries found</p>
+                            </div>
+                          )
+                        }
+                      </div>
+                    </div>
+                    <div className={`w-2/3 py-6 px-4 overflow-auto`}>
+                      <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Create or modify your {selectedData.title.toLowerCase()} data</h2>
+                      {
+                        selectedData ? (
+                          <DataForm 
+                            schema={selectedData?.schema} 
+                            model={(dataEntries && selectedIndex !== null && selectedIndex !== undefined) ? dataEntries[selectedIndex] : null} 
+                            onSubmit={onSubmit}
+                            onClear={() => setSelectedIndex(null)} />
+                        ) : (
+                          <p>Select a data type to get started</p>
+                        )
+                      }
+                    </div>
+                  </>
+                ) : (
+                  <EmptyView />
+                )
+              }
+            </section>
+          </div>
+        ) : (
+          <div className='w-full h-full flex items-center justify-center'>
+            <div className='flex flex-col items-center text-gray-500 dark:text-whisper-900'>
+              <DatabaseIcon className='w-32 h-32' />
+              <p className='text-3xl mt-2'>No data files found</p>
+              <p className='text-xl mt-4'>
+                <a className={`text-teal-700 hover:text-teal-900`} href={`https://frontmatter.codes/docs/dashboard#data-files-view`} title={`Read read more to get started using data files`}>Read read more to get started using data files</a></p>
+            </div>
+          </div>
+        )
+      }
 
       <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} isBacker={settings?.isBacker} />
 
diff --git a/src/dashboardWebView/components/Header/Tabs.tsx b/src/dashboardWebView/components/Header/Tabs.tsx
index fefe21a0..f26b1a16 100644
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/src/dashboardWebView/components/Header/Tabs.tsx
@@ -36,17 +36,13 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({ onNavigate }: React.
           <ScissorsIcon className={`h-6 w-auto mr-2`} /><span>Snippets</span>
         </Tab>
       </li>
-      {
-        (settings?.dataFiles && settings.dataFiles.length > 0) && (
-          <li className="mr-2" role="presentation">
-            <Tab
-              navigationType={NavigationType.Data} 
-              onNavigate={onNavigate}>
-              <DatabaseIcon className={`h-6 w-auto mr-2`} /><span>Data</span>
-            </Tab>
-          </li>
-        )
-      }
+      <li className="mr-2" role="presentation">
+        <Tab
+          navigationType={NavigationType.Data} 
+          onNavigate={onNavigate}>
+          <DatabaseIcon className={`h-6 w-auto mr-2`} /><span>Data</span>
+        </Tab>
+      </li>
     </ul>
   );
 };
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Layout/PageLayout.tsx b/src/dashboardWebView/components/Layout/PageLayout.tsx
index 634bf70e..0efa4599 100644
--- a/src/dashboardWebView/components/Layout/PageLayout.tsx
+++ b/src/dashboardWebView/components/Layout/PageLayout.tsx
@@ -20,7 +20,7 @@ export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({ header,
         totalPages={totalPages}
         settings={settings} />
 
-      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
+      <div className="w-full flex justify-between flex-col flex-grow max-w-7xl mx-auto pt-6 px-4">
         { children }
       </div>
     </div>
diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
index 47a34232..2815198c 100644
--- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
@@ -9,6 +9,7 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector, ViewDataSelector } from '../../state';
 import { PageLayout } from '../Layout/PageLayout';
 import { FormDialog } from '../Modals/FormDialog';
+import { SponsorMsg } from '../SponsorMsg';
 import { Item } from './Item';
 import { NewForm } from './NewForm';
 
@@ -97,7 +98,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.P
           </ul>
         ) : (
           <div className='w-full h-full flex items-center justify-center'>
-            <div className='flex flex-col items-center'>
+            <div className='flex flex-col items-center text-gray-500 dark:text-whisper-900'>
               <CodeIcon className='w-32 h-32' />
               <p className='text-3xl'>No snippets found</p>
             </div>
@@ -127,6 +128,8 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.P
           </FormDialog>
         )
       }
+
+      <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} isBacker={settings?.isBacker} />
     </PageLayout>
   );
 };
\ No newline at end of file