column list in database widget

packages/web/src/appobj/AppObjectList.js

@@ -37,6 +37,7 @@ function AppObjectListItem({
   isExpandable,
   SubItems,
   getCommonProps,
+  expandOnClick,
 }) {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
@@ -51,12 +52,22 @@ function AppObjectListItem({
   let commonProps = {
     prefix: SubItems ? (
       <ExpandIconHolder2>
-        {expandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
+        {expandable ? (
+          <ExpandIcon
+            isExpanded={isExpanded}
+            onClick={e => {
+              setIsExpanded(v => !v);
+              e.stopPropagation();
+            }}
+          />
+        ) : (
+          <ExpandIcon isBlank />
+        )}
       </ExpandIconHolder2>
     ) : null,
   };
 
-  if (SubItems) {
+  if (SubItems && expandOnClick) {
     commonProps.onClick2 = () => setIsExpanded(v => !v);
   }
   if (onObjectClick) {
@@ -107,6 +118,7 @@ export function AppObjectList({
   groupOrdered = undefined,
   isExpandable = undefined,
   getCommonProps = undefined,
+  expandOnClick = false,
 }) {
   const createComponent = data => (
     <AppObjectListItem
@@ -118,6 +130,7 @@ export function AppObjectList({
       SubItems={SubItems}
       isExpandable={isExpandable}
       getCommonProps={getCommonProps}
+      expandOnClick={expandOnClick}
     />
   );
 

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -12,6 +12,7 @@ import { findEngineDriver } from 'dbgate-tools';
 import useExtensions from '../utility/useExtensions';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import uuidv1 from 'uuid/v1';
+import { AppObjectList } from './AppObjectList';
 
 const icons = {
   tables: 'img table',

packages/web/src/appobj/SubColumnParamList.js

@@ -0,0 +1,33 @@
+import { findForeignKeyForColumn } from 'dbgate-tools';
+import React from 'react';
+import { getColumnIcon } from '../datagrid/ColumnLabel';
+import { AppObjectCore } from './AppObjectCore';
+import { AppObjectList } from './AppObjectList';
+
+function ColumnAppObject({ data, commonProps }) {
+  const { columnName, dataType } = data;
+  return (
+    <AppObjectCore
+      {...commonProps}
+      data={data}
+      title={columnName}
+      extInfo={dataType}
+      icon={getColumnIcon(data, true)}
+    />
+  );
+}
+ColumnAppObject.extractKey = ({ columnName }) => columnName;
+
+export default function SubColumnParamList({ data }) {
+  const { columns } = data;
+
+  return (
+    <AppObjectList
+      list={(columns || []).map(col => ({
+        ...col,
+        foreignKey: findForeignKeyForColumn(data, col),
+      }))}
+      AppObjectComponent={ColumnAppObject}
+    />
+  );
+}

packages/web/src/datagrid/ColumnLabel.js

@@ -9,11 +9,16 @@ const Label = styled.span`
   white-space: nowrap;
 `;
 
+export function getColumnIcon(column, forceIcon = false) {
+  if (column.autoIncrement) return 'img autoincrement';
+  if (column.foreignKey) return 'img foreign-key';
+  if (forceIcon) return 'img column';
+  return null;
+}
+
 /** @param column {import('dbgate-datalib').DisplayColumn|import('dbgate-types').ColumnInfo} */
 export default function ColumnLabel(column) {
-  let icon = column.forceIcon ? 'img column' : null;
-  if (column.autoIncrement) icon = 'img autoincrement';
-  if (column.foreignKey) icon = 'img foreign-key';
+  const icon = getColumnIcon(column, column.forceIcon);
   return (
     <Label {...column}>
       {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}

packages/web/src/widgets/DatabaseWidget.js

@@ -25,6 +25,7 @@ import WidgetColumnBar, { WidgetColumnBarItem } from './WidgetColumnBar';
 import ToolbarButton from './ToolbarButton';
 import useShowModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
+import SubColumnParamList from '../appobj/SubColumnParamList';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -82,6 +83,7 @@ function ConnectionList() {
           SubItems={SubDatabaseList}
           filter={filter}
           isExpandable={data => openedConnections.includes(data._id)}
+          expandOnClick
         />
         {connections && connections.length == 0 && (
           <ToolbarButton icon="icon new-connection" onClick={showNewConnection}>
@@ -149,6 +151,8 @@ function SqlObjectList({ conid, database }) {
             AppObjectComponent={DatabaseObjectAppObject}
             groupFunc={data => _.startCase(data.objectTypeField)}
             filter={filter}
+            SubItems={SubColumnParamList}
+            isExpandable={data => data.objectTypeField == 'tables'}
           />
         )}
       </WidgetsInnerContainer>