master/detail header

packages/web/src/datagrid/ReferenceHeader.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ToolbarButton from '../widgets/ToolbarButton';
+import styled from 'styled-components';
+import { ReferenceIcon } from '../icons';
+import theme from '../theme';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ddeeee;
+  height: ${theme.toolBar.height}px;
+  overflow: hidden;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+`;
+
+const Header = styled.div`
+  font-weight: bold;
+  margin-left: 10px;
+  display: flex;
+`;
+
+const HeaderText = styled.div`
+  margin-left: 10px;
+`;
+
+export default function ReferenceHeader({ reference, onClose }) {
+  return (
+    <Container>
+      <Header>
+        <ReferenceIcon />
+        <HeaderText>
+          {reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [
+          {reference.columns.map((x) => x.baseName).join(', ')}]
+        </HeaderText>
+      </Header>
+      <ToolbarButton icon="fas fa-times" onClick={onClose} patchY={6}>
+        Close
+      </ToolbarButton>
+    </Container>
+  );
+}

packages/web/src/datagrid/TableDataGrid.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import DataGrid from './DataGrid';
+import styled from 'styled-components';
 import { TableGridDisplay, createGridConfig, createGridCache } from '@dbgate/datalib';
 import { getFilterValueExpression } from '@dbgate/filterparser';
 import { useConnectionInfo, getTableInfo } from '../utility/metadataLoaders';
@@ -8,6 +9,23 @@ import engines from '@dbgate/engines';
 import useSocket from '../utility/SocketProvider';
 import { VerticalSplitter } from '../widgets/Splitter';
 import stableStringify from 'json-stable-stringify';
+import ReferenceHeader from './ReferenceHeader';
+
+const ReferenceContainer = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+const ReferenceGridWrapper = styled.div`
+  position: relative;
+  flex: 1;
+  display: flex;
+`;
 
 export default function TableDataGrid({
   conid,
@@ -98,6 +116,10 @@ export default function TableDataGrid({
     [config || childConfig, reference]
   );
 
+  const handleCloseReference = () => {
+    setReference(null);
+  };
+
   if (!display) return null;
 
   return (
@@ -118,22 +140,27 @@ export default function TableDataGrid({
         masterLoadedTime={masterLoadedTime}
       />
       {reference && (
-        <TableDataGrid
-          key={`${reference.schemaName}.${reference.pureName}`}
-          conid={conid}
-          database={database}
-          pureName={reference.pureName}
-          schemaName={reference.schemaName}
-          changeSetState={changeSetState}
-          dispatchChangeSet={dispatchChangeSet}
-          toolbarPortalRef={toolbarPortalRef}
-          tabVisible={false}
-          config={childConfig}
-          setConfig={setChildConfig}
-          cache={childCache}
-          setCache={setChildCache}
-          masterLoadedTime={myLoadedTime}
-        />
+        <ReferenceContainer>
+          <ReferenceHeader reference={reference} onClose={handleCloseReference} />
+          <ReferenceGridWrapper>
+            <TableDataGrid
+              key={`${reference.schemaName}.${reference.pureName}`}
+              conid={conid}
+              database={database}
+              pureName={reference.pureName}
+              schemaName={reference.schemaName}
+              changeSetState={changeSetState}
+              dispatchChangeSet={dispatchChangeSet}
+              toolbarPortalRef={toolbarPortalRef}
+              tabVisible={false}
+              config={childConfig}
+              setConfig={setChildConfig}
+              cache={childCache}
+              setCache={setChildCache}
+              masterLoadedTime={myLoadedTime}
+            />
+          </ReferenceGridWrapper>
+        </ReferenceContainer>
       )}
     </VerticalSplitter>
   );

packages/web/src/widgets/ToolbarButton.js

@@ -37,10 +37,10 @@ const StyledIconSpan = styled.span`
 
 const ButtonDivInner = styled.div`
   position: relative;
-  top: 2px;
+  top: ${(props) => props.patchY}px;
 `;
 
-export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined }) {
+export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
   const Icon = icon;
   return (
     <ButtonDiv
@@ -49,7 +49,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
       }}
       disabled={disabled}
     >
-      <ButtonDivInner>
+      <ButtonDivInner patchY={patchY}>
         {Icon && (
           <StyledIconSpan disabled={disabled}>
             <i className={icon} />