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 { .name {
font: var(--font-subhead-2); font: var(--font-subhead-2);
@include _.multi-line-ellipsis(1); @include _.multi-line-ellipsis(1);
&.nameWithRightPadding {
padding-right: _.unit(12); /* For check mark and added label */
}
} }
.connectorId { .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) factories.filter(({ type: factoryType }) => factoryType === type)
); );
return allGroups.map((group) => ({ return allGroups
...group, .map((group) => ({
connectors: group.connectors.map((connector) => ({ ...group,
...connector, connectors: group.connectors.map((connector) => ({
added: group.isStandard ...connector,
? false added:
: existingConnectors.some(({ connectorId }) => connector.id === connectorId), !group.isStandard &&
})), existingConnectors.some(({ connectorId }) => connector.id === connectorId),
})); })),
}))
.filter(({ connectors }) => !connectors.every(({ added }) => added));
}, [factories, type, existingConnectors]); }, [factories, type, existingConnectors]);
const activeGroup = useMemo( const activeGroup = useMemo(
@ -143,29 +145,23 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
className={classNames(styles.connectorGroup, styles[modalSize])} className={classNames(styles.connectorGroup, styles[modalSize])}
onChange={handleGroupChange} onChange={handleGroupChange}
> >
{groups.map(({ id, name, logo, description, connectors }) => { {groups.map(({ id, name, logo, description }) => (
const isDisabled = connectors.every(({ added }) => added); <Radio key={id} value={id}>
<div className={styles.connector}>
return ( <div className={styles.logo}>
<Radio key={id} value={id} isDisabled={isDisabled} disabledLabel="general.added"> <img src={logo} alt="logo" />
<div className={styles.connector}> </div>
<div className={styles.logo}> <div className={styles.content}>
<img src={logo} alt="logo" /> <div className={classNames(styles.name)}>
<UnnamedTrans resource={name} />
</div> </div>
<div className={styles.content}> <div className={styles.description}>
<div <UnnamedTrans resource={description} />
className={classNames(styles.name, isDisabled && styles.nameWithRightPadding)}
>
<UnnamedTrans resource={name} />
</div>
<div className={styles.description}>
<UnnamedTrans resource={description} />
</div>
</div> </div>
</div> </div>
</Radio> </div>
); </Radio>
})} ))}
</RadioGroup> </RadioGroup>
{activeGroup && ( {activeGroup && (
<PlatformSelector <PlatformSelector