search plugins, plugin tab

packages/web/src/widgets/ArchiveWidget.js

@@ -1,19 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 import _ from 'lodash';
 
 import { AppObjectList } from '../appobj/AppObjectList';
-import { useCurrentArchive, useOpenedTabs, useSavedSqlFiles, useSetCurrentArchive } from '../utility/globalState';
-import closedTabAppObject from '../appobj/closedTabAppObject';
-import {
-  SearchBoxWrapper,
-  WidgetsInnerContainer,
-  WidgetsMainContainer,
-  WidgetsOuterContainer,
-  WidgetTitle,
-} from './WidgetStyles';
+import { useCurrentArchive, useSetCurrentArchive } from '../utility/globalState';
+import { SearchBoxWrapper, WidgetsInnerContainer } from './WidgetStyles';
 import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
-import savedSqlFileAppObject from '../appobj/savedSqlFileAppObject';
 import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
 import archiveFolderAppObject from '../appobj/archiveFolderAppObject';
 import archiveFileAppObject from '../appobj/archiveFileAppObject';

packages/web/src/widgets/PluginsWidget.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { AppObjectList } from '../appobj/AppObjectList';
+import { useCurrentArchive, useSetCurrentArchive } from '../utility/globalState';
+import { SearchBoxWrapper, WidgetsInnerContainer } from './WidgetStyles';
+import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
+import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
+import archiveFolderAppObject from '../appobj/archiveFolderAppObject';
+import archiveFileAppObject from '../appobj/archiveFileAppObject';
+import SearchInput from './SearchInput';
+import InlineButton from './InlineButton';
+import axios from '../utility/axios';
+import useFetch from '../utility/useFetch';
+import PluginsList from '../plugins/PluginsList';
+
+function InstalledPluginsList() {
+  //   const folders = useArchiveFolders();
+  //   const [filter, setFilter] = React.useState('');
+
+  //   const setArchive = useSetCurrentArchive();
+
+  //   const handleRefreshFolders = () => {
+  //     axios.post('archive/refresh-folders', {});
+  //   };
+
+  return (
+    <WidgetsInnerContainer>
+      {/* <AppObjectList
+        list={_.sortBy(folders, 'name')}
+        makeAppObj={archiveFolderAppObject()}
+        onObjectClick={(archive) => setArchive(archive.name)}
+        filter={filter}
+      /> */}
+    </WidgetsInnerContainer>
+  );
+}
+
+function AvailablePluginsList() {
+  const [filter, setFilter] = React.useState('');
+
+  const plugins = useFetch({
+    url: 'plugins/search',
+    params: {
+      filter,
+    },
+    defaultValue: [],
+  });
+
+  return (
+    <>
+      <SearchBoxWrapper>
+        <SearchInput placeholder="Search extensions on web" filter={filter} setFilter={setFilter} />
+      </SearchBoxWrapper>
+      <WidgetsInnerContainer>
+        <PluginsList plugins={plugins} />
+      </WidgetsInnerContainer>
+    </>
+  );
+}
+
+export default function PluginsWidget() {
+  return (
+    <WidgetColumnBar>
+      <WidgetColumnBarItem title="Installed extensions" name="installed" height="50%">
+        <InstalledPluginsList />
+      </WidgetColumnBarItem>
+      <WidgetColumnBarItem title="Available extensions" name="all">
+        <AvailablePluginsList />
+      </WidgetColumnBarItem>
+    </WidgetColumnBar>
+  );
+}

packages/web/src/widgets/WidgetContainer.js

@@ -3,11 +3,13 @@ import { useCurrentWidget } from '../utility/globalState';
 import ArchiveWidget from './ArchiveWidget';
 import DatabaseWidget from './DatabaseWidget';
 import FilesWidget from './FilesWidget';
+import PluginsWidget from './PluginsWidget';
 
 export default function WidgetContainer() {
   const currentWidget = useCurrentWidget();
   if (currentWidget === 'database') return <DatabaseWidget />;
   if (currentWidget === 'file') return <FilesWidget />;
   if (currentWidget === 'archive') return <ArchiveWidget />;
+  if (currentWidget === 'plugins') return <PluginsWidget />;
   return null;
 }

packages/web/src/widgets/WidgetIconPanel.js

@@ -51,6 +51,11 @@ export default function WidgetIconPanel() {
       name: 'archive',
       title: 'Archive (saved tabular data)',
     },
+    {
+      icon: 'icon plugin',
+      name: 'plugins',
+      title: 'Extensions & Plugins',
+    },
     // {
     //   icon: 'fa-cog',
     //   name: 'settings',