simplified app objects

packages/web/src/appobj/databaseObjectAppObject.js

@@ -1,16 +1,111 @@
-import tableAppObject from './tableAppObject';
+import _ from 'lodash';
-import viewAppObject from './viewAppObject';
+import React from 'react';
+import { getIconImage } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import { openNewTab } from '../utility/common';
+import { getConnectionInfo } from '../utility/metadataLoaders';
+import fullDisplayName from '../utility/fullDisplayName';
+import { filterName } from '@dbgate/datalib';
 
-const databaseObjectAppObject = () => ({ objectTypeField, ...other }, props) => {
+const icons = {
-  switch (objectTypeField) {
+  tables: 'table2.svg',
-    case 'tables':
+  views: 'view2.svg',
-      // @ts-ignore
+};
-      return tableAppObject()(other, props);
+
-    case 'views':
+const menus = {
-      // @ts-ignore
+  tables: [
-      return viewAppObject()(other, props);
+    {
+      label: 'Open data',
+      tab: 'TableDataTab',
+    },
+    {
+      label: 'Open structure',
+      tab: 'TableStructureTab',
+    },
+    {
+      label: 'Show CREATE TABLE script',
+      tab: 'TableCreateScriptTab',
+    },
+  ],
+  views: [
+    {
+      label: 'Open data',
+      tab: 'ViewDataTab',
+    },
+    {
+      label: 'Show CREATE VIEW script',
+      tab: 'ViewCreateScriptTab',
+    },
+  ],
+};
+
+const defaultTabs = {
+  tables: 'TableDataTab',
+  views: 'ViewDataTab',
+};
+
+async function openObjectDetail(
+  setOpenedTabs,
+  tabComponent,
+  { schemaName, pureName, conid, database, objectTypeField }
+) {
+  const connection = await getConnectionInfo({ conid });
+  const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+    schemaName,
+    pureName,
+  })}`;
+
+  openNewTab(setOpenedTabs, {
+    title: pureName,
+    tooltip,
+    icon: icons[objectTypeField],
+    tabComponent,
+    props: {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    },
+  });
 }
-  return null;
+
+function Menu({ data, makeAppObj, setOpenedTabs }) {
+  return (
+    <>
+      {menus[data.objectTypeField].map((menu) => (
+        <DropDownMenuItem
+          key={menu.label}
+          onClick={() => {
+            openObjectDetail(setOpenedTabs, menu.tab, data);
+          }}
+        >
+          {menu.label}
+        </DropDownMenuItem>
+      ))}
+    </>
+  );
+}
+
+const databaseObjectAppObject = () => (
+  { conid, database, pureName, schemaName, objectTypeField },
+  { setOpenedTabs }
+) => {
+  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
+  const key = title;
+  const Icon = (props) => getIconImage(icons[objectTypeField], props);
+  const onClick = ({ schemaName, pureName }) => {
+    openObjectDetail(setOpenedTabs, defaultTabs[objectTypeField], {
+      schemaName,
+      pureName,
+      conid,
+      database,
+      objectTypeField,
+    });
+  };
+  const matcher = (filter) => filterName(filter, pureName);
+  const groupTitle = _.startCase(objectTypeField);
+
+  return { title, key, Icon, Menu, onClick, matcher, groupTitle };
 };
 
 export default databaseObjectAppObject;

packages/web/src/appobj/tableAppObject.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { TableIcon } from '../icons';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { openNewTab } from '../utility/common';
-import { getConnectionInfo } from '../utility/metadataLoaders';
-import fullDisplayName from '../utility/fullDisplayName';
-import { filterName } from '@dbgate/datalib';
-
-async function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
-  const connection = await getConnectionInfo({ conid });
-  const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
-    schemaName,
-    pureName,
-  })}`;
-
-  openNewTab(setOpenedTabs, {
-    title: pureName,
-    tooltip,
-    icon: 'table2.svg',
-    tabComponent,
-    props: {
-      schemaName,
-      pureName,
-      conid,
-      database,
-    },
-  });
-}
-
-function Menu({ data, makeAppObj, setOpenedTabs }) {
-  const handleOpenData = () => {
-    openTableDetail(setOpenedTabs, 'TableDataTab', data);
-  };
-  const handleOpenStructure = () => {
-    openTableDetail(setOpenedTabs, 'TableStructureTab', data);
-  };
-  const handleOpenCreateScript = () => {
-    openTableDetail(setOpenedTabs, 'TableCreateScriptTab', data);
-  };
-  return (
-    <>
-      <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleOpenStructure}>Open structure</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleOpenCreateScript}>Show CREATE TABLE script</DropDownMenuItem>
-    </>
-  );
-}
-
-const tableAppObject = () => ({ conid, database, pureName, schemaName }, { setOpenedTabs }) => {
-  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
-  const key = title;
-  const Icon = TableIcon;
-  const onClick = ({ schemaName, pureName }) => {
-    openTableDetail(setOpenedTabs, 'TableDataTab', {
-      schemaName,
-      pureName,
-      conid,
-      database,
-    });
-  };
-  const matcher = (filter) => filterName(filter, pureName);
-  const groupTitle = 'Tables';
-
-  return { title, key, Icon, Menu, onClick, matcher, groupTitle };
-};
-
-export default tableAppObject;

packages/web/src/appobj/viewAppObject.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ViewIcon } from '../icons';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { openNewTab } from '../utility/common';
-import { getConnectionInfo } from '../utility/metadataLoaders';
-import fullDisplayName from '../utility/fullDisplayName';
-import { filterName } from '@dbgate/datalib';
-
-async function openViewDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
-  const connection = await getConnectionInfo({ conid });
-  const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
-    schemaName,
-    pureName,
-  })}`;
-
-  openNewTab(setOpenedTabs, {
-    title: pureName,
-    tooltip,
-    icon: 'view2.svg',
-    tabComponent,
-    props: {
-      schemaName,
-      pureName,
-      conid,
-      database,
-    },
-  });
-}
-
-function Menu({ data, makeAppObj, setOpenedTabs }) {
-  const handleOpenData = () => {
-    openViewDetail(setOpenedTabs, 'TableDataTab', data);
-  };
-  const handleOpenCreateScript = () => {
-    openViewDetail(setOpenedTabs, 'ViewCreateScriptTab', data);
-  };
-  return (
-    <>
-      <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleOpenCreateScript}>Show CREATE VIEW script</DropDownMenuItem>
-    </>
-  );
-}
-
-const viewAppObject = () => ({ conid, database, pureName, schemaName }, { setOpenedTabs }) => {
-  const title = schemaName ? `${schemaName}.${pureName}` : pureName;
-  const key = title;
-  const Icon = ViewIcon;
-  const onClick = ({ schemaName, pureName }) => {
-    openViewDetail(setOpenedTabs, 'ViewDataTab', {
-      schemaName,
-      pureName,
-      conid,
-      database,
-    });
-  };
-  const matcher = (filter) => filterName(filter, pureName);
-  const groupTitle = 'Views';
-
-  return {
-    title,
-    key,
-    Icon,
-    Menu,
-    onClick,
-    matcher,
-    groupTitle,
-  };
-};
-
-export default viewAppObject;

packages/web/src/widgets/DatabaseWidget.js

@@ -6,7 +6,6 @@ import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
 import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
-import tableAppObject from '../appobj/tableAppObject';
 import theme from '../theme';
 import InlineButton from './InlineButton';
 import databaseObjectAppObject from '../appobj/databaseObjectAppObject';