show next form view from form view

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,
+    }
+  );
+}