From 0227bef8626894205861811ba6b6c7a4a0241396 Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Mon, 4 Sep 2023 14:44:21 +0200 Subject: [PATCH 01/17] add duplicate and unregistered label component --- .../widgets/channels/BasicMessage.stories.tsx | 56 +++++++++++++ .../widgets/channels/BasicMessage.tsx | 27 +++--- .../components/widgets/channels/UserLabel.tsx | 82 +++++++++++++++++++ .../renderer/static/images/warning-icon.svg | 4 + 4 files changed, 159 insertions(+), 10 deletions(-) create mode 100644 packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/channels/UserLabel.tsx create mode 100644 packages/desktop/src/renderer/static/images/warning-icon.svg diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx new file mode 100644 index 0000000000..b5588591c0 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import BasicMessageComponent, { BasicMessageProps } from './BasicMessage' +import { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent' +import { DisplayableMessage } from '@quiet/types' +import { withTheme } from '../../../storybook/decorators' +import { UserLabelType } from './UserLabel' + +const Template: ComponentStory = args => { + return ( +
+ +
+ ) +} + +export const Component = Template.bind({}) +export const Duplicate = Template.bind({}) +export const Unregistered = Template.bind({}) + +const _message: DisplayableMessage = { + id: '32', + type: 1, + media: undefined, + message: 'test', + createdAt: 0, + date: '12:46', + nickname: 'vader', +} + +const args: BasicMessageProps & FileActionsProps = { + messages: [_message], + openUrl: function (url: string): void {}, +} + +const argsDuplicate: BasicMessageProps & FileActionsProps = { + ...args, + userLabel: UserLabelType.DUPLICATE, +} + +const argsUnregistered: BasicMessageProps & FileActionsProps = { + ...args, + userLabel: UserLabelType.UNREGISTERED, +} + +Component.args = args +Duplicate.args = argsDuplicate +Unregistered.args = argsUnregistered + +const component: ComponentMeta = { + title: 'Components/BasicMessage', + decorators: [withTheme], + component: BasicMessageComponent, +} + +export default component diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx index 853813f324..4e6a794fda 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx @@ -22,6 +22,7 @@ import information from '../../../static/images/updateIcon.svg' import Icon from '../../ui/Icon/Icon' import { UseModalType } from '../../../containers/hooks' +import UserLabel, { UserLabelType } from './UserLabel' const PREFIX = 'BasicMessageComponent' @@ -91,8 +92,8 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ }, [`& .${classes.avatar}`]: { - minHeight: 36, - minWidth: 36, + minHeight: 40, + minWidth: 40, marginRight: 10, marginBottom: 4, borderRadius: 4, @@ -102,8 +103,8 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ [`& .${classes.alignAvatar}`]: { marginTop: 2, marginLeft: 2, - width: 32, - height: 32, + width: 38, + height: 38, }, [`& .${classes.moderation}`]: { @@ -114,8 +115,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ [`& .${classes.time}`]: { color: theme.palette.colors.lightGray, fontSize: 14, - marginTop: -4, - marginRight: 5, + marginTop: -2, }, [`& .${classes.iconBox}`]: { @@ -131,7 +131,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ }, [`& .${classes.infoIcon}`]: { - width: 32, + width: 38, }, })) @@ -152,6 +152,7 @@ export interface BasicMessageProps { src: string }> onMathMessageRendered?: () => void + userLabel?: UserLabelType } export const BasicMessageComponent: React.FC = ({ @@ -164,6 +165,7 @@ export const BasicMessageComponent: React.FC { const messageDisplayData = messages[0] @@ -190,13 +192,13 @@ export const BasicMessageComponent: React.FC ) : ( - + )} - - + + + {userLabel && ( + + + + )} {status !== 'failed' && ( ({ + margin: '-4px 8px 0 4px', + [`& .${classes.wrapper}`]: { + padding: '1px 6px', + borderRadius: '8px', + }, + [`& .${classes.wrapperGray}`]: { + backgroundColor: theme.palette.colors.gray03, + }, + [`& .${classes.wrapperRed}`]: { + backgroundColor: theme.palette.colors.error, + }, + [`& .${classes.textWhite}`]: { + color: 'white', + }, + [`& .${classes.textBlack}`]: { + color: 'black', + }, + [`& .${classes.image}`]: { + width: '12px', + height: '12px', + marginLeft: '4px', + }, +})) + +export type UserLabelProps = { + type: UserLabelType +} + +export enum UserLabelType { + DUPLICATE = 'Duplicate', + UNREGISTERED = 'Unregistered', +} + +const UserLabel: React.FC = ({ type }) => { + return ( + + + {type === UserLabelType.DUPLICATE && } + + {type} + + + + ) +} + +export default UserLabel diff --git a/packages/desktop/src/renderer/static/images/warning-icon.svg b/packages/desktop/src/renderer/static/images/warning-icon.svg new file mode 100644 index 0000000000..c7eb05ba4d --- /dev/null +++ b/packages/desktop/src/renderer/static/images/warning-icon.svg @@ -0,0 +1,4 @@ + + + + From acdf8e1c06c975fecab024328e5e0943c6f51443 Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Tue, 5 Sep 2023 09:05:53 +0200 Subject: [PATCH 02/17] separate modals --- packages/desktop/src/renderer/Root.tsx | 4 ++++ .../widgets/channels/BasicMessage.stories.tsx | 2 +- .../widgets/channels/BasicMessage.tsx | 3 ++- .../widgets/channels/ChannelMessages.tsx | 2 ++ .../UserLabel.component.tsx} | 19 ++++++++------- .../widgets/userLabel/UserLabel.container.tsx | 11 +++++++++ .../widgets/userLabel/UserLabel.types.ts | 4 ++++ .../duplicate/DuplicateModal.component.tsx | 23 +++++++++++++++++++ .../duplicate/DuplicateModal.container.tsx | 11 +++++++++ .../UnregisteredModal.component.tsx | 23 +++++++++++++++++++ .../UnregisteredModal.container.tsx | 11 +++++++++ .../src/renderer/sagas/modals/modals.slice.ts | 4 +++- .../src/renderer/sagas/modals/modals.types.ts | 2 ++ 13 files changed, 106 insertions(+), 13 deletions(-) rename packages/desktop/src/renderer/components/widgets/{channels/UserLabel.tsx => userLabel/UserLabel.component.tsx} (78%) create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.container.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.types.ts create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.container.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx index 913bf1db54..8717893233 100644 --- a/packages/desktop/src/renderer/Root.tsx +++ b/packages/desktop/src/renderer/Root.tsx @@ -29,6 +29,8 @@ import { ChannelContextMenu } from './components/ContextMenu/menus/ChannelContex import { DeleteChannel } from './components/Channel/DeleteChannel/DeleteChannel' import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreationModal' import { SaveStateComponent } from './components/SaveState/SaveStateComponent' +import UnregisteredModalContainer from './components/widgets/userLabel/unregistered/UnregisteredModal.container' +import DuplicateModalContainer from './components/widgets/userLabel/duplicate/DuplicateModal.container' // Trigger lerna export const persistor = persistStore(store) @@ -42,6 +44,8 @@ export default () => { + + diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx index b5588591c0..10d84fbbcc 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx @@ -4,7 +4,7 @@ import BasicMessageComponent, { BasicMessageProps } from './BasicMessage' import { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent' import { DisplayableMessage } from '@quiet/types' import { withTheme } from '../../../storybook/decorators' -import { UserLabelType } from './UserLabel' +import { UserLabelType } from '../userLabel/UserLabel.types' const Template: ComponentStory = args => { return ( diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx index 4e6a794fda..fa3266dda4 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx @@ -22,7 +22,8 @@ import information from '../../../static/images/updateIcon.svg' import Icon from '../../ui/Icon/Icon' import { UseModalType } from '../../../containers/hooks' -import UserLabel, { UserLabelType } from './UserLabel' +import UserLabel from '../userLabel/UserLabel.component' +import { UserLabelType } from '../userLabel/UserLabel.types' const PREFIX = 'BasicMessageComponent' diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx index 70ed09fc8e..bf47f35b5d 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx @@ -13,6 +13,7 @@ import { DownloadStatus, MessagesDailyGroups, MessageSendingStatus } from '@quie import { UseModalType } from '../../../containers/hooks' import { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent' +import { UserLabelType } from '../userLabel/UserLabel.types' const PREFIX = 'ChannelMessagesComponent' @@ -152,6 +153,7 @@ export const ChannelMessagesComponent: React.FC ) })} diff --git a/packages/desktop/src/renderer/components/widgets/channels/UserLabel.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx similarity index 78% rename from packages/desktop/src/renderer/components/widgets/channels/UserLabel.tsx rename to packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx index be0e41331c..8cd51025a8 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/UserLabel.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx @@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' import classNames from 'classnames' import WarnIcon from '../../../static/images/warning-icon.svg' +import { UserLabelType } from './UserLabel.types' const PREFIX = 'UserLabel-' @@ -22,6 +23,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.wrapper}`]: { padding: '1px 6px', borderRadius: '8px', + cursor: 'pointer', }, [`& .${classes.wrapperGray}`]: { backgroundColor: theme.palette.colors.gray03, @@ -46,29 +48,26 @@ export type UserLabelProps = { type: UserLabelType } -export enum UserLabelType { - DUPLICATE = 'Duplicate', - UNREGISTERED = 'Unregistered', -} - const UserLabel: React.FC = ({ type }) => { + const isUnregistered = type === UserLabelType.UNREGISTERED return ( - {type === UserLabelType.DUPLICATE && } + {!isUnregistered && } diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.container.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.container.tsx new file mode 100644 index 0000000000..c2f78b448d --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.container.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { useModal } from '../../../containers/hooks' +import { ModalName } from '../../../sagas/modals/modals.types' + +const UserLabelContainer = () => { + const duplicateModal = useModal(ModalName.duplicateModal) + const unregisteredModal = useModal(ModalName.unregisteredModal) + return
UserLabel.container
+} + +export default UserLabelContainer diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.types.ts b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.types.ts new file mode 100644 index 0000000000..b872a50efe --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.types.ts @@ -0,0 +1,4 @@ +export enum UserLabelType { + DUPLICATE = 'Duplicate', + UNREGISTERED = 'Unregistered', +} diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx new file mode 100644 index 0000000000..7528d394f7 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import Modal from '../../../ui/Modal/Modal' + +export interface DuplicateModalComponentProps { + open: boolean + handleClose: () => void +} +const DuplicateModalComponent: React.FC = ({ handleClose, open }) => { + return ( + +

DuplicateModalComponent

+
+ ) +} + +export default DuplicateModalComponent diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.container.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.container.tsx new file mode 100644 index 0000000000..0b9ab5f4f5 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.container.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { useModal } from '../../../../containers/hooks' +import { ModalName } from '../../../../sagas/modals/modals.types' +import DuplicateModalComponent from './DuplicateModal.component' + +const DuplicateModalContainer = () => { + const duplicateModal = useModal(ModalName.duplicateModal) + return +} + +export default DuplicateModalContainer diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx new file mode 100644 index 0000000000..3d258e3a83 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import Modal from '../../../ui/Modal/Modal' + +export interface UnregisteredModalComponentProps { + open: boolean + handleClose: () => void +} +const UnregisteredModalComponent: React.FC = ({ handleClose, open }) => { + return ( + +

UnregisteredModalComponent

+
+ ) +} + +export default UnregisteredModalComponent diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx new file mode 100644 index 0000000000..f645698acc --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { useModal } from '../../../../containers/hooks' +import { ModalName } from '../../../../sagas/modals/modals.types' +import UnregisteredModalComponent from './UnregisteredModal.component' + +const UnregisteredModalContainer = () => { + const unregisteredModal = useModal(ModalName.unregisteredModal) + return +} + +export default UnregisteredModalContainer diff --git a/packages/desktop/src/renderer/sagas/modals/modals.slice.ts b/packages/desktop/src/renderer/sagas/modals/modals.slice.ts index 65ad1aece0..93675213f5 100644 --- a/packages/desktop/src/renderer/sagas/modals/modals.slice.ts +++ b/packages/desktop/src/renderer/sagas/modals/modals.slice.ts @@ -33,7 +33,9 @@ export class ModalsInitialState { [ModalName.searchChannelModal] = { open: false, args: {} }; [ModalName.warningModal] = { open: false, args: {} }; [ModalName.loadingPanel] = { open: true, args: {} }; // Loading modal is open by default and closes on websocket connection - [ModalName.channelCreationModal] = { open: false, args: {} } + [ModalName.channelCreationModal] = { open: false, args: {} }; + [ModalName.unregisteredModal] = { open: false, args: {} }; + [ModalName.duplicateModal] = { open: false, args: {} } } export const modalsSlice = createSlice({ diff --git a/packages/desktop/src/renderer/sagas/modals/modals.types.ts b/packages/desktop/src/renderer/sagas/modals/modals.types.ts index ab48c13f80..cbf09025c5 100644 --- a/packages/desktop/src/renderer/sagas/modals/modals.types.ts +++ b/packages/desktop/src/renderer/sagas/modals/modals.types.ts @@ -21,4 +21,6 @@ export enum ModalName { searchChannelModal = 'searchChannelModal', warningModal = 'warningModal', channelCreationModal = 'channelCreationModal', + duplicateModal = 'duplicateModal', + unregisteredModal = 'unregisteredModal', } From a5855fe86bddd21ad4247f95c373f68baf9142de Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Tue, 5 Sep 2023 12:31:16 +0200 Subject: [PATCH 03/17] modal content --- .../widgets/channels/BasicMessage.tsx | 4 +- .../widgets/channels/ChannelMessages.tsx | 2 +- .../widgets/userLabel/UserLabel.component.tsx | 5 ++- .../widgets/userLabel/UserLabel.container.tsx | 12 +++++- .../duplicate/DuplicateModal.component.tsx | 39 ++++++++++++++++- .../UnregisteredModal.component.tsx | 43 ++++++++++++++++++- 6 files changed, 96 insertions(+), 9 deletions(-) diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx index fa3266dda4..33bee540cc 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx @@ -22,8 +22,8 @@ import information from '../../../static/images/updateIcon.svg' import Icon from '../../ui/Icon/Icon' import { UseModalType } from '../../../containers/hooks' -import UserLabel from '../userLabel/UserLabel.component' import { UserLabelType } from '../userLabel/UserLabel.types' +import UserLabelContainer from '../userLabel/UserLabel.container' const PREFIX = 'BasicMessageComponent' @@ -213,7 +213,7 @@ export const BasicMessageComponent: React.FC {userLabel && ( - + )} {status !== 'failed' && ( diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx index bf47f35b5d..acb5461ed3 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx @@ -153,7 +153,7 @@ export const ChannelMessagesComponent: React.FC ) })} diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx index 8cd51025a8..470a46e221 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx @@ -46,14 +46,15 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ export type UserLabelProps = { type: UserLabelType + handleOpen: () => void } -const UserLabel: React.FC = ({ type }) => { +const UserLabel: React.FC = ({ type, handleOpen }) => { const isUnregistered = type === UserLabelType.UNREGISTERED return ( { +export type UserLabelContainerProps = { + type: UserLabelType +} + +const UserLabelContainer: React.FC = ({ type }) => { const duplicateModal = useModal(ModalName.duplicateModal) const unregisteredModal = useModal(ModalName.unregisteredModal) - return
UserLabel.container
+ const modalProps = type === UserLabelType.DUPLICATE ? duplicateModal : unregisteredModal + + return } export default UserLabelContainer diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx index 7528d394f7..236616de75 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.component.tsx @@ -1,10 +1,36 @@ import React from 'react' import Modal from '../../../ui/Modal/Modal' +import { Grid, Typography } from '@mui/material' +import { styled } from '@mui/material/styles' +import WarnIcon from '../../../../static/images/exclamationMark.svg' +import UserLabel from '../UserLabel.component' +import { UserLabelType } from '../UserLabel.types' + +const PREFIX = 'UserDuplicateModalComponent-' + +const classes = { + bodyText: `${PREFIX}bodyText`, + image: `${PREFIX}image`, +} + +const StyledGrid = styled(Grid)(({ theme }) => ({ + [`& .${classes.bodyText}`]: { + textAlign: 'center', + width: '60%', + margin: '24px 0 4px', + }, + [`& .${classes.image}`]: { + width: '70px', + height: '70px', + margin: '30px 0 24px', + }, +})) export interface DuplicateModalComponentProps { open: boolean handleClose: () => void } + const DuplicateModalComponent: React.FC = ({ handleClose, open }) => { return ( = ({ handl isBold addBorder > -

DuplicateModalComponent

+ + + Multiple users with same name + + An unregistered user is using the same name as another user. This should be rare, and could mean someone is + impersonating another user. +
+
+ These users will be marked +
+ {}} /> +
) } diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx index 3d258e3a83..79c8304fd8 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx @@ -1,11 +1,43 @@ +import { Button, Grid, Typography } from '@mui/material' import React from 'react' import Modal from '../../../ui/Modal/Modal' +import { styled } from '@mui/material/styles' + +const PREFIX = 'UnregisteredModalComponent-' + +const classes = { + bodyText: `${PREFIX}bodyText`, + button: `${PREFIX}button`, +} + +const StyledGrid = styled(Grid)(({ theme }) => ({ + [`& .${classes.bodyText}`]: { + textAlign: 'center', + width: '60%', + margin: '30px 0 4px', + }, + + [`& .${classes.button}`]: { + marginTop: 24, + textTransform: 'none', + padding: '0 24px', + height: 60, + borderRadius: '8px', + color: theme.palette.colors.white, + backgroundColor: theme.palette.colors.quietBlue, + '&:hover': { + opacity: 0.7, + backgroundColor: theme.palette.colors.quietBlue, + }, + }, +})) export interface UnregisteredModalComponentProps { open: boolean handleClose: () => void } const UnregisteredModalComponent: React.FC = ({ handleClose, open }) => { + const userName = 'sarah' return ( = ({ isBold addBorder > -

UnregisteredModalComponent

+ + + The username @{userName} has not been registered yet with the community owner, so it’s still + possible for someone else to register the same username. When the community owner is online,{' '} + @{userName} will be registered automatically and this alert will go away. + + +
) } From 0cadec714ed411ea7df984bb1ef35537376072fa Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Tue, 5 Sep 2023 14:47:00 +0200 Subject: [PATCH 04/17] username in modal as arg --- .../components/widgets/channels/BasicMessage.tsx | 2 +- .../widgets/channels/ChannelMessages.tsx | 2 +- .../widgets/userLabel/UserLabel.component.tsx | 3 ++- .../widgets/userLabel/UserLabel.container.tsx | 14 ++++++++------ .../unregistered/UnregisteredModal.component.tsx | 10 +++++----- .../unregistered/UnregisteredModal.container.tsx | 6 +++++- 6 files changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx index 33bee540cc..f11df9f1eb 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx @@ -213,7 +213,7 @@ export const BasicMessageComponent: React.FC {userLabel && ( - + )} {status !== 'failed' && ( diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx index acb5461ed3..ac6d961bd7 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx @@ -153,7 +153,7 @@ export const ChannelMessagesComponent: React.FC ) })} diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx index 470a46e221..f77f894f4b 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx @@ -44,13 +44,14 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, })) -export type UserLabelProps = { +export interface UserLabelProps { type: UserLabelType handleOpen: () => void } const UserLabel: React.FC = ({ type, handleOpen }) => { const isUnregistered = type === UserLabelType.UNREGISTERED + return ( = ({ type }) => { - const duplicateModal = useModal(ModalName.duplicateModal) - const unregisteredModal = useModal(ModalName.unregisteredModal) - const modalProps = type === UserLabelType.DUPLICATE ? duplicateModal : unregisteredModal +const UserLabelContainer: React.FC = ({ type, username }) => { + const { handleOpen: duplicateHandleOpen } = useModal(ModalName.duplicateModal) + const { handleOpen: unregisteredHandleOpen } = useModal(ModalName.unregisteredModal) - return + const handleOpen = type === UserLabelType.DUPLICATE ? duplicateHandleOpen : unregisteredHandleOpen + + return handleOpen({ username })} type={type} /> } export default UserLabelContainer diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx index 79c8304fd8..c1f232426c 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.component.tsx @@ -35,9 +35,9 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ export interface UnregisteredModalComponentProps { open: boolean handleClose: () => void + username: string } -const UnregisteredModalComponent: React.FC = ({ handleClose, open }) => { - const userName = 'sarah' +const UnregisteredModalComponent: React.FC = ({ handleClose, open, username }) => { return ( = ({ > - The username @{userName} has not been registered yet with the community owner, so it’s still + The username @{username} has not been registered yet with the community owner, so it’s still possible for someone else to register the same username. When the community owner is online,{' '} - @{userName} will be registered automatically and this alert will go away. + @{username} will be registered automatically and this alert will go away. - diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx index f645698acc..32016a7eba 100644 --- a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.container.tsx @@ -3,8 +3,12 @@ import { useModal } from '../../../../containers/hooks' import { ModalName } from '../../../../sagas/modals/modals.types' import UnregisteredModalComponent from './UnregisteredModal.component' +interface ModalArgs { + username: string +} + const UnregisteredModalContainer = () => { - const unregisteredModal = useModal(ModalName.unregisteredModal) + const unregisteredModal = useModal(ModalName.unregisteredModal) return } From f70cd279f15ac395ce1041dc59de0d43150f60b5 Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Wed, 6 Sep 2023 12:04:27 +0200 Subject: [PATCH 05/17] add stories --- .../widgets/channels/BasicMessage.stories.tsx | 56 ------------------- .../duplicate/DuplicateModal.stories.tsx | 29 ++++++++++ .../UnregisteredModal.stories.tsx | 30 ++++++++++ .../widgets/userLabel/userLabel.stories.tsx | 41 ++++++++++++++ 4 files changed, 100 insertions(+), 56 deletions(-) delete mode 100644 packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx deleted file mode 100644 index 10d84fbbcc..0000000000 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.stories.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react' -import BasicMessageComponent, { BasicMessageProps } from './BasicMessage' -import { FileActionsProps } from '../../Channel/File/FileComponent/FileComponent' -import { DisplayableMessage } from '@quiet/types' -import { withTheme } from '../../../storybook/decorators' -import { UserLabelType } from '../userLabel/UserLabel.types' - -const Template: ComponentStory = args => { - return ( -
- -
- ) -} - -export const Component = Template.bind({}) -export const Duplicate = Template.bind({}) -export const Unregistered = Template.bind({}) - -const _message: DisplayableMessage = { - id: '32', - type: 1, - media: undefined, - message: 'test', - createdAt: 0, - date: '12:46', - nickname: 'vader', -} - -const args: BasicMessageProps & FileActionsProps = { - messages: [_message], - openUrl: function (url: string): void {}, -} - -const argsDuplicate: BasicMessageProps & FileActionsProps = { - ...args, - userLabel: UserLabelType.DUPLICATE, -} - -const argsUnregistered: BasicMessageProps & FileActionsProps = { - ...args, - userLabel: UserLabelType.UNREGISTERED, -} - -Component.args = args -Duplicate.args = argsDuplicate -Unregistered.args = argsUnregistered - -const component: ComponentMeta = { - title: 'Components/BasicMessage', - decorators: [withTheme], - component: BasicMessageComponent, -} - -export default component diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.stories.tsx new file mode 100644 index 0000000000..385e91440c --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.stories.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { withTheme } from '../../../../storybook/decorators' +import DuplicateModalComponent, { DuplicateModalComponentProps } from './DuplicateModal.component' + +const Template: ComponentStory = args => { + return ( +
+ +
+ ) +} + +export const Component = Template.bind({}) + +const args: DuplicateModalComponentProps = { + handleClose: function (): void {}, + open: true, +} + +Component.args = args + +const component: ComponentMeta = { + title: 'Components/UserLabel/DuplicateModalComponent', + decorators: [withTheme], + component: DuplicateModalComponent, +} + +export default component diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.stories.tsx new file mode 100644 index 0000000000..7a40c737f2 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.stories.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { withTheme } from '../../../../storybook/decorators' +import UnregisteredModalComponent, { UnregisteredModalComponentProps } from './UnregisteredModal.component' + +const Template: ComponentStory = args => { + return ( +
+ +
+ ) +} + +export const Component = Template.bind({}) + +const args: UnregisteredModalComponentProps = { + handleClose: function (): void {}, + open: true, + username: 'johnny', +} + +Component.args = args + +const component: ComponentMeta = { + title: 'Components/UserLabel/UnregisteredModalComponent', + decorators: [withTheme], + component: UnregisteredModalComponent, +} + +export default component diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx new file mode 100644 index 0000000000..415f8367de --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { withTheme } from '../../../storybook/decorators' +import UserLabel, { UserLabelProps } from './UserLabel.component' +import { UserLabelType } from './UserLabel.types' + +const Template: ComponentStory = args => { + return ( +
+ +
+ ) +} + +export const Duplicate = Template.bind({}) +export const Unregistered = Template.bind({}) + +const baseArg = { + handleOpen: function (): void {}, +} + +const argsDuplicate: UserLabelProps = { + ...baseArg, + type: UserLabelType.DUPLICATE, +} + +const argsUnregistered: UserLabelProps = { + ...baseArg, + type: UserLabelType.UNREGISTERED, +} + +Duplicate.args = argsDuplicate +Unregistered.args = argsUnregistered + +const component: ComponentMeta = { + title: 'Components/UserLabel', + decorators: [withTheme], + component: UserLabel, +} + +export default component From b91430ab7763d165edee8344f85dc0999c46dfe0 Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Wed, 6 Sep 2023 12:13:37 +0200 Subject: [PATCH 06/17] add tests --- ...abel.stories.tsx => UserLabel.stories.tsx} | 0 .../widgets/userLabel/UserLabel.test.tsx | 65 ++++++++ .../duplicate/DuplicateModal.test.tsx | 142 ++++++++++++++++++ .../unregistered/UnregisteredModal.test.tsx | 135 +++++++++++++++++ 4 files changed, 342 insertions(+) rename packages/desktop/src/renderer/components/widgets/userLabel/{userLabel.stories.tsx => UserLabel.stories.tsx} (100%) create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/userLabel/unregistered/UnregisteredModal.test.tsx diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.stories.tsx similarity index 100% rename from packages/desktop/src/renderer/components/widgets/userLabel/userLabel.stories.tsx rename to packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.stories.tsx diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx new file mode 100644 index 0000000000..8d936df2f3 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.test.tsx @@ -0,0 +1,65 @@ +import React from 'react' +import theme from '../../../theme' +import { ThemeProvider } from '@mui/material/styles' +import { renderComponent } from '../../../testUtils/renderComponent' +import UserLabel from './UserLabel.component' +import { UserLabelType } from './UserLabel.types' + +describe('UserLabel', () => { + it('duplicate', () => { + const result = renderComponent( + + {}} type={UserLabelType.DUPLICATE} /> + + ) + expect(result.baseElement).toMatchInlineSnapshot(` + +
+
+
+ + + Duplicate + +
+
+
+ + `) + }) + it('unregistered', () => { + const result = renderComponent( + + {}} type={UserLabelType.UNREGISTERED} /> + + ) + expect(result.baseElement).toMatchInlineSnapshot(` + +
+
+
+ + Unregistered + +
+
+
+ + `) + }) +}) diff --git a/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx new file mode 100644 index 0000000000..371b5cb186 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/userLabel/duplicate/DuplicateModal.test.tsx @@ -0,0 +1,142 @@ +import React from 'react' +import theme from '../../../../theme' +import { ThemeProvider } from '@mui/material/styles' +import { renderComponent } from '../../../../testUtils/renderComponent' +import DuplicateModalComponent from './DuplicateModal.component' + +describe('DuplicateModalComponent', () => { + it('renderComponent', () => { + const result = renderComponent( + + {}} open={true} /> + + ) + expect(result.baseElement).toMatchInlineSnapshot(` + +