Enhancement: Ability to create new data files for a folder #834

src/dashboardWebView/components/DataView/DataView.tsx

@@ -5,7 +5,7 @@ import { SettingsSelector } from '../../state';
 import { DataForm } from './DataForm';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataFile } from '../../../models/DataFile';
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { messageHandler, Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { EventData } from '@estruyf/vscode';
@@ -15,15 +15,18 @@ import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
-import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon, CircleStackIcon, EyeIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { DataType } from '../../../models/DataType';
 import { GeneralCommands, WEBSITE_LINKS } from '../../../constants';
 import { NavigationItem } from '../Layout';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 import { MenuButton, MenuItem } from '../Menu';
 import { Transition } from '@headlessui/react';
+import { DataFolder } from '../../../models';
+import { ActionsBarItem } from '../Header/ActionsBarItem';
+import { Spinner } from '../Common/Spinner';
+import { openFile } from '../../utils/MessageHandlers';
 
 export interface IDataViewProps { }
 
@@ -33,6 +36,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
   const settings = useRecoilValue(SettingsSelector);
 
   const setSchema = (dataFile: DataFile) => {
@@ -71,6 +75,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         return;
       }
 
+      debugger
       const dataClone: any[] = Object.assign([], dataEntries);
       if (selectedIndex !== null && selectedIndex !== undefined) {
         dataClone[selectedIndex] = data;
@@ -110,11 +115,23 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         entries: data
       });
 
