fix(UI): fix connector target and id used in UI (#838)

* fix(ui): fix ui connector type

* fix(ui): fix connector target and id usage

packages/ui/src/__mocks__/logto.tsx

@@ -96,6 +96,24 @@ export const socialConnectors = [
   },
 ];
 
+export const mockSocialConnectorData = {
+  id: 'arbitrary-social-connector-data',
+  target: 'google',
+  platform: ConnectorPlatform.Web,
+  type: ConnectorType.Social,
+  logo: 'http://logto.dev/logto.png',
+  name: {
+    en: 'Sign in with Xxx',
+    'zh-CN': '使用 Xxx 登录',
+  },
+  description: {
+    en: 'Sign in with Xxx',
+    'zh-CN': '使用 Xxx 登录',
+  },
+  readme: '',
+  configTemplate: '',
+};
+
 export const mockSignInExperience: SignInExperience = {
   id: 'foo',
   branding: {

packages/ui/src/components/Button/SocialIconButton.tsx

@@ -1,12 +1,13 @@
-import { ConnectorMetadata } from '@logto/schemas';
 import classNames from 'classnames';
 import React from 'react';
 
+import { ConnectorData } from '@/types';
+
 import * as styles from './SocialIconButton.module.scss';
 
 type Props = {
   className?: string;
-  connector: Pick<ConnectorMetadata, 'target' | 'logo'>;
+  connector: ConnectorData;
   onClick?: () => void;
 };
 

packages/ui/src/components/Button/SocialLinkButton.tsx

@@ -1,16 +1,17 @@
-import { ConnectorMetadata } from '@logto/schemas';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { ConnectorData } from '@/types';
+
 import * as socialLinkButtonStyles from './SocialLinkButton.module.scss';
 import * as styles from './index.module.scss';
 
 export type Props = {
   isDisabled?: boolean;
   className?: string;
-  connector: Pick<ConnectorMetadata, 'target' | 'name' | 'logo'>;
-  onClick?: (id: string) => void;
+  connector: ConnectorData;
+  onClick?: () => void;
 };
 
 const SocialLinkButton = ({ isDisabled, className, connector, onClick }: Props) => {
@@ -34,9 +35,7 @@ const SocialLinkButton = ({ isDisabled, className, connector, onClick }: Props)
         className
       )}
       type="button"
-      onClick={() => {
-        onClick?.(target);
-      }}
+      onClick={onClick}
     >
       {logo && <img src={logo} alt={target} className={socialLinkButtonStyles.icon} />}
       {localName}

packages/ui/src/components/Button/index.test.tsx

@@ -1,6 +1,8 @@
 import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
+import { mockSocialConnectorData } from '@/__mocks__/logto';
+
 import SocialLinkButton from './SocialLinkButton';
 import Button from './index';
 
@@ -24,14 +26,7 @@ describe('Button Component', () => {
   });
 
   it('render SocialLinkButton', () => {
-    const connector = {
-      target: 'foo',
-      name: {
-        en: 'Sign in with Logto',
-        'zh-CN': '使用 Logto 登录',
-      },
-      logo: 'http://logto.dev/logto.png',
-    };
+    const connector = mockSocialConnectorData;
     const { queryByText, container } = render(
       <SocialLinkButton connector={connector} onClick={onClick} />
     );

packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx

@@ -33,11 +33,11 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac
     <div className={classNames(styles.socialLinkList, className)}>
       {displayConnectors.map((connector) => (
         <SocialLinkButton
-          key={connector.target}
+          key={connector.id}
           className={styles.socialLinkButton}
           connector={connector}
           onClick={() => {
-            void invokeSocialSignIn(connector.target, onSocialSignInCallback);
+            void invokeSocialSignIn(connector.id, onSocialSignInCallback);
           }}
         />
       ))}

packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx

@@ -28,7 +28,7 @@ describe('SecondarySocialSignIn', () => {
       platform: 'web',
       getPostMessage: jest.fn(() => jest.fn()),
       callbackLink: '/logto:',
-      supportedSocialConnectorIds: socialConnectors.map(({ target }) => target),
+      supportedSocialConnectorIds: socialConnectors.map(({ id }) => id),
     };
     /* eslint-enable @silverhand/fp/no-mutation */
   });

packages/ui/src/types/index.ts

@@ -1,10 +1,4 @@
-import {
-  Branding,
-  LanguageInfo,
-  TermsOfUse,
-  ConnectorMetadata,
-  ConnectorPlatform,
-} from '@logto/schemas';
+import { Branding, LanguageInfo, TermsOfUse, ConnectorMetadata } from '@logto/schemas';
 
 export type UserFlow = 'sign-in' | 'register';
 export type SignInMethod = 'username' | 'email' | 'sms' | 'social';
@@ -16,7 +10,6 @@ export enum SearchParameters {
 
 export interface ConnectorData extends ConnectorMetadata {
   id: string;
-  platform: ConnectorPlatform;
 }
 
 export type SignInExperienceSettings = {