From d1684cb18e7c12f4e85f12b5e47de9e4f91edef7 Mon Sep 17 00:00:00 2001
From: Abbey Reisle <areisle@bcgsc.ca>
Date: Wed, 2 Feb 2022 13:28:08 -0800
Subject: [PATCH] fix: allow readonly user to swap to graph view

closes #28
---
 .../RecordForm/__tests__/index.test.js         |  2 +-
 src/components/RecordForm/index.js             |  3 +++
 .../__tests__/index.test.js                    |  1 +
 src/components/RecordFormStateToggle/index.js  | 18 ++++++++++++------
 .../StatementForm/__tests__/index.test.js      |  2 +-
 src/components/StatementForm/index.js          |  1 +
 src/views/RecordView/index.js                  | 14 ++------------
 7 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/RecordForm/__tests__/index.test.js b/src/components/RecordForm/__tests__/index.test.js
index ea802a73c..1bbb9acfd 100644
--- a/src/components/RecordForm/__tests__/index.test.js
+++ b/src/components/RecordForm/__tests__/index.test.js
@@ -9,7 +9,7 @@ import * as api from '@/services/api';
 
 import RecordForm from '..';
 
-const auth = { user: { '@rid': '23:9' } };
+const auth = { user: { '@rid': '23:9' }, hasWriteAccess: true };
 
 jest.mock('@/services/api', () => {
   const mockRequest = () => ({
diff --git a/src/components/RecordForm/index.js b/src/components/RecordForm/index.js
index 173ac04dc..213052136 100644
--- a/src/components/RecordForm/index.js
+++ b/src/components/RecordForm/index.js
@@ -21,6 +21,7 @@ import { cleanPayload, FORM_VARIANT } from '@/components/util';
 import api from '@/services/api';
 import schema from '@/services/schema';
 
+import { useAuth } from '../Auth';
 import EdgeTable from './EdgeTable';
 import RelatedStatementsTable from './RelatedStatementsTable';
 import RelatedVariantsTable from './RelatedVariantsTable';
@@ -49,6 +50,7 @@ const RecordForm = ({
   ...rest
 }) => {
   const snackbar = useSnackbar();
+  const auth = useAuth();
 
   const [actionInProgress, setActionInProgress] = useState(false);
   const controllers = useRef([]);
@@ -199,6 +201,7 @@ const RecordForm = ({
         <div className={`header__actions header__actions--${variant}`}>
           {onTopClick && (variant === FORM_VARIANT.VIEW || variant === FORM_VARIANT.EDIT) && (
           <RecordFormStateToggle
+            allowEdit={auth.hasWriteAccess}
             message="Are you sure? You will lose your changes."
             onClick={handleToggleState}
             requireConfirm={variant === 'edit' && formIsDirty}
diff --git a/src/components/RecordFormStateToggle/__tests__/index.test.js b/src/components/RecordFormStateToggle/__tests__/index.test.js
index 4f765a693..cf748b920 100644
--- a/src/components/RecordFormStateToggle/__tests__/index.test.js
+++ b/src/components/RecordFormStateToggle/__tests__/index.test.js
@@ -12,6 +12,7 @@ describe('RecordFormStateToggle', () => {
   beforeEach(() => {
     ({ getByText } = render((
       <RecordFormStateToggle
+        allowEdit
         message="Changes you will lose"
         onClick={clickSpy}
         value="view"
diff --git a/src/components/RecordFormStateToggle/index.js b/src/components/RecordFormStateToggle/index.js
index 4d7f3b7ef..684102ca4 100644
--- a/src/components/RecordFormStateToggle/index.js
+++ b/src/components/RecordFormStateToggle/index.js
@@ -14,6 +14,7 @@ import ConfirmActionDialog from '@/components/ActionButton/ConfirmActionDialog';
  *
  * @property {object} props
  * @property {function} props.onClick parent handler function to toggle states
+ * @property {bool} props.allowEdit if true, edit button is shown
  * @property {bool} props.requireConfirm flag to check whether confirmation is needed
  * @property {string} props.message message displayed in confirmation dialog
  * @property {string} props.value starting variant value
@@ -23,6 +24,7 @@ function RecordFormStateToggle({
   requireConfirm,
   message,
   value: inputValue,
+  allowEdit,
 }) {
   const [value, setValue] = useState(inputValue);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -78,12 +80,14 @@ function RecordFormStateToggle({
         >
           <ViewIcon /><span className="toggle-option__text">View</span>
         </ToggleButton>
-        <ToggleButton
-          aria-label="edit"
-          value="edit"
-        >
-          <EditIcon /><span className="toggle-option__text">Edit</span>
-        </ToggleButton>
+        {allowEdit && (
+          <ToggleButton
+            aria-label="edit"
+            value="edit"
+          >
+            <EditIcon /><span className="toggle-option__text">Edit</span>
+          </ToggleButton>
+        )}
       </ToggleButtonGroup>
       {requireConfirm && (
       <ConfirmActionDialog
@@ -99,6 +103,7 @@ function RecordFormStateToggle({
 }
 
 RecordFormStateToggle.propTypes = {
+  allowEdit: PropTypes.bool,
   message: PropTypes.string,
   onClick: PropTypes.func,
   requireConfirm: PropTypes.bool,
@@ -107,6 +112,7 @@ RecordFormStateToggle.propTypes = {
 
 RecordFormStateToggle.defaultProps = {
   onClick: () => {},
+  allowEdit: false,
   requireConfirm: false,
   message: 'Are you sure?',
   value: 'view',
diff --git a/src/components/StatementForm/__tests__/index.test.js b/src/components/StatementForm/__tests__/index.test.js
index a1ac8dcbc..a0f74358f 100644
--- a/src/components/StatementForm/__tests__/index.test.js
+++ b/src/components/StatementForm/__tests__/index.test.js
@@ -9,7 +9,7 @@ import { AuthContext } from '@/components/Auth';
 import StatementForm from '..';
 
 
-const auth = { user: { '@rid': '23:9' } };
+const auth = { user: { '@rid': '23:9' }, hasWriteAccess: true };
 
 jest.mock('@/services/api', () => {
   const mockRequest = () => ({
diff --git a/src/components/StatementForm/index.js b/src/components/StatementForm/index.js
index e9e8dfca3..559c9c6ff 100644
--- a/src/components/StatementForm/index.js
+++ b/src/components/StatementForm/index.js
@@ -314,6 +314,7 @@ const StatementForm = ({
           {civicEvidenceId && <CivicEvidenceLink evidenceId={civicEvidenceId} />}
           {onTopClick && (variant === FORM_VARIANT.VIEW || variant === FORM_VARIANT.EDIT) && (
           <RecordFormStateToggle
+            allowEdit={auth.hasWriteAccess}
             message="Are you sure? You will lose your changes."
             onClick={handleToggleState}
             requireConfirm={variant === 'edit' && formIsDirty}
diff --git a/src/views/RecordView/index.js b/src/views/RecordView/index.js
index 5967b0eac..49437f00f 100644
--- a/src/views/RecordView/index.js
+++ b/src/views/RecordView/index.js
@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
-import { useAuth } from '@/components/Auth';
 import RecordForm from '@/components/RecordForm';
 import StatementForm from '@/components/StatementForm';
 import { HistoryPropType } from '@/components/types';
@@ -49,7 +48,6 @@ const getModelFromName = (path = '', modelName = '', variant = FORM_VARIANT.VIEW
 
 const RecordView = (props) => {
   const { history, match: { path, params: { rid, modelName: modelNameParam, variant } } } = props;
-  const auth = useAuth();
 
   const [recordContent, setRecordContent] = useState({});
   const [modelName, setModelName] = useState(modelNameParam || '');
@@ -164,11 +162,7 @@ const RecordView = (props) => {
         navigateToGraph={navigateToGraphView}
         onError={handleError}
         onSubmit={handleSubmit}
-        onTopClick={
-        auth.hasWriteAccess
-          ? onTopClick
-          : null
-      }
+        onTopClick={onTopClick}
         rid={rid}
         title={DEFAULT_TITLES[variant].replace(':modelName', 'Statement')}
         value={recordContent}
@@ -182,11 +176,7 @@ const RecordView = (props) => {
       navigateToGraph={navigateToGraphView}
       onError={handleError}
       onSubmit={handleSubmit}
-      onTopClick={
-        auth.hasWriteAccess
-          ? onTopClick
-          : null
-      }
+      onTopClick={onTopClick}
       rid={rid}
       title={DEFAULT_TITLES[variant].replace(':modelName', modelName)}
       value={recordContent}