Add view-only user.

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' },

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)}>
+      <FormRow label={formatMessage(labels.role)}>{renderRole(role)}</FormRow>
-        {formatMessage(labels[role] || labels.unknown)}
-      </FormRow>
       {!cloudMode && (
         <FormRow label={formatMessage(labels.password)}>
           <PasswordChangeButton />

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,6 +51,8 @@ export default function TeamsList() {
   );
 
   const createButton = (
+    <>
+      {user.role !== ROLES.viewOnly && (
         <ModalTrigger>
           <Button variant="primary">
             <Icon>
@@ -59,6 +64,8 @@ export default function TeamsList() {
             {close => <TeamAddForm onSave={handleSave} onClose={close} />}
           </Modal>
         </ModalTrigger>
+      )}
+    </>
   );
 
   return (

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>

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>

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,6 +27,8 @@ export function WebsitesList() {
   };
 
   const addButton = (
+    <>
+      {user.role !== ROLES.viewOnly && (
         <ModalTrigger>
           <Button variant="primary">
             <Icon>
@@ -37,6 +40,8 @@ export function WebsitesList() {
             {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
           </Modal>
         </ModalTrigger>
+      )}
+    </>
   );
 
   return (

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;