Skip to content

Commit

Permalink
Group checkboxes together with fieldset
Browse files Browse the repository at this point in the history
  • Loading branch information
@synzen
synzen committed Dec 29, 2024
1 parent 9329d30 commit 85caaba
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 105 deletions.
112 changes: 62 additions & 50 deletions ...ices/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
return (
<Stack key={category}>
<Checkbox
aria-controls={allCategorySettings.join(" ")}
isChecked={allCategorySettingsAreChecked}
isIndeterminate={!allCategorySettingsAreChecked && !noCategorySettingsAreChecked}
onChange={(e) => onCheckCategoryChange(category, e.target.checked)}
Expand All @@ -164,6 +165,7 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
<Checkbox
key={setting}
pl={6}
id={setting}
onChange={(e) =>
onCheckSettingChange(setting as CopyableUserFeedSettings, e.target.checked)
}
Expand Down Expand Up @@ -206,60 +208,70 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
</Text>
</Box>
</Stack>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Settings to Copy
</Heading>
<Stack>
{otherSettings.map((setting) => {
const settingDescription = CopyableSettingDescriptions[setting];
<fieldset>
<Stack spacing={2}>
<legend>
<Heading size="sm" as="h2">
Settings to Copy
</Heading>
</legend>
<Stack>
{otherSettings.map((setting) => {
const settingDescription = CopyableSettingDescriptions[setting];

return (
<Checkbox
onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
isChecked={checkedSettings.includes(setting)}
key={setting}
>
{settingDescription.description}
<br />
{settingDescription.hint && (
<chakra.span color="whiteAlpha.600" fontSize={14}>
{settingDescription.hint}
</chakra.span>
)}
</Checkbox>
);
})}
{checkboxesByCategories}
return (
<Checkbox
onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
isChecked={checkedSettings.includes(setting)}
key={setting}
>
{settingDescription.description}
<br />
{settingDescription.hint && (
<chakra.span color="whiteAlpha.600" fontSize={14}>
{settingDescription.hint}
</chakra.span>
)}
</Checkbox>
);
})}
{checkboxesByCategories}
</Stack>
</Stack>
</Stack>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Target Feeds
</Heading>
<Text>
The feeds that will have their settings overwritten with the selected settings from
the source feed.
</Text>
<Box>
<Button size="sm" onClick={onClickSelectNoneConnections}>
Select none
</Button>
</Box>
<Stack mt={1}>
<SelectableUserFeedList
onSelectedIdsChange={setCheckedUserFeeds}
selectedIds={checkedUserFeeds}
/>
</fieldset>
<fieldset>
<Stack spacing={2}>
<legend>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Target Feeds
</Heading>
<Text>
The feeds that will have their settings overwritten with the selected settings
from the source feed.
</Text>
</Stack>
</legend>
<Box>
<Button size="sm" onClick={onClickSelectNoneConnections}>
Select none
</Button>
</Box>
<Stack mt={1}>
<SelectableUserFeedList
onSelectedIdsChange={setCheckedUserFeeds}
selectedIds={checkedUserFeeds}
/>
</Stack>
</Stack>
</Stack>
{error && (
<InlineErrorAlert
title={t("common.errors.somethingWentWrong")}
description={error.message}
/>
)}
</fieldset>
</Stack>
{error && (
<InlineErrorAlert
title={t("common.errors.somethingWentWrong")}
description={error.message}
/>
)}
</ModalBody>
<ModalFooter>
<HStack>
Expand Down
122 changes: 67 additions & 55 deletions .../features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
return (
<Stack key={category}>
<Checkbox
aria-controls={allCategorySettings.join(" ")}
isChecked={allCategorySettingsAreChecked}
isIndeterminate={!allCategorySettingsAreChecked && !noCategorySettingsAreChecked}
onChange={(e) => onCheckCategoryChange(category, e.target.checked)}
Expand Down Expand Up @@ -268,6 +269,7 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
return (
<Checkbox
key={setting}
id={setting}
pl={6}
onChange={(e) =>
onCheckSettingChange(
Expand Down Expand Up @@ -321,65 +323,75 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
<chakra.span fontWeight={600}>{connection?.name}</chakra.span>
</Box>
</Stack>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Settings to Copy
</Heading>
<Text>Settings to copy from the source connection.</Text>
<Stack>
{checkboxesByCategories}
{otherSettings.map((setting) => {
const settingDescription = CopyableSettingDescriptions[setting];
<fieldset>
<Stack spacing={2}>
<legend>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Settings to Copy
</Heading>
<Text>Settings to copy from the source connection.</Text>
</Stack>
</legend>
<Stack>
{checkboxesByCategories}
{otherSettings.map((setting) => {
const settingDescription = CopyableSettingDescriptions[setting];

if (
setting === CopyableConnectionDiscordChannelSettings.Channel &&
!connection.details.channel
) {
return null;
}
if (
setting === CopyableConnectionDiscordChannelSettings.Channel &&
!connection.details.channel
) {
return null;
}

return (
<Checkbox
onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
isChecked={checkedSettings.includes(setting)}
key={setting}
>
{settingDescription.description}
<br />
{settingDescription.hint && (
<chakra.span color="whiteAlpha.600" fontSize={14}>
{settingDescription.hint}
</chakra.span>
)}
</Checkbox>
);
})}
return (
<Checkbox
onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
isChecked={checkedSettings.includes(setting)}
key={setting}
>
{settingDescription.description}
<br />
{settingDescription.hint && (
<chakra.span color="whiteAlpha.600" fontSize={14}>
{settingDescription.hint}
</chakra.span>
)}
</Checkbox>
);
})}
</Stack>
</Stack>
</Stack>
<Stack spacing={2}>
<Heading size="sm" as="h2">
Target Connections
</Heading>
<Text>
The connections that will have their settings overwritten with the selected settings
from the source connection.
</Text>
<HStack>
<Button size="sm" onClick={onClickSelectAllConnections}>
Select All
</Button>
<Button size="sm" onClick={onClickSelectNoneConnections}>
Select None
</Button>
</HStack>
<Stack>
<ConnectionsCheckboxList
checkedConnectionIds={checkedConnections}
onCheckConnectionChange={setCheckedConnections}
feed={feed as UserFeed}
/>
</fieldset>
<fieldset>
<Stack spacing={2}>
<legend>
<Heading size="sm" as="h2">
Target Connections
</Heading>
<Text>
The connections that will have their settings overwritten with the selected
settings from the source connection.
</Text>
</legend>
<HStack>
<Button size="sm" onClick={onClickSelectAllConnections}>
Select All
</Button>
<Button size="sm" onClick={onClickSelectNoneConnections}>
Select None
</Button>
</HStack>
<Stack>
<ConnectionsCheckboxList
checkedConnectionIds={checkedConnections}
onCheckConnectionChange={setCheckedConnections}
feed={feed as UserFeed}
/>
</Stack>
</Stack>
</Stack>
</fieldset>
{error && (
<InlineErrorAlert
title={t("common.errors.somethingWentWrong")}
Expand Down

0 comments on commit 85caaba

Please sign in to comment.