feat(workspace-settings): attach action to api

cannarocks · cannarocks · commit 165b1245d83d · 2023-04-18T16:51:31.000+02:00
diff --git a/src/common/components/navigation/header/settings/addNewMember.tsx b/src/common/components/navigation/header/settings/addNewMember.tsx
@@ -2,8 +2,8 @@ import {
   Input,
   Message,
   Button,
+  IconButton,
   Label,
-  MediaInput,
 } from '@appquality/unguess-design-system';
 import { Field } from '@zendeskgarden/react-forms';
 import { Form, Formik, FormikProps, FormikValues } from 'formik';
@@ -21,6 +21,10 @@ const formInitialValues = {
 const EmailTextField = styled(Field)`
   display: flex;
   width: 100%;
+  align-items: first baseline;
+  button {
+    margin-left: ${({ theme }) => theme.space.sm};
+  }
 `;
 
 export const AddNewMemberInput = () => {
@@ -30,16 +34,6 @@ export const AddNewMemberInput = () => {
 
   if (!activeWorkspace) return null;
 
-  const handleValidation = (values: FormikValues) => {
-    const errors: { email?: string } = {};
-    if (!values.email) {
-      errors.email = 'Required';
-    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
-      errors.email = 'Invalid email address';
-    }
-    return errors;
-  };
-
   const validationSchema = Yup.object().shape({
     email: Yup.string()
       .email(t('__WORKSPACE_SETTINGS_ADD_MEMBER_INVALID_EMAIL_ERROR'))
@@ -53,7 +47,6 @@ export const AddNewMemberInput = () => {
       validateOnBlur
       validationSchema={validationSchema}
       onSubmit={(values, actions) => {
-        console.log('submit', values);
         addNewMember({
           wid: activeWorkspace?.id.toString() || '',
           body: {
@@ -75,7 +68,10 @@ export const AddNewMemberInput = () => {
         handleSubmit,
         ...formProps
       }: FormikProps<{ email: string }>) => (
-        <Form onSubmit={handleSubmit}>
+        <Form
+          onSubmit={handleSubmit}
+          style={{ marginBottom: globalTheme.space.sm }}
+        >
           <Label>{t('__WORKSPACE_SETTINGS_ADD_MEMBER_EMAIL_LABEL')}</Label>
           <EmailTextField>
             <Input
@@ -87,6 +83,7 @@ export const AddNewMemberInput = () => {
             />
             <Button
               isPrimary
+              isPill
               themeColor={globalTheme.palette.water[600]}
               type="submit"
               disabled={formProps.isSubmitting}
diff --git a/src/common/components/navigation/header/settings/modalFooter.tsx b/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>
+  );
+};
diff --git a/src/common/components/navigation/header/settings/userItem.tsx b/src/common/components/navigation/header/settings/userItem.tsx
@@ -25,7 +25,7 @@ import { getInitials } from '../utils';
 const StyledEllipsis = styled(Ellipsis)``;
 const UserListItem = styled.div`
   display: flex;
-  padding: ${({ theme }) => `${theme.space.xs} ${theme.space.sm}`};
+  padding: ${({ theme }) => `${theme.space.xs} 0`};
   align-items: center;
   gap: ${({ theme }) => theme.space.sm};
 
@@ -38,10 +38,6 @@ const UserListItem = styled.div`
   }
 `;
 
-const StyledSM = styled(SM)`
-  color: ${({ theme }) => theme.palette.grey[600]};
-`;
-
 export const UserItem = ({
   user,
 }: {
@@ -65,66 +61,64 @@ export const UserItem = ({
       <div>
         <StyledEllipsis>
           {displayName}{' '}
-          {isMe && (
-            <StyledSM>
-              {t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
-            </StyledSM>
-          )}
+          {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
         </StyledEllipsis>
       </div>
       <div className="actions">
-        <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')
+        {!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>
               )}
-              <Button.EndIcon isRotated={rotated}>
-                <ChevronIcon />
-              </Button.EndIcon>
-            </Button>
-          </Trigger>
-          <Menu placement="bottom-end">
-            {user.invitationPending && (
               <Item
-                value="invite"
+                value="remove"
                 onClick={() =>
-                  addNewMember({
+                  removeUser({
                     wid: activeWorkspace.id.toString() || '0',
                     body: {
-                      email: user.email,
+                      user_id: user.id,
                     },
                   }).unwrap()
                 }
               >
-                {t('__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION')}
+                <Span hue={globalTheme.colors.dangerHue}>
+                  {t('__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION')}
+                </Span>
               </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>
+            </Menu>
+          </Dropdown>
+        )}
       </div>
     </UserListItem>
   );
diff --git a/src/common/components/navigation/header/settings/workspaceSettings.tsx b/src/common/components/navigation/header/settings/workspaceSettings.tsx
@@ -1,47 +1,21 @@
-import {
-  Button,
-  IconButton,
-  Modal,
-  XL,
-  Grid,
-  Avatar,
-} from '@appquality/unguess-design-system';
+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 { theme as globalTheme } from 'src/app/theme';
-import { Divider } from 'src/common/components/divider';
 import { useGetWorkspacesByWidUsersQuery } from 'src/features/api';
 import { AddNewMemberInput } from './addNewMember';
-import { getInitials } from '../utils';
 import { UserItem } from './userItem';
+import { WorkspaceSettingsFooter } from './modalFooter';
 
-const FlexContainer = styled.div`
+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;
-`;
-
-const CompanyHolder = styled(XL)`
-  text-transform: uppercase;
-  margin-top: ${({ theme }) => theme.space.base * 2}px;
-  margin-bottom: ${({ theme }) => theme.space.base * 4}px;
-  color: ${({ theme }) => theme.colors.primaryHue};
-  align-self: center;
-`;
-
-const UserListItem = styled.div`
-  display: flex;
-  padding: ${({ theme }) => `${theme.space.xs} ${theme.space.sm}`};
-  align-items: center;
-  gap: ${({ theme }) => theme.space.sm};
-
-  button {
-    margin-left: auto;
-  }
+  min-height: 0;
+  opacity: ${({ loading }) => (loading ? 0.5 : 1)};
 `;
 
 export const WorkspaceSettings = () => {
@@ -61,32 +35,23 @@ export const WorkspaceSettings = () => {
         <Button.StartIcon>
           <GearIcon />
         </Button.StartIcon>
-        Manage users
+        {t('__WORKSPACE_SETTINGS_CTA_TEXT')}
       </Button>
       {isModalOpen && (
         <Modal onClose={() => setIsModalOpen(false)}>
-          <Modal.Body style={{ overflow: 'hidden' }}>
-            <FlexContainer>
-              <CompanyHolder>{`${activeWorkspace?.company}'s Workspace`}</CompanyHolder>
-              <Divider style={{ marginBottom: globalTheme.space.sm }} />
-              <AddNewMemberInput />
-
-              <FlexContainer>
-                <Grid
-                  style={{
-                    opacity: isFetching ? 0.7 : 1,
-                    height: '400px',
-                    overflowY: 'auto',
-                    overflowX: 'hidden',
-                  }}
-                >
-                  {data?.items.map((user) => (
-                    <UserItem user={user} />
-                  ))}
-                </Grid>
-              </FlexContainer>
+          <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>
       )}
     </>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -668,11 +668,14 @@
   "__WORKSPACE_SETTINGS_ADD_MEMBER_EMAIL_PLACEHOLDER": "Email address",
   "__WORKSPACE_SETTINGS_ADD_MEMBER_INVALID_EMAIL_ERROR": "Invalid email address",
   "__WORKSPACE_SETTINGS_ADD_MEMBER_REQUIRED_EMAIL_ERROR": "Required field",
+  "__WORKSPACE_SETTINGS_CTA_TEXT": "manage users",
   "__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL": "(you)",
   "__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL": "member",
   "__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL": "invited",
   "__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION": "Remove",
   "__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION": "Re-send invite",
+  "__WORKSPACE_SETTINGS_MODAL_CTA_COPY_LINK": "Copy link to page",
+  "__WORKSPACE_SETTINGS_MODAL_TITLE": "Manage users",
   "Devices ({{count}})_one": "Devices ({{count}})",
   "Devices ({{count}})_other": "Devices ({{count}})",
   "OS ({{count}})_one": "OS ({{count}})",
diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json
@@ -668,11 +668,14 @@
   "__WORKSPACE_SETTINGS_ADD_MEMBER_EMAIL_PLACEHOLDER": "Indirizzo email",
   "__WORKSPACE_SETTINGS_ADD_MEMBER_INVALID_EMAIL_ERROR": "Email non valida",
   "__WORKSPACE_SETTINGS_ADD_MEMBER_REQUIRED_EMAIL_ERROR": "Campo obbligatorio",
+  "__WORKSPACE_SETTINGS_CTA_TEXT": "gestisci utenti",
   "__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL": "(tu)",
   "__WORKSPACE_SETTINGS_MEMBER_ACTIONS_LABEL": "membro",
   "__WORKSPACE_SETTINGS_MEMBER_INVITATION_PENDING_LABEL": "invitato",
   "__WORKSPACE_SETTINGS_MEMBER_REMOVE_USER_ACTION": "Rimuovi",
   "__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION": "Rimanda invito",
+  "__WORKSPACE_SETTINGS_MODAL_CTA_COPY_LINK": "Copia il link alla pagina",
+  "__WORKSPACE_SETTINGS_MODAL_TITLE": "Gestisci gli utenti",
   "Devices ({{count}})_one": "Dispositivi ({{count}})",
   "Devices ({{count}})_other": "Dispositivi ({{count}})",
   "OS ({{count}})_one": "OS ({{count}})",
