Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

feat(console): hide added connectors in modal (#2566)

Browse source
This commit is contained in:
wangsijie 2022-12-02 14:10:16 +08:00 • committed by GitHub
parent 69a2953d56
commit d1427e56a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/pages/Connectors/components/CreateForm/index.module.scss
View file

@ -62,10 +62,6 @@
.name {
font: var(--font-subhead-2);
@include _.multi-line-ellipsis(1);
&.nameWithRightPadding {
padding-right: _.unit(12); /* For check mark and added label */
}
}
.connectorId {

54
packages/console/src/pages/Connectors/components/CreateForm/index.tsx
View file

@ -46,15 +46,17 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
factories.filter(({ type: factoryType }) => factoryType === type)
);
return allGroups.map((group) => ({
...group,
connectors: group.connectors.map((connector) => ({
...connector,
added: group.isStandard
? false
: existingConnectors.some(({ connectorId }) => connector.id === connectorId),
})),
}));
return allGroups
.map((group) => ({
...group,
connectors: group.connectors.map((connector) => ({
...connector,
added:
!group.isStandard &&
existingConnectors.some(({ connectorId }) => connector.id === connectorId),
})),
}))
.filter(({ connectors }) => !connectors.every(({ added }) => added));
}, [factories, type, existingConnectors]);
const activeGroup = useMemo(
@ -143,29 +145,23 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
className={classNames(styles.connectorGroup, styles[modalSize])}
onChange={handleGroupChange}
>
{groups.map(({ id, name, logo, description, connectors }) => {
const isDisabled = connectors.every(({ added }) => added);
return (
<Radio key={id} value={id} isDisabled={isDisabled} disabledLabel="general.added">
<div className={styles.connector}>
<div className={styles.logo}>
<img src={logo} alt="logo" />
{groups.map(({ id, name, logo, description }) => (
<Radio key={id} value={id}>
<div className={styles.connector}>
<div className={styles.logo}>
<img src={logo} alt="logo" />
</div>
<div className={styles.content}>
<div className={classNames(styles.name)}>
<UnnamedTrans resource={name} />
</div>
<div className={styles.content}>
<div
className={classNames(styles.name, isDisabled && styles.nameWithRightPadding)}
>
<UnnamedTrans resource={name} />
</div>
<div className={styles.description}>
<UnnamedTrans resource={description} />
</div>
<div className={styles.description}>
<UnnamedTrans resource={description} />
</div>
</div>
</Radio>
);
})}
</div>
</Radio>
))}
</RadioGroup>
{activeGroup && (
<PlatformSelector