Change library group permissions

src/components/pages/content/ContentLibrary.js

@@ -109,9 +109,9 @@ class ContentLibrary extends React.Component {
             </div>
             <Tabs
               options={[
-                ["Viewers", "accessor"],
-                ["Contributors", "contributor"],
-                ["Reviewers", "reviewer"]
+                ["View", "accessor"],
+                ["Contribute", "contributor"],
+                ["Manage", "reviewer"]
               ]}
               className="secondary"
               selected={this.state.groupsView}

src/components/pages/content/ContentLibraryGroupForm.js

@@ -13,9 +13,7 @@ class ContentLibraryGroupForm extends React.Component {
 
     this.state = {
       groupAddress: "",
-      accessor: false,
-      reviewer: false,
-      contributor: false
+      selectedPermission: ""
     };
 
     this.PageContent = this.PageContent.bind(this);
@@ -28,19 +26,19 @@ class ContentLibraryGroupForm extends React.Component {
 
     this.setState({
       groupAddress: event.target.value,
-      accessor: !!permissions.accessor,
-      contributor: !!permissions.contributor,
-      reviewer: !!permissions.reviewer
+      selectedPermission: (
+        permissions.reviewer ? "MANAGE" : permissions.contributor ? "CONTRIBUTE" : permissions.accessor ? "VIEW" : ""
+      )
     });
   }
 
   async HandleSubmit() {
     await this.props.libraryStore.UpdateContentLibraryGroup({
       libraryId: this.props.libraryStore.libraryId,
       groupAddress: this.state.groupAddress,
-      accessor: this.state.accessor,
-      reviewer: this.state.reviewer,
-      contributor: this.state.contributor
+      accessor: this.state.selectedPermission === "VIEW",
+      reviewer: this.state.selectedPermission === "MANAGE",
+      contributor: this.state.selectedPermission === "CONTRIBUTE"
     });
 
     await this.props.LoadGroups();
@@ -102,27 +100,54 @@ class ContentLibraryGroupForm extends React.Component {
             >
               <div className="form-content">
                 { this.Groups() }
+              </div>
 
-                <label htmlFor="accessor">Viewer</label>
+              <div className="radio-item">
                 <input
-                  type="checkbox"
-                  checked={this.state.accessor}
-                  onChange={() => this.setState({accessor: !this.state.accessor})}
+                  type="radio"
+                  id="view"
+                  checked={this.state.selectedPermission === "VIEW"}
+                  value={this.state.selectedPermission === "VIEW"}
+                  onChange={() => this.setState({selectedPermission: "VIEW"})}
                 />
+                <div className="radio-label">
+                  <label htmlFor="view">View</label>
+                  <div className="radio-helper-text">
+                    List content objects in the library. View library metadata.
+                  </div>
+                </div>
+              </div>
 
-                <label htmlFor="contributor">Contributor</label>
+              <div className="radio-item">
                 <input
-                  type="checkbox"
-                  checked={this.state.contributor}
-                  onChange={() => this.setState({contributor: !this.state.contributor})}
+                  type="radio"
+                  id="contribute"
+                  checked={this.state.selectedPermission === "CONTRIBUTE"}
+                  value={this.state.selectedPermission === "CONTRIBUTE"}
+                  onChange={() => this.setState({selectedPermission: "CONTRIBUTE"})}
                 />
+                <div className="radio-label">
+                  <label htmlFor="contribute">Contribute</label>
+                  <div className="radio-helper-text">
+                    List and create new content objects in the library. View library metadata.
+                  </div>
+                </div>
+              </div>
 
-                <label htmlFor="reviewer">Reviewer</label>
+              <div className="radio-item">
                 <input
-                  type="checkbox"
-                  checked={this.state.reviewer}
-                  onChange={() => this.setState({reviewer: !this.state.reviewer})}
+                  type="radio"
+                  id="manage"
+                  checked={this.state.selectedPermission === "MANAGE"}
+                  value={this.state.selectedPermission === "MANAGE"}
+                  onChange={() => this.setState({selectedPermission: "MANAGE"})}
                 />
+                <div className="radio-label">
+                  <label htmlFor="manage">Manage</label>
+                  <div className="radio-helper-text">
+                    List, create and delete content objects in the library. Edit library metadata.
+                  </div>
+                </div>
               </div>
             </Form>
           )}

src/static/stylesheets/forms.scss

@@ -108,6 +108,32 @@ form {
   }
 }
 
+.-elv-form {
+  input {
+    &[type="radio"] {
+      cursor: pointer;
+      height: 100%;
+      margin: 3px 0 0;
+      width: 1rem;
+    }
+  }
+}
+
+.radio-item {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: 2rem; // sass-lint:disable-line no-misspelled-properties
+  margin-bottom: 1rem;
+
+  .radio-helper-text {
+    color: $elv-color-text-lighter;
+    font-size: $elv-font-m;
+    margin-top: $elv-spacing-xxs;
+  }
+}
+
+
 fieldset {
   display: flex;
   flex-direction: column;