-      Messenger.send(DashboardMessage.showNotification, l10n.t(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
+      Messenger.send(DashboardMessage.showNotification, localize(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
     },
     [selectedData]
   );
 
+  const createDataFile = (folder: DataFolder) => {
+    setLoading(true);
+    messageHandler.request<DataFile>(DashboardMessage.createDataFile, folder).then(dataFile => {
+      if (dataFile) {
+        setSchema(dataFile);
+      }
+      setLoading(false);
+    }).catch((_: any) => {
+      setLoading(false);
+    });
+  }
+
   const dataEntry = useMemo(() => {
     if (selectedData?.singleEntry) {
       return dataEntries || {};
@@ -125,10 +142,40 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
       : null;
   }, [selectedData, , dataEntries, selectedIndex]);
 
+  // Retrieve the data files, check if they have a schema or ID, if not, they shouldn't be shown
+  const dataFiles = useMemo(() => {
+    return (settings?.dataFiles || [])
+      .map((dataFile: DataFile) => {
+        if (!dataFile.schema && !dataFile.id) {
+          return null;
+        }
+
+        const clonedFile = Object.assign({}, dataFile);
+
+        if (clonedFile.type) {
+          const dataType = settings?.dataTypes?.find(
+            (dataType: DataType) => dataType.id === clonedFile.type
+          );
+          if (!dataType) {
+            return null;
+          }
+          clonedFile.schema = Object.assign({}, dataType.schema);
+        }
+
+        return clonedFile;
+      })
+      .filter((d) => d !== null) as DataFile[];
+  }, [settings?.dataFiles]);
+
+  const fileCreationFolders = useMemo(() => {
+    return (settings?.dataFolders || [])
+      .filter((folder) => folder.enableFileCreation);
+  }, [settings?.dataFolders]);
+
   useEffect(() => {
     Messenger.listen(messageListener);
 
-    Messenger.send(DashboardMessage.setTitle, l10n.t(LocalizationKey.dashboardHeaderTabsData));
+    Messenger.send(DashboardMessage.setTitle, localize(LocalizationKey.dashboardHeaderTabsData));
 
     Messenger.send(GeneralCommands.toVSCode.logging.info, {
       message: 'Data view loaded',
@@ -140,29 +187,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
     };
   }, []);
 
-  // Retrieve the data files, check if they have a schema or ID, if not, they shouldn't be shown
-  const dataFiles = (settings?.dataFiles || [])
-    .map((dataFile: DataFile) => {
-      if (!dataFile.schema && !dataFile.id) {
-        return null;
-      }
-
-      const clonedFile = Object.assign({}, dataFile);
-
-      if (clonedFile.type) {
-        const dataType = settings?.dataTypes?.find(
-          (dataType: DataType) => dataType.id === clonedFile.type
-        );
-        if (!dataType) {
-          return null;
-        }
-        clonedFile.schema = Object.assign({}, dataType.schema);
-      }
-
-      return clonedFile;
-    })
-    .filter((d) => d !== null) as DataFile[];
-
   return (
     <div className="flex flex-col h-full overflow-auto inset-y-0">
       <Header settings={settings} />
@@ -176,7 +200,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                   className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto border-[var(--frontmatter-border)]`}
                 >
                   <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                    {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
+                    {localize(LocalizationKey.dashboardDataViewDataViewSelect)}
                   </h2>
 
                   <nav className={`flex-1 py-4 -mx-4`}>
@@ -209,24 +233,70 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
             enterTo="opacity-100">
             <div className={`w-full px-4 py-2 border-b border-[var(--frontmatter-border)]`}>
               {selectedData && (
-                <DropdownMenu>
-                  <MenuButton
-                    label={l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
-                    title={selectedData.title}
-                  />
-
-                  <DropdownMenuContent>
-                    {dataFiles.map((dataFile) => (
-                      <MenuItem
-                        key={dataFile.id}
-                        title={dataFile.title}
-                        value={dataFile}
-                        isCurrent={selectedData.id === dataFile.id}
-                        onClick={() => setSchema(dataFile)}
+                <div className={`flex justify-between`}>
+                  <div className={`flex gap-4`}>
+                    <DropdownMenu>
+                      <MenuButton
+                        label={localize(LocalizationKey.dashboardDataViewDataViewSelect)}
+                        title={selectedData.title}
                       />
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
+
+                      <DropdownMenuContent>
+                        {dataFiles.map((dataFile) => (
+                          <MenuItem
+                            key={dataFile.id}
+                            title={dataFile.title}
+                            value={dataFile}
+                            isCurrent={selectedData.id === dataFile.id}
+                            onClick={() => setSchema(dataFile)}
+                          />
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    {
+                      fileCreationFolders && fileCreationFolders.length > 0 && (
+                        <DropdownMenu>
+                          <MenuButton
+                            label={localize(LocalizationKey.dashboardDataViewDataViewCreateNew)}
+                            title={localize(LocalizationKey.dashboardDataViewDataViewSelectDataFolder)}
+                          />
+
+                          <DropdownMenuContent>
+                            {fileCreationFolders.map((folder) => (
+                              <MenuItem
+                                key={folder.id}
+                                title={folder.id}
+                                value={folder}
+                                onClick={() => createDataFile(folder)}
+                              />
+                            ))}
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      )
+                    }
+                  </div>
+
+                  <div className={`flex gap-2`}>
+                    <ActionsBarItem
+                      className='flex items-center'
+                      onClick={() => openFile(selectedData.file)}
+                      title={localize(LocalizationKey.commonView)}
+                    >
+                      <EyeIcon className="w-4 h-4 mr-1" aria-hidden="true" />
+                      <span>{localize(LocalizationKey.commonView)}</span>
+                    </ActionsBarItem>
+
+                    <ActionsBarItem
+                      className='flex items-center hover:text-[var(--vscode-statusBarItem-warningBackground)]'
+                      onClick={() => setSelectedData(null)}
+                      title={localize(LocalizationKey.dashboardDataViewDataViewCloseSelectedDataFile)}
+                    >
+                      <XMarkIcon className="w-4 h-4 mr-1" aria-hidden="true" />
+                      <span>{localize(LocalizationKey.dashboardDataViewDataViewCloseSelectedDataFile)}</span>
+                    </ActionsBarItem>
+                  </div>
+                </div>
               )}
             </div>
           </Transition>
@@ -239,7 +309,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                     className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto border-[var(--frontmatter-border)]`}
                   >
                     <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                      {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
+                      {localize(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                     </h2>
 
                     <div className="py-4">
@@ -259,13 +329,13 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                             ))}
                           </Container>
                           <Button className="mt-4" onClick={() => setSelectedIndex(null)}>
-                            {l10n.t(LocalizationKey.dashboardDataViewDataViewAdd)}
+                            {localize(LocalizationKey.dashboardDataViewDataViewAdd)}
                           </Button>
                         </>
                       ) : (
                         <div className={`flex flex-col items-center justify-center`}>
                           <p className={`text-[var(--frontmatter-text)]`}>
-                            {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
+                            {localize(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                           </p>
                         </div>
                       )}
@@ -277,7 +347,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                     } py-6 px-4 overflow-auto`}
                 >
                   <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                    {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
+                    {localize(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                   </h2>
                   {selectedData ? (
                     <DataForm
@@ -287,12 +357,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                       onClear={() => setSelectedIndex(null)}
                     />
                   ) : (
-                    <p>{l10n.t(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
+                    <p>{localize(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
                   )}
                 </div>
               </>
             ) : (
-              <EmptyView />
+              <EmptyView
+                folders={fileCreationFolders}
+                onCreate={createDataFile} />
             )}
           </section>
         </div>
@@ -300,14 +372,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         <div className="w-full h-full flex items-center justify-center">
           <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
             <CircleStackIcon className="w-32 h-32" />
-            <p className="text-3xl mt-2">{l10n.t(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</p>
+            <p className="text-3xl mt-2">{localize(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</p>
             <p className="text-xl mt-4">
               <a
                 className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
                 href={WEBSITE_LINKS.docs.dataDashboard}
-                title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
+                title={localize(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               >
-                {l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
+                {localize(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               </a>
             </p>
           </div>
@@ -315,6 +387,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
       )
       }
 
+      {loading && <Spinner />}
+
       <SponsorMsg
         beta={settings?.beta}
         version={settings?.versionInfo}