Skip to content

Commit

Permalink
feat: add Advanced settings on create Team and Channel (#32867)
Browse files Browse the repository at this point in the history 
Co-authored-by: Douglas Fabris <[email protected]>
  • Loading branch information
@juliajforesti @dougfabris
juliajforesti and dougfabris committed Aug 1, 2024
1 parent dd42703 commit 0c919db
Show file tree
Hide file tree
Showing 10 changed files with 348 additions and 273 deletions.
6 changes: 6 additions & 0 deletions .changeset/lemon-steaks-provide.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@rocket.chat/i18n': minor
'@rocket.chat/meteor': minor
---

Added an accordion for advanced settings on Create teams and channels
173 changes: 92 additions & 81 deletions apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
FieldError,
FieldHint,
FieldDescription,
Accordion,
AccordionItem,
} from '@rocket.chat/fuselage';
import { useUniqueId } from '@rocket.chat/fuselage-hooks';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
Expand Down Expand Up @@ -210,7 +212,7 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
<Modal.Close tabIndex={-1} title={t('Close')} onClick={onClose} />
</Modal.Header>
<Modal.Content mbe={2}>
<FieldGroup>
<FieldGroup mbe={24}>
<Field>
<FieldLabel required htmlFor={nameId}>
{t('Name')}
Expand Down Expand Up @@ -276,90 +278,99 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}
</FieldHint>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={federatedId}>{t('Federation_Matrix_Federated')}</FieldLabel>
<Controller
control={control}
name='federated'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
aria-describedby={`${federatedId}-hint`}
id={federatedId}
ref={ref}
checked={value}
disabled={!canUseFederation}
onChange={onChange}
</FieldGroup>
<Accordion>
<AccordionItem title={t('Advanced_settings')}>
<FieldGroup>
<Box is='h5' fontScale='h5' color='titles-labels'>
{t('Security_and_permissions')}
</Box>
<Field>
<FieldRow>
<FieldLabel htmlFor={federatedId}>{t('Federation_Matrix_Federated')}</FieldLabel>
<Controller
control={control}
name='federated'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
aria-describedby={`${federatedId}-hint`}
id={federatedId}
ref={ref}
checked={value}
disabled={!canUseFederation}
onChange={onChange}
/>
)}
/>
)}
/>
</FieldRow>
<FieldHint id={`${federatedId}-hint`}>{t(getFederationHintKey(federatedModule, federationEnabled))}</FieldHint>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={encryptedId}
ref={ref}
checked={value}
disabled={e2eDisabled || federated}
onChange={onChange}
aria-describedby={`${encryptedId}-hint`}
aria-labelledby='Encrypted_channel_Label'
</FieldRow>
<FieldHint id={`${federatedId}-hint`}>{t(getFederationHintKey(federatedModule, federationEnabled))}</FieldHint>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Encrypted')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={encryptedId}
ref={ref}
checked={value}
disabled={e2eDisabled || federated}
onChange={onChange}
aria-describedby={`${encryptedId}-hint`}
aria-labelledby='Encrypted_channel_Label'
/>
)}
/>
)}
/>
</FieldRow>
<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={readOnlyId}>{t('Read_only')}</FieldLabel>
<Controller
control={control}
name='readOnly'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={readOnlyId}
aria-describedby={`${readOnlyId}-hint`}
ref={ref}
checked={value}
disabled={!canSetReadOnly || broadcast || federated}
onChange={onChange}
</FieldRow>
<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={readOnlyId}>{t('Read_only')}</FieldLabel>
<Controller
control={control}
name='readOnly'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={readOnlyId}
aria-describedby={`${readOnlyId}-hint`}
ref={ref}
checked={value}
disabled={!canSetReadOnly || broadcast || federated}
onChange={onChange}
/>
)}
/>
)}
/>
</FieldRow>
<FieldHint id={`${readOnlyId}-hint`}>
{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')}
</FieldHint>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={broadcastId}>{t('Broadcast')}</FieldLabel>
<Controller
control={control}
name='broadcast'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
aria-describedby={`${broadcastId}-hint`}
id={broadcastId}
ref={ref}
checked={value}
disabled={!!federated}
onChange={onChange}
</FieldRow>
<FieldHint id={`${readOnlyId}-hint`}>
{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'channel' }) : t('Anyone_can_send_new_messages')}
</FieldHint>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={broadcastId}>{t('Broadcast')}</FieldLabel>
<Controller
control={control}
name='broadcast'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
aria-describedby={`${broadcastId}-hint`}
id={broadcastId}
ref={ref}
checked={value}
disabled={!!federated}
onChange={onChange}
/>
)}
/>
)}
/>
</FieldRow>
{broadcast && <FieldHint id={`${broadcastId}-hint`}>{t('Broadcast_hint_enabled', { roomType: 'channel' })}</FieldHint>}
</Field>
</FieldGroup>
</FieldRow>
{broadcast && <FieldHint id={`${broadcastId}-hint`}>{t('Broadcast_hint_enabled', { roomType: 'channel' })}</FieldHint>}
</Field>
</FieldGroup>
</AccordionItem>
</Accordion>
</Modal.Content>
<Modal.Footer>
<Modal.FooterControllers>
Expand Down
127 changes: 72 additions & 55 deletions apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
FieldError,
FieldDescription,
FieldHint,
Accordion,
AccordionItem,
} from '@rocket.chat/fuselage';
import { useUniqueId } from '@rocket.chat/fuselage-hooks';
import {
Expand Down Expand Up @@ -169,7 +171,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
<Box fontScale='p2' mbe={16}>
{t('Teams_new_description')}
</Box>
<FieldGroup>
<FieldGroup mbe={24}>
<Field>
<FieldLabel required htmlFor={nameId}>
{t('Teams_New_Name_Label')}
Expand Down Expand Up @@ -229,62 +231,77 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
{isPrivate ? t('People_can_only_join_by_being_invited') : t('Anyone_can_access')}
</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={readOnlyId}>{t('Teams_New_Read_only_Label')}</FieldLabel>
<Controller
control={control}
name='readOnly'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={readOnlyId}
aria-describedby={`${readOnlyId}-hint`}
disabled={!canChangeReadOnly}
onChange={onChange}
checked={value}
ref={ref}
</FieldGroup>
<Accordion>
<AccordionItem title={t('Advanced_settings')}>
<FieldGroup>
<Box is='h5' fontScale='h5' color='titles-labels'>
{t('Security_and_permissions')}
</Box>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Teams_New_Encrypted_Label')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={encryptedId}
disabled={!canSetReadOnly || !canChangeEncrypted}
onChange={onChange}
aria-describedby={`${encryptedId}-hint`}
checked={value}
ref={ref}
/>
)}
/>
)}
/>
</FieldRow>
<FieldDescription id={`${readOnlyId}-hint`}>
{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={encryptedId}>{t('Teams_New_Encrypted_Label')}</FieldLabel>
<Controller
control={control}
name='encrypted'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={encryptedId}
disabled={!canSetReadOnly || !canChangeEncrypted}
onChange={onChange}
aria-describedby={`${encryptedId}-hint`}
checked={value}
ref={ref}
</FieldRow>
<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={readOnlyId}>{t('Teams_New_Read_only_Label')}</FieldLabel>
<Controller
control={control}
name='readOnly'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
id={readOnlyId}
aria-describedby={`${readOnlyId}-hint`}
disabled={!canChangeReadOnly}
onChange={onChange}
checked={value}
ref={ref}
/>
)}
/>
)}
/>
</FieldRow>
<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={broadcastId}>{t('Teams_New_Broadcast_Label')}</FieldLabel>
<Controller
control={control}
name='broadcast'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch aria-describedby={`${broadcastId}-hint`} id={broadcastId} onChange={onChange} checked={value} ref={ref} />
)}
/>
</FieldRow>
{broadcast && <FieldDescription id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldDescription>}
</Field>
</FieldGroup>
</FieldRow>
<FieldDescription id={`${readOnlyId}-hint`}>
{readOnly ? t('Read_only_field_hint_enabled', { roomType: 'team' }) : t('Anyone_can_send_new_messages')}
</FieldDescription>
</Field>
<Field>
<FieldRow>
<FieldLabel htmlFor={broadcastId}>{t('Teams_New_Broadcast_Label')}</FieldLabel>
<Controller
control={control}
name='broadcast'
render={({ field: { onChange, value, ref } }): ReactElement => (
<ToggleSwitch
aria-describedby={`${broadcastId}-hint`}
id={broadcastId}
onChange={onChange}
checked={value}
ref={ref}
/>
)}
/>
</FieldRow>
{broadcast && <FieldDescription id={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</FieldDescription>}
</Field>
</FieldGroup>
</AccordionItem>
</Accordion>
</Modal.Content>
<Modal.Footer>
<Modal.FooterControllers>
Expand Down
Loading

0 comments on commit 0c919db

Please sign in to comment.