UGG-9-add-workspace-settings-panel

src/common/components/navigation/header/settings/addNewMember.tsx

@@ -0,0 +1,106 @@
+import {
+  Input,
+  Message,
+  Button,
+  IconButton,
+  Label,
+} from '@appquality/unguess-design-system';
+import { Field } from '@zendeskgarden/react-forms';
+import { Form, Formik, FormikProps, FormikValues } from 'formik';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { theme as globalTheme } from 'src/app/theme';
+import * as Yup from 'yup';
+import { usePostWorkspacesByWidUsersMutation } from 'src/features/api';
+import { useAppSelector } from 'src/app/hooks';
+
+const formInitialValues = {
+  email: '',
+};
+
+const EmailTextField = styled(Field)`
+  display: flex;
+  width: 100%;
+  align-items: first baseline;
+  button {
+    margin-left: ${({ theme }) => theme.space.sm};
+  }
+`;
+
+export const AddNewMemberInput = () => {
+  const { t } = useTranslation();
+  const { activeWorkspace } = useAppSelector((state) => state.navigation);
+  const [addNewMember] = usePostWorkspacesByWidUsersMutation();
+
+  if (!activeWorkspace) return null;
+
+  const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email(t('__WORKSPACE_SETTINGS_ADD_MEMBER_INVALID_EMAIL_ERROR'))
+      .required(t('__WORKSPACE_SETTINGS_ADD_MEMBER_REQUIRED_EMAIL_ERROR')),
+  });
+
+  return (
+    <Formik
+      initialValues={formInitialValues}
+      validateOnChange
+      validateOnBlur
+      validationSchema={validationSchema}
+      onSubmit={(values, actions) => {
+        addNewMember({
+          wid: activeWorkspace?.id.toString() || '',
+          body: {
+            email: values.email,
+          },
+        })
+          .then((res) => {
+            actions.setSubmitting(false);
+          })
+          .catch((err) => {
+            console.error(err);
+            actions.setSubmitting(false);
+          });
+      }}
+    >
+      {({
+        errors,
+        getFieldProps,
+        handleSubmit,
+        ...formProps
+      }: FormikProps<{ email: string }>) => (
+        <Form
+          onSubmit={handleSubmit}
+          style={{ marginBottom: globalTheme.space.sm }}
+        >
+          <Label>{t('__WORKSPACE_SETTINGS_ADD_MEMBER_EMAIL_LABEL')}</Label>
+          <EmailTextField>
+            <Input
+              placeholder={t(
+                '__WORKSPACE_SETTINGS_ADD_MEMBER_EMAIL_PLACEHOLDER'
+              )}
+              {...getFieldProps('email')}
+              {...(errors.email && { validation: 'error' })}
+            />
+            <Button
+              isPrimary
+              isPill
+              themeColor={globalTheme.palette.water[600]}
+              type="submit"
+              disabled={formProps.isSubmitting}
+            >
+              {t('__WORKSPACE_SETTINGS_ADD_MEMBER_BUTTON')}
+            </Button>
+          </EmailTextField>
+          {errors.email && (
+            <Message
+              validation="error"
+              style={{ marginTop: globalTheme.space.xs }}
+            >
+              {errors.email}
+            </Message>
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+};

src/common/components/navigation/header/settings/modalFooter.tsx

@@ -0,0 +1,30 @@
+import { Modal, Button } from '@appquality/unguess-design-system';
+import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
+import { getColor } from '@zendeskgarden/react-theming';
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+const FooterWithBorder = styled(Modal.Footer)`
+  border-top: 1px solid ${({ theme }) => getColor(theme.colors.neutralHue, 200)};
+  padding: ${({ theme }) =>
+    `${theme.space.base * 4}px ${theme.space.base * 8}px`};
+  justify-content: start;
+`;
+
+export const WorkspaceSettingsFooter = () => {
+  const { t } = useTranslation();
+
+  return (
+    <FooterWithBorder>
+      <Button
+        isBasic
+        onClick={() => navigator.clipboard.writeText(window.location.href)}
+      >
+        <Button.StartIcon>
+          <LinkIcon />
+        </Button.StartIcon>
+        {t('__WORKSPACE_SETTINGS_MODAL_CTA_COPY_LINK')}
+      </Button>
+    </FooterWithBorder>
+  );
+};

src/common/components/navigation/header/settings/userItem.tsx

@@ -0,0 +1,125 @@
+import {
+  Avatar,
+  Span,
+  SM,
+  Trigger,
+  Menu,
+  Button,
+  Dropdown,
+  Item,
+  Ellipsis,
+} from '@appquality/unguess-design-system';
+import { ReactComponent as ChevronIcon } from 'src/assets/icons/chevron-down-stroke.svg';
+import {
+  GetWorkspacesByWidUsersApiResponse,
+  useDeleteWorkspacesByWidUsersMutation,
+  usePostWorkspacesByWidUsersMutation,
+} from 'src/features/api';
+import styled from 'styled-components';
+import { useState } from 'react';
+import { useAppSelector } from 'src/app/hooks';
+import { useTranslation } from 'react-i18next';
+import { theme as globalTheme } from 'src/app/theme';
+import { getInitials } from '../utils';
+
+const StyledEllipsis = styled(Ellipsis)``;
+const UserListItem = styled.div`
+  display: flex;
+  padding: ${({ theme }) => `${theme.space.xs} 0`};
+  align-items: center;
+  gap: ${({ theme }) => theme.space.sm};
+
+  div.actions {
+    margin-left: auto;
+  }
+
+  ${StyledEllipsis} {
+    width: 300px;
+  }
+`;
+
+export const UserItem = ({
+  user,
+}: {
+  user: GetWorkspacesByWidUsersApiResponse['items'][number];
+}) => {
+  const { t } = useTranslation();
+  const [rotated, setRotated] = useState<boolean>();
+  const { activeWorkspace } = useAppSelector((state) => state.navigation);
+  const { userData } = useAppSelector((state) => state.user);
+  const [removeUser] = useDeleteWorkspacesByWidUsersMutation();
+  const [addNewMember] = usePostWorkspacesByWidUsersMutation();
+
+  const isMe = userData?.email === user.email;
+  const displayName = user.name.length ? user.name : user.email;
+
+  if (!activeWorkspace) return null;
+
+  return (
+    <UserListItem key={`profile_${user.profile_id}`}>
+      <Avatar avatarType="text">{getInitials(displayName)}</Avatar>
+      <div>
+        <StyledEllipsis>
+          {displayName}{' '}
+          {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
+        </StyledEllipsis>
+      </div>
+      <div className="actions">
+        {!isMe && (
+          <Dropdown
+            onStateChange={(options) =>
+              Object.hasOwn(options, 'isOpen') && setRotated(options.isOpen)
+            }
+          >
+            <Trigger>
+              <Button isBasic aria-label="user management actions">
+                {user.invitationPending ? (
+                  <Span hue={globalTheme.palette.orange[600]}>
+                    {t('__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL')}
+                  </Span>
+                ) : (
+                  t('__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL')
+                )}
+                <Button.EndIcon isRotated={rotated}>
+                  <ChevronIcon />
+                </Button.EndIcon>
+              </Button>
+            </Trigger>
+            <Menu placement="bottom-end">
+              {user.invitationPending && (
+                <Item
+                  value="invite"
+                  onClick={() =>
+                    addNewMember({
+                      wid: activeWorkspace.id.toString() || '0',
+                      body: {
+                        email: user.email,
+                      },
+                    }).unwrap()
+                  }
+                >
+                  {t('__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION')}
+                </Item>
+              )}
+              <Item
+                value="remove"
+                onClick={() =>
+                  removeUser({
+                    wid: activeWorkspace.id.toString() || '0',
+                    body: {
+                      user_id: user.id,
+                    },
+                  }).unwrap()
+                }
+              >
+                <Span hue={globalTheme.colors.dangerHue}>
+                  {t('__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION')}
+                </Span>
+              </Item>
+            </Menu>
+          </Dropdown>
+        )}
+      </div>
+    </UserListItem>
+  );
+};

src/common/components/navigation/header/settings/workspaceSettings.tsx

@@ -0,0 +1,59 @@
+import { Button, Modal, ModalClose } from '@appquality/unguess-design-system';
+import { useAppSelector } from 'src/app/hooks';
+import styled from 'styled-components';
+import { ReactComponent as GearIcon } from 'src/assets/icons/gear-fill.svg';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGetWorkspacesByWidUsersQuery } from 'src/features/api';
+import { AddNewMemberInput } from './addNewMember';
+import { UserItem } from './userItem';
+import { WorkspaceSettingsFooter } from './modalFooter';
+
+const FlexContainer = styled.div<{ loading?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${({ theme }) => theme.space.base * 2}px;
+  margin-bottom: ${({ theme }) => theme.space.base * 6}px;
+  min-height: 0;
+  opacity: ${({ loading }) => (loading ? 0.5 : 1)};
+`;
+
+export const WorkspaceSettings = () => {
+  const { activeWorkspace } = useAppSelector((state) => state.navigation);
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const { isLoading, isFetching, data } = useGetWorkspacesByWidUsersQuery({
+    wid: activeWorkspace?.id.toString() || '0',
+  });
+
+  if (!activeWorkspace) return null;
+
+  return (
+    <>
+      <Button isBasic onClick={() => setIsModalOpen(true)}>
+        <Button.StartIcon>
+          <GearIcon />
+        </Button.StartIcon>
+        {t('__WORKSPACE_SETTINGS_CTA_TEXT')}
+      </Button>
+      {isModalOpen && (
+        <Modal onClose={() => setIsModalOpen(false)}>
+          <Modal.Header>{t('__WORKSPACE_SETTINGS_MODAL_TITLE')}</Modal.Header>
+          <Modal.Body>
+            <AddNewMemberInput />
+          </Modal.Body>
+          <Modal.Body style={{ paddingTop: 0 }}>
+            <FlexContainer loading={isLoading || isFetching}>
+              {data?.items.map((user) => (
+                <UserItem user={user} />
+              ))}
+            </FlexContainer>
+          </Modal.Body>
+          <WorkspaceSettingsFooter />
+          <ModalClose />
+        </Modal>
+      )}
+    </>
+  );
+};

src/common/components/navigation/header/workspaceDropdown.tsx

@@ -23,6 +23,7 @@ import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import { useNavigate } from 'react-router-dom';
 import { selectWorkspaces } from 'src/features/workspaces/selectors';
 import { useTranslation } from 'react-i18next';
+import { WorkspaceSettings } from './settings/workspaceSettings';
 
 const StyledEllipsis = styled(Ellipsis)<{ isCompact?: boolean }>`
   ${({ theme, isCompact }) =>
@@ -121,10 +122,12 @@ export const WorkspacesDropdown = () => {
             workspaces.map((item) => <Item value={item}>{item.company}</Item>)}
         </Menu>
       </Dropdown>
+      <WorkspaceSettings />
     </DropdownItem>
   ) : (
     <BrandName>
       <HeaderItemText>{`${activeWorkspace?.company}'s Workspace`}</HeaderItemText>
+      <WorkspaceSettings />
     </BrandName>
   );
 };

src/features/api/api.ts

@@ -17,7 +17,7 @@ export const apiSlice = createApi({
     paramsSerializer: (params) => stringify(params, { encodeValuesOnly: true }),
   }),
   tagTypes: [
-    'User',
+    'Users',
     'Workspaces',
     'Projects',
     'Campaigns',

src/features/api/apiTags.ts

@@ -2,9 +2,6 @@ import { unguessApi } from '.';
 
 unguessApi.enhanceEndpoints({
   endpoints: {
-    getUsersMe: {
-      providesTags: ['User'],
-    },
     getWorkspaces: {
       providesTags: ['Workspaces'],
     },
@@ -68,6 +65,15 @@ unguessApi.enhanceEndpoints({
     getCampaignsByCidBugsAndBid: {
       providesTags: ['Tags'],
     },
+    getWorkspacesByWidUsers: {
+      providesTags: ['Users'],
+    },
+    postWorkspacesByWidUsers: {
+      invalidatesTags: ['Users'],
+    },
+    deleteWorkspacesByWidUsers: {
+      invalidatesTags: ['Users'],
+    },
   },
 });