fix: add permissions for tag-types and project

frontend/src/component/context/Context.module.scss

@@ -18,7 +18,7 @@
 
 .supporting {
     font-size: var(--caption-size);
-    max-width: 450px;
+    max-width: 800px;
 }
 
 .container {
@@ -40,7 +40,7 @@
 .inset {
     background-color: rgb(250, 250, 250);
     padding: var(--card-padding);
-    max-width: 450px;
+    max-width: 650px;
 }
 
 .chip {
@@ -57,7 +57,7 @@
 
 .formContainer {
     margin-bottom: 1.5rem;
-    max-width: 350px;
+    max-width: 650px;
 }
 
 .formContainer > *, .inset > * {

frontend/src/component/project/form-project-component.jsx

@@ -7,8 +7,13 @@ import classnames from 'classnames';
 import { FormButtons, styles as commonStyles } from '../common';
 import { trim } from '../common/util';
 import PageContent from '../common/PageContent/PageContent';
+import AccessContext from '../../contexts/AccessContext';
+import ConditionallyRender from '../common/ConditionallyRender';
+import { CREATE_PROJECT } from '../AccessProvider/permissions';
 
 class AddContextComponent extends Component {
+    static contextType = AccessContext;
+
     constructor(props) {
         super(props);
         this.state = {
@@ -60,6 +65,7 @@ class AddContextComponent extends Component {
 
     render() {
         const { project, errors } = this.state;
+        const { hasAccess } = this.context;
         const { editMode } = this.props;
         const submitText = editMode ? 'Update' : 'Create';
 
@@ -110,9 +116,12 @@ class AddContextComponent extends Component {
                         value={project.description}
                         onChange={v => this.setValue('description', v.target.value)}
                     />
+                    <ConditionallyRender condition={hasAccess(CREATE_PROJECT)} show={
                         <div className={styles.formButtons}>
                             <FormButtons submitText={submitText} onCancel={this.onCancel} />
                         </div>
+                    } />
+                    
                 </form>
             </PageContent>
         );

frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap

@@ -72,9 +72,6 @@ exports[`it supports editMode 1`] = `
                 </span>
                 Update
               </span>
-              <span
-                className="MuiTouchRipple-root"
-              />
             </button>
              
             <button
@@ -100,9 +97,6 @@ exports[`it supports editMode 1`] = `
               >
                 Cancel
               </span>
-              <span
-                className="MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>
@@ -217,3 +211,48 @@ exports[`renders correctly for creating 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders correctly for creating without permissions 1`] = `
+<div
+  className="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
+>
+  <div
+    className="makeStyles-headerContainer-1"
+  >
+    <div
+      className="makeStyles-headerTitleContainer-5"
+    >
+      <div
+        className=""
+      >
+        <h2
+          className="MuiTypography-root makeStyles-headerTitle-6 MuiTypography-h2"
+        >
+          Create Tag type
+        </h2>
+      </div>
+    </div>
+  </div>
+  <div
+    className="makeStyles-bodyContainer-2"
+  >
+    <section
+      className="contentSpacing tagTypeContainer"
+    >
+      <h6
+        className="MuiTypography-root MuiTypography-subtitle1"
+      >
+        Tag types allows you to group tags together in the management UI
+      </h6>
+      <form
+        className="addTagTypeForm contentSpacing"
+        onSubmit={[Function]}
+      >
+        <span>
+          You do not have permissions to save.
+        </span>
+      </form>
+    </section>
+  </div>
+</div>
+`;

frontend/src/component/tag-types/__tests__/tag-type-create-component-test.js

@@ -3,6 +3,9 @@ import { ThemeProvider } from '@material-ui/core';
 import TagTypes from '../form-tag-type-component';
 import renderer from 'react-test-renderer';
 import theme from '../../../themes/main-theme';
+import AccessProvider from '../../AccessProvider/AccessProvider';
+import { createFakeStore } from '../../../accessStoreFake';
+import { CREATE_TAG_TYPE, UPDATE_TAG_TYPE } from '../../AccessProvider/permissions';
 
 jest.mock('@material-ui/core/TextField');
 
@@ -10,6 +13,7 @@ test('renders correctly for creating', () => {
     const tree = renderer
         .create(
             <ThemeProvider theme={theme}>
+                <AccessProvider store={createFakeStore([{permission: CREATE_TAG_TYPE}])}>
                 <TagTypes
                     history={{}}
                     title="Add tag type"
@@ -19,6 +23,28 @@ test('renders correctly for creating', () => {
                     editMode={false}
                     submit={jest.fn()}
                 />
+                </AccessProvider>
+            </ThemeProvider>
+        )
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly for creating without permissions', () => {
+    const tree = renderer
+        .create(
+            <ThemeProvider theme={theme}>
+                <AccessProvider store={createFakeStore([])}>
+                <TagTypes
+                    history={{}}
+                    title="Add tag type"
+                    createTagType={jest.fn()}
+                    validateName={() => Promise.resolve(true)}
+                    tagType={{ name: '', description: '', icon: '' }}
+                    editMode={false}
+                    submit={jest.fn()}
+                />
+                </AccessProvider>
             </ThemeProvider>
         )
         .toJSON();
@@ -29,6 +55,7 @@ test('it supports editMode', () => {
     const tree = renderer
         .create(
             <ThemeProvider theme={theme}>
+                <AccessProvider store={createFakeStore([{permission: UPDATE_TAG_TYPE}])}>
                 <TagTypes
                     history={{}}
                     title="Add tag type"
@@ -38,6 +65,7 @@ test('it supports editMode', () => {
                     editMode
                     submit={jest.fn()}
                 />
+                </AccessProvider>
             </ThemeProvider>
         )
         .toJSON();

frontend/src/component/tag-types/form-tag-type-component.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -8,6 +8,9 @@ import { Typography, TextField } from '@material-ui/core';
 
 import styles from './TagType.module.scss';
 import commonStyles from '../common/common.module.scss';
+import AccessContext from '../../contexts/AccessContext';
+import { CREATE_TAG_TYPE, UPDATE_TAG_TYPE } from '../AccessProvider/permissions';
+import ConditionallyRender from '../common/ConditionallyRender';
 
 const AddTagTypeComponent = ({ tagType, validateName, submit, history, editMode }) => {
     const [tagTypeName, setTagTypeName] = useState(tagType.name || '');
@@ -17,6 +20,7 @@ const AddTagTypeComponent = ({ tagType, validateName, submit, history, editMode
         name: undefined,
         description: undefined,
     });
+    const { hasAccess } = useContext(AccessContext);
 
     const onValidateName = async evt => {
         evt.preventDefault();
@@ -80,9 +84,11 @@ const AddTagTypeComponent = ({ tagType, validateName, submit, history, editMode
                         variant="outlined"
                         size="small"
                     />
+                    <ConditionallyRender condition={hasAccess(editMode ? UPDATE_TAG_TYPE : CREATE_TAG_TYPE)} show={
                         <div className={styles.formButtons}>
                             <FormButtons submitText={submitText} onCancel={onCancel} />
                         </div>
+                    } elseShow={<span>You do not have permissions to save.</span>} />
                 </form>
             </section>
         </PageContent>