show next form view from form view

packages/web/src/datagrid/DataGridCore.js

@@ -31,6 +31,7 @@ import useTheme from '../theme/useTheme';
 import { useShowMenu } from '../modals/showMenu';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import axios from '../utility/axios';
+import openReferenceForm from '../formview/openReferenceForm';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -305,33 +306,7 @@ export default function DataGridCore(props) {
       formViewAvailable && display.baseTable && display.baseTable.primaryKey
         ? (rowData, column) => {
             if (column) {
-              const formViewKey = _.fromPairs(
+              openReferenceForm(rowData, column, openNewTab, conid, database);
-                column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
-              );
-              console.log('formViewKey', formViewKey);
-              openNewTab(
-                {
-                  title: column.foreignKey.refTableName,
-                  icon: 'img table',
-                  tabComponent: 'TableDataTab',
-                  props: {
-                    schemaName: column.foreignKey.refSchemaName,
-                    pureName: column.foreignKey.refTableName,
-                    conid,
-                    database,
-                    objectTypeField: 'tables',
-                  },
-                },
-                {
-                  grid: {
-                    isFormView: true,
-                    formViewKey,
-                  },
-                },
-                {
-                  forceNewTab: true,
-                }
-              );
             } else {
               display.switchToFormView(rowData);
             }

packages/web/src/datagrid/DataGridRow.js

@@ -129,7 +129,7 @@ const AutoFillPoint = styled.div`
   cursor: crosshair;
 `;
 
-const ShowFormButton = styled.div`
+export const ShowFormButton = styled.div`
   position: absolute;
   right: 0px;
   top: 1px;

packages/web/src/formview/FormView.js

@@ -12,10 +12,13 @@ import FormViewToolbar from './FormViewToolbar';
 import { useShowMenu } from '../modals/showMenu';
 import FormViewContextMenu from './FormViewContextMenu';
 import keycodes from '../utility/keycodes';
-import { CellFormattedValue } from '../datagrid/DataGridRow';
+import { CellFormattedValue, ShowFormButton } from '../datagrid/DataGridRow';
 import { cellFromEvent } from '../datagrid/selection';
 import InplaceEditor from '../datagrid/InplaceEditor';
 import { copyTextToClipboard } from '../utility/clipboard';
+import { FontIcon } from '../icons';
+import openReferenceForm from './openReferenceForm';
+import useOpenNewTab from '../utility/useOpenNewTab';
 
 const Table = styled.table`
   border-collapse: collapse;
@@ -132,6 +135,7 @@ export default function FormView(props) {
   const focusFieldRef = React.useRef(null);
   const [currentCell, setCurrentCell] = React.useState([0, 0]);
   const cellRefs = React.useRef({});
+  const openNewTab = useOpenNewTab();
 
   const rowCount = Math.floor((wrapperHeight - 20) / rowHeight);
   const columnChunks = _.chunk(formDisplay.columns, rowCount);
@@ -476,12 +480,28 @@ export default function FormView(props) {
                   />
                 ) : (
                   <>
-                    <CellFormattedValue value={rowData && rowData[col.columnName]} dataType={col.dataType} theme={theme} />
+                    <CellFormattedValue
+                      value={rowData && rowData[col.columnName]}
+                      dataType={col.dataType}
+                      theme={theme}
+                    />
                     {!!col.hintColumnName &&
                       rowData &&
                       !(rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) && (
                         <HintSpan>{rowData[col.hintColumnName]}</HintSpan>
                       )}
+                    {col.foreignKey && rowData && rowData[col.uniqueName] && (
+                      <ShowFormButton
+                        theme={theme}
+                        className="buttonLike"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openReferenceForm(rowData, col, openNewTab, conid, database);
+                        }}
+                      >
+                        <FontIcon icon="icon form" />
+                      </ShowFormButton>
+                    )}
                   </>
                 )}
               </TableBodyCell>

packages/web/src/formview/openReferenceForm.js

@@ -0,0 +1,30 @@
+import _ from 'lodash';
+
+export default function openReferenceForm(rowData, column, openNewTab, conid, database) {
+  const formViewKey = _.fromPairs(
+    column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
+  );
+  openNewTab(
+    {
+      title: column.foreignKey.refTableName,
+      icon: 'img table',
+      tabComponent: 'TableDataTab',
+      props: {
+        schemaName: column.foreignKey.refSchemaName,
+        pureName: column.foreignKey.refTableName,
+        conid,
+        database,
+        objectTypeField: 'tables',
+      },
+    },
+    {
+      grid: {
+        isFormView: true,
+        formViewKey,
+      },
+    },
+    {
+      forceNewTab: true,
+    }
+  );
+}