diff --git a/frontend/src/component/context/Context.module.scss b/frontend/src/component/context/Context.module.scss
index b320f35907..b3a7561edb 100644
--- a/frontend/src/component/context/Context.module.scss
+++ b/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 > * {
diff --git a/frontend/src/component/project/form-project-component.jsx b/frontend/src/component/project/form-project-component.jsx
index c4aeef2467..03e8ae8248 100644
--- a/frontend/src/component/project/form-project-component.jsx
+++ b/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)}
/>
-
-
-
+
+
+
+ } />
+
);
diff --git a/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap b/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
index bb27aafbde..3a7a5768f2 100644
--- a/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
+++ b/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
@@ -72,9 +72,6 @@ exports[`it supports editMode 1`] = `
Update
-
@@ -217,3 +211,48 @@ exports[`renders correctly for creating 1`] = `
`;
+
+exports[`renders correctly for creating without permissions 1`] = `
+
+
+
+
+
+ Create Tag type
+
+
+
+
+
+
+
+ Tag types allows you to group tags together in the management UI
+
+
+
+
+
+`;
diff --git a/frontend/src/component/tag-types/__tests__/tag-type-create-component-test.js b/frontend/src/component/tag-types/__tests__/tag-type-create-component-test.js
index 187de7478d..645ac0d259 100644
--- a/frontend/src/component/tag-types/__tests__/tag-type-create-component-test.js
+++ b/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(
+
{
editMode={false}
submit={jest.fn()}
/>
+
+
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly for creating without permissions', () => {
+ const tree = renderer
+ .create(
+
+
+ Promise.resolve(true)}
+ tagType={{ name: '', description: '', icon: '' }}
+ editMode={false}
+ submit={jest.fn()}
+ />
+
)
.toJSON();
@@ -29,6 +55,7 @@ test('it supports editMode', () => {
const tree = renderer
.create(
+
{
editMode
submit={jest.fn()}
/>
+
)
.toJSON();
diff --git a/frontend/src/component/tag-types/form-tag-type-component.js b/frontend/src/component/tag-types/form-tag-type-component.js
index 5f0838d5e5..8eed8e0a45 100644
--- a/frontend/src/component/tag-types/form-tag-type-component.js
+++ b/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"
/>
-
-
-
+
+
+
+ } elseShow={You do not have permissions to save.} />