From 9ec27012289c4eddd9921890357e07f5ea388d79 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Thu, 6 Jul 2023 23:02:16 -0700
Subject: [PATCH] Add view-only user.

---
 components/messages.js                        |  1 +
 .../pages/settings/profile/ProfileDetails.js  | 19 ++++++++++--
 components/pages/settings/teams/TeamsList.js  | 29 ++++++++++++-------
 .../pages/settings/users/UserAddForm.js       |  4 +++
 .../pages/settings/users/UserEditForm.js      |  4 +++
 .../pages/settings/websites/WebsitesList.js   | 27 ++++++++++-------
 lib/constants.ts                              |  2 ++
 7 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/components/messages.js b/components/messages.js
index e183281b..7ddbdd2d 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -15,6 +15,7 @@ export const labels = defineMessages({
   password: { id: 'label.password', defaultMessage: 'Password' },
   role: { id: 'label.role', defaultMessage: 'Role' },
   user: { id: 'label.user', defaultMessage: 'User' },
+  viewOnly: { id: 'label.view-only', defaultMessage: 'View only' },
   admin: { id: 'label.admin', defaultMessage: 'Administrator' },
   confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
   details: { id: 'label.details', defaultMessage: 'Details' },
diff --git a/components/pages/settings/profile/ProfileDetails.js b/components/pages/settings/profile/ProfileDetails.js
index d8fdf26e..d1690220 100644
--- a/components/pages/settings/profile/ProfileDetails.js
+++ b/components/pages/settings/profile/ProfileDetails.js
@@ -7,6 +7,7 @@ import PasswordChangeButton from './PasswordChangeButton';
 import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
+import { ROLES } from 'lib/constants';
 
 export function ProfileDetails() {
   const { user } = useUser();
@@ -19,12 +20,24 @@ export function ProfileDetails() {
 
   const { username, role } = user;
 
+  const renderRole = value => {
+    if (value === ROLES.user) {
+      return formatMessage(labels.user);
+    }
+    if (value === ROLES.admin) {
+      return formatMessage(labels.admin);
+    }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
+
+    return formatMessage(labels.unknown);
+  };
+
   return (
     <Form>
       <FormRow label={formatMessage(labels.username)}>{username}</FormRow>
-      <FormRow label={formatMessage(labels.role)}>
-        {formatMessage(labels[role] || labels.unknown)}
-      </FormRow>
+      <FormRow label={formatMessage(labels.role)}>{renderRole(role)}</FormRow>
       {!cloudMode && (
         <FormRow label={formatMessage(labels.password)}>
           <PasswordChangeButton />
diff --git a/components/pages/settings/teams/TeamsList.js b/components/pages/settings/teams/TeamsList.js
index 783696b1..0c82639b 100644
--- a/components/pages/settings/teams/TeamsList.js
+++ b/components/pages/settings/teams/TeamsList.js
@@ -9,8 +9,11 @@ import Icons from 'components/icons';
 import TeamJoinForm from './TeamJoinForm';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
+import { ROLES } from 'lib/constants';
+import useUser from 'hooks/useUser';
 
 export default function TeamsList() {
+  const { user } = useUser();
   const { formatMessage, labels, messages } = useMessages();
   const [update, setUpdate] = useState(0);
   const { get, useQuery } = useApi();
@@ -48,17 +51,21 @@ export default function TeamsList() {
   );
 
   const createButton = (
-    <ModalTrigger>
-      <Button variant="primary">
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-        <Text>{formatMessage(labels.createTeam)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.createTeam)}>
-        {close => <TeamAddForm onSave={handleSave} onClose={close} />}
-      </Modal>
-    </ModalTrigger>
+    <>
+      {user.role !== ROLES.viewOnly && (
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.createTeam)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.createTeam)}>
+            {close => <TeamAddForm onSave={handleSave} onClose={close} />}
+          </Modal>
+        </ModalTrigger>
+      )}
+    </>
   );
 
   return (
diff --git a/components/pages/settings/users/UserAddForm.js b/components/pages/settings/users/UserAddForm.js
index 63b247a1..bb408749 100644
--- a/components/pages/settings/users/UserAddForm.js
+++ b/components/pages/settings/users/UserAddForm.js
@@ -35,6 +35,9 @@ export function UserAddForm({ onSave, onClose }) {
     if (value === ROLES.admin) {
       return formatMessage(labels.admin);
     }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
   };
 
   return (
@@ -52,6 +55,7 @@ export function UserAddForm({ onSave, onClose }) {
       <FormRow label={formatMessage(labels.role)}>
         <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
           <Dropdown renderValue={renderValue}>
+            <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
             <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
           </Dropdown>
diff --git a/components/pages/settings/users/UserEditForm.js b/components/pages/settings/users/UserEditForm.js
index d5e671e0..887531e8 100644
--- a/components/pages/settings/users/UserEditForm.js
+++ b/components/pages/settings/users/UserEditForm.js
@@ -35,6 +35,9 @@ export function UserEditForm({ userId, data, onSave }) {
     if (value === ROLES.admin) {
       return formatMessage(labels.admin);
     }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
   };
 
   return (
@@ -57,6 +60,7 @@ export function UserEditForm({ userId, data, onSave }) {
       <FormRow label={formatMessage(labels.role)}>
         <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
           <Dropdown renderValue={renderValue}>
+            <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
             <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
             <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
           </Dropdown>
diff --git a/components/pages/settings/websites/WebsitesList.js b/components/pages/settings/websites/WebsitesList.js
index 23abd897..de423d0b 100644
--- a/components/pages/settings/websites/WebsitesList.js
+++ b/components/pages/settings/websites/WebsitesList.js
@@ -7,6 +7,7 @@ import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
+import { ROLES } from 'lib/constants';
 
 export function WebsitesList() {
   const { formatMessage, labels, messages } = useMessages();
@@ -26,17 +27,21 @@ export function WebsitesList() {
   };
 
   const addButton = (
-    <ModalTrigger>
-      <Button variant="primary">
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-        <Text>{formatMessage(labels.addWebsite)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.addWebsite)}>
-        {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
-      </Modal>
-    </ModalTrigger>
+    <>
+      {user.role !== ROLES.viewOnly && (
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.addWebsite)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.addWebsite)}>
+            {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+          </Modal>
+        </ModalTrigger>
+      )}
+    </>
   );
 
   return (
diff --git a/lib/constants.ts b/lib/constants.ts
index 8917f735..5772e147 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -92,6 +92,7 @@ export const KAFKA_TOPIC = {
 export const ROLES = {
   admin: 'admin',
   user: 'user',
+  viewOnly: 'view-only',
   teamOwner: 'team-owner',
   teamMember: 'team-member',
 } as const;
@@ -114,6 +115,7 @@ export const ROLE_PERMISSIONS = {
     PERMISSIONS.websiteDelete,
     PERMISSIONS.teamCreate,
   ],
+  [ROLES.viewOnly]: [],
   [ROLES.teamOwner]: [PERMISSIONS.teamUpdate, PERMISSIONS.teamDelete],
   [ROLES.teamMember]: [],
 } as const;