feat: All roles combined into Contributor role (#897)

- [x] Delete process confirmation text updated
- [x] All three roles combined into contributor and have all the access
which the owner, admin has access
- [x]  Updated at all places where role plays a major role
- [x]  Owner in the dropdown at process name has been removed.

components/AccessBox.tsx

@@ -8,7 +8,6 @@ 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";
@@ -42,7 +41,6 @@ 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}
@@ -65,7 +63,6 @@ export function TopSection(props: { title: string; handleClose: () => void }) {
 }
 
 function MiddleSection(props: {
-  owner: string;
   users: userAccess[];
   vsmId: number;
   loading: boolean;

components/RoleSelect.tsx

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

components/UserSearch.tsx

@@ -7,6 +7,7 @@ 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;
@@ -39,23 +40,28 @@ export const UserSearch = ({
   const InfoNoEditAccess = () => (
     <div className={styles.infoCannotEdit}>
       <Typography variant="body_short">
-        You need to be owner or admin to manage sharing
+        You need to be {accessRoles.Contributor} to manage sharing
       </Typography>
     </div>
   );
 
-  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 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 SearchedUserItems = () =>
     usersSearched

components/canvas/hooks/useAccess.tsx

@@ -2,14 +2,15 @@ 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 === "Admin" || myAccess === "Owner";
-
+  const userCanEdit = !version && myAccess !== Reader;
+  const isAdmin = myAccess === Contributor;
   return {
     myAccess,
     userCanEdit,

layouts/canvas.tsx

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

layouts/default.layout.module.scss

@@ -17,6 +17,7 @@
   justify-content: space-between;
   align-items: center;
   border-bottom: solid 1px #dcdcdc;
+  padding: 12px 16px;
 }
 
 .scrimTitle {
@@ -27,7 +28,8 @@
   /* identical to box height, or 150% */
 
   /* Text + static icons/⚪️/Default */
-  color: #3d3d3d;
+  color: #565656;
+  font-weight: 500;
 }
 
 .spaceBetween {
@@ -57,7 +59,6 @@
 .scrimWrapper {
   background-color: white;
   border-radius: 2px;
-  padding: 24px;
   max-width: 80vw;
   max-height: 80vh;
 
@@ -66,12 +67,14 @@
   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 {
@@ -121,3 +124,18 @@
 .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",
-  Admin: "Admin",
+  Reader: "Reader",
 };

types/UserAccessRole.tsx

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