Revert "feat: All roles combined into Contributor role" (#885)

Reverts #877

components/AccessBox.tsx

@@ -8,6 +8,7 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
 
 import BaseAPIServices from "../services/BaseAPIServices";
 import { accessRoles } from "@/types/AccessRoles";
+import { getOwner } from "utils/getOwner";
 import { notifyOthers } from "@/services/notifyOthers";
 import style from "./AccessBox.module.scss";
 import { unknownErrorToString } from "utils/isError";
@@ -41,6 +42,7 @@ export function AccessBox(props: {
     <div className={style.box}>
       <TopSection title={"User access"} handleClose={props.handleClose} />
       <MiddleSection
+        owner={getOwner(props.project) ?? ""}
         users={userAccesses}
         vsmId={vsmProjectID}
         loading={isLoading}
@@ -63,6 +65,7 @@ export function TopSection(props: { title: string; handleClose: () => void }) {
 }
 
 function MiddleSection(props: {
+  owner: string;
   users: userAccess[];
   vsmId: number;
   loading: boolean;

components/RoleSelect.tsx

@@ -14,6 +14,7 @@ export const RoleSelect = (props: {
       onChange={(event) => props.onChange(event.target.value)}
       disabled={props.disabled}
     >
+      <option value="Admin">Admin</option>
       <option value="Contributor">Contributor</option>
       <option value="Remove">Remove</option>
     </select>

components/UserItem.tsx

@@ -45,6 +45,8 @@ export const UserItem = ({
           <Icon data={add} size={16} />
         </Button>
       );
+    } else if (role === "Owner") {
+      return "Owner";
     } else {
       return (
         <RoleSelect

components/UserSearch.tsx

@@ -7,7 +7,6 @@ import { ChangeEvent, useState } from "react";
 import { useQuery } from "react-query";
 import { UserItem } from "./UserItem";
 import styles from "./UserSearch.module.scss";
-import { accessRoles } from "@/types/AccessRoles";
 
 type UserSearch = {
   isAdmin: boolean;
@@ -40,28 +39,23 @@ export const UserSearch = ({
   const InfoNoEditAccess = () => (
     <div className={styles.infoCannotEdit}>
       <Typography variant="body_short">
-        You need to be {accessRoles.Contributor} to manage sharing
+        You need to be owner or admin to manage sharing
       </Typography>
     </div>
   );
 
-  const UserItems = () => {
-    const isSingleUser = users && users.length === 1;
-    return (
-      users &&
-      users.map((user) => (
-        <UserItem
-          key={user.accessId}
-          shortName={user.user}
-          fullName={user.fullName}
-          role={user.role}
-          onRoleChange={(role) => onRoleChange(user, role)}
-          onRemove={() => onRemove(user)}
-          disabled={isSingleUser}
-        />
-      ))
-    );
-  };
+  const UserItems = () =>
+    users?.map((user) => (
+      <UserItem
+        key={user.accessId}
+        shortName={user.user}
+        fullName={user.fullName}
+        role={user.role}
+        onRoleChange={(role) => onRoleChange(user, role)}
+        onRemove={() => onRemove(user)}
+        disabled={!isAdmin}
+      />
+    ));
 
   const SearchedUserItems = () =>
     usersSearched

components/canvas/hooks/useAccess.tsx

@@ -2,15 +2,14 @@ import { Project } from "@/types/Project";
 import { getMyAccess } from "@/utils/getMyAccess";
 import router from "next/router";
 import { useUserAccount } from "./useUserAccount";
-import { accessRoles } from "@/types/AccessRoles";
 
 export const useAccess = (project: Project) => {
   const { version } = router.query;
-  const { Contributor, Reader } = accessRoles;
   const account = useUserAccount();
   const myAccess = getMyAccess(project, account);
-  const userCanEdit = !version && myAccess !== Reader;
-  const isAdmin = myAccess === Contributor;
+  const userCanEdit = !version && myAccess !== "Reader";
+  const isAdmin = myAccess === "Admin" || myAccess === "Owner";
+
   return {
     myAccess,
     userCanEdit,

layouts/canvas.tsx

@@ -39,6 +39,7 @@ import { UserMenu } from "@/components/AppHeader/UserMenu";
 import { disableKeyboardZoomShortcuts } from "@/utils/disableKeyboardZoomShortcuts";
 import { disableMouseWheelZoom } from "@/utils/disableMouseWheelZoom";
 import { getMyAccess } from "@/utils/getMyAccess";
+import { getOwner } from "utils/getOwner";
 import { notifyOthers } from "@/services/notifyOthers";
 import packageJson from "../package.json";
 import styles from "./default.layout.module.scss";
@@ -47,7 +48,6 @@ import { useRouter } from "next/router";
 import { useProjectId } from "@/hooks/useProjectId";
 import { EditableTitle } from "components/EditableTitle";
 import { getProjectName } from "@/utils/getProjectName";
-import { accessRoles } from "@/types/AccessRoles";
 
 export const CanvasLayout = ({ children }: { children: ReactNode }) => {
   const isAuthenticated = useIsAuthenticated();
@@ -107,10 +107,9 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
   const myAccess = getMyAccess(project ?? null, account);
-  const { Contributor, Reader } = accessRoles;
-  const userCanEdit = myAccess !== Reader;
+  const userCanEdit = myAccess !== "Reader";
   const userCannotEdit = !userCanEdit;
-  const isAdmin = myAccess === Contributor;
+  const isAdmin = myAccess === "Admin" || myAccess === "Owner";
   const projectName = getProjectName(project);
 
   const [visibleShareScrim, setVisibleShareScrim] = useState(false);
@@ -275,7 +274,7 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
               <Menu.Item
                 title={`${
                   userCannotEdit
-                    ? "Only the Contributor can rename this process"
+                    ? "Only the creator, admin or a contributor can rename this process"
                     : "Rename the current process"
                 }`}
                 disabled={userCannotEdit}
@@ -297,7 +296,7 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
                 title={`${
                   isAdmin
                     ? "Delete the current process"
-                    : "Only the Contributor can delete this process"
+                    : "Only the creator can delete this process"
                 }`}
                 disabled={!isAdmin}
                 onKeyDown={(e) => {
@@ -309,6 +308,13 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
                   Delete process
                 </Typography>
               </Menu.Item>
+              {project && (
+                <Menu.Item disabled>
+                  <Typography group="navigation" variant="menu_title" as="span">
+                    Owner: {getOwner(project)}
+                  </Typography>
+                </Menu.Item>
+              )}
             </Menu>
           </div>
         </div>
@@ -373,6 +379,7 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
           </div>
         </div>
       </Scrim>
+
       <Scrim
         open={visibleDeleteScrim}
         onClose={() => setVisibleDeleteScrim(false)}
@@ -381,7 +388,7 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
       >
         <div className={styles.scrimWrapper}>
           {isDeleting ? (
-            <Typography className={styles.deleteText}>Deleting...</Typography>
+            <Typography>Deleting...</Typography>
           ) : (
             <>
               <div className={styles.scrimHeaderWrapper}>
@@ -395,12 +402,17 @@ export const CanvasLayout = ({ children }: { children: ReactNode }) => {
                 )}
                 <p>
                   Are you sure you want to delete this process? By doing so you
-                  will delete
-                  <span className={styles.boldText}> ALL VERSIONS</span> as they
-                  will not be recoverable.
+                  will delete all versions of Current and To-be processes,
+                  neither of which will be recoverable.
                 </p>
               </div>
-              <div className={styles.buttonContainer}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 12,
+                }}
+              >
                 <Button
                   autoFocus
                   variant={"outlined"}

layouts/default.layout.module.scss

@@ -17,7 +17,6 @@
   justify-content: space-between;
   align-items: center;
   border-bottom: solid 1px #dcdcdc;
-  padding: 12px 16px;
 }
 
 .scrimTitle {
@@ -28,8 +27,7 @@
   /* identical to box height, or 150% */
 
   /* Text + static icons/⚪️/Default */
-  color: #565656;
-  font-weight: 500;
+  color: #3d3d3d;
 }
 
 .spaceBetween {
@@ -59,6 +57,7 @@
 .scrimWrapper {
   background-color: white;
   border-radius: 2px;
+  padding: 24px;
   max-width: 80vw;
   max-height: 80vh;
 
@@ -67,14 +66,12 @@
   justify-content: space-between;
   max-width: 450px;
 }
-
 .scrimContent {
   font-family: Equinor;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0em;
   text-align: left;
-  padding: 0px 16px;
 }
 
 .image {
@@ -124,18 +121,3 @@
 .snackbar {
   margin: 12px;
 }
-
-.boldText {
-  font-weight: bold;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 0px 16px 16px;
-}
-
-.deleteText {
-  padding: 16px;
-}

types/AccessRoles.ts

@@ -1,4 +1,4 @@
 export const accessRoles = {
   Contributor: "Contributor",
-  Reader: "Reader",
+  Admin: "Admin",
 };

types/UserAccessRole.tsx

@@ -1 +1 @@
-export type userAccessRole = "Contributor" | "Reader";
+export type userAccessRole = "Owner" | "Admin" | "Contributor" | "Reader";

utils/getOwner.ts

@@ -0,0 +1,7 @@
+import { Project } from "types/Project";
+
+// Get the owner of a project
+export function getOwner(vsm: Project) {
+  const access = vsm?.userAccesses.find((u) => u.role === "Owner");
+  return access ? access.fullName : null;
+}