From 733a2de11cb8e6011ed601317e7c50b132528807 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Thu, 30 Jun 2022 19:26:50 +0800 Subject: [PATCH] refactor(console): improve get sample project feature in sdk integration guide --- .../console/src/assets/images/get-sample.svg | 3 ++ .../components/GuideHeader/index.module.scss | 12 +++++ .../components/GuideHeader/index.tsx | 48 +++++++++++++++---- packages/phrases/src/locales/en.ts | 2 +- packages/phrases/src/locales/zh-cn.ts | 2 +- 5 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 packages/console/src/assets/images/get-sample.svg diff --git a/packages/console/src/assets/images/get-sample.svg b/packages/console/src/assets/images/get-sample.svg new file mode 100644 index 000000000..b0730c5a2 --- /dev/null +++ b/packages/console/src/assets/images/get-sample.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/pages/Applications/components/GuideHeader/index.module.scss b/packages/console/src/pages/Applications/components/GuideHeader/index.module.scss index 83b48e77e..8775fa989 100644 --- a/packages/console/src/pages/Applications/components/GuideHeader/index.module.scss +++ b/packages/console/src/pages/Applications/components/GuideHeader/index.module.scss @@ -17,6 +17,18 @@ color: var(--color-icon); } + .githubIcon { + margin-right: _.unit(4); + + div { + display: flex; + } + + svg { + color: var(--color-text); + } + } + .getSampleButton { margin: 0 _.unit(15) 0 _.unit(6); } diff --git a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx index c7f2ef1bd..962706ec4 100644 --- a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx +++ b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx @@ -1,27 +1,55 @@ -import React from 'react'; +import React, { useRef } from 'react'; +import { useTranslation } from 'react-i18next'; +import GetSample from '@/assets/images/get-sample.svg'; import Button from '@/components/Button'; import CardTitle from '@/components/CardTitle'; import DangerousRaw from '@/components/DangerousRaw'; import IconButton from '@/components/IconButton'; import Spacer from '@/components/Spacer'; +import Tooltip from '@/components/Tooltip'; import Close from '@/icons/Close'; +import { SupportedSdk } from '@/types/applications'; import * as styles from './index.module.scss'; type Props = { appName: string; - selectedSdk: string; + selectedSdk: SupportedSdk; isCompact?: boolean; onClose: () => void; }; -const onClickFetchSampleProject = (projectName: string) => { - const sampleUrl = `https://github.com/logto-io/js/tree/master/packages/${projectName}-sample`; - window.open(sampleUrl, '_blank'); +const getSampleProjectUrl = (sdk: SupportedSdk) => { + const githubUrlPrefix = 'https://github.com/logto-io'; + + switch (sdk) { + case SupportedSdk.iOS: + return `${githubUrlPrefix}/swift/tree/master/Demos/SwiftUI%20Demo`; + case SupportedSdk.Android: + return `${githubUrlPrefix}/kotlin/tree/master/android-sample-kotlin`; + case SupportedSdk.React: + return `${githubUrlPrefix}/js/tree/master/packages/react-sample`; + case SupportedSdk.Vue: + return `${githubUrlPrefix}/js/tree/master/packages/vue-sample`; + case SupportedSdk.Vanilla: + return `${githubUrlPrefix}/js/tree/master/packages/browser-sample`; + case SupportedSdk.Traditional: + return `${githubUrlPrefix}/express-example`; + default: + return ''; + } }; const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const tipRef = useRef(null); + + const onClickGetSample = () => { + const sampleUrl = getSampleProjectUrl(selectedSdk); + window.open(sampleUrl, '_blank'); + }; + return (
{isCompact && ( @@ -32,6 +60,12 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props subtitle="applications.guide.header_description" /> + +
+ +
+ + @@ -54,9 +88,7 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props className={styles.getSampleButton} type="outline" title="admin_console.applications.guide.get_sample_file" - onClick={() => { - onClickFetchSampleProject(selectedSdk); - }} + onClick={onClickGetSample} /> )} diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 9158e8a6b..91956dacc 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -108,7 +108,7 @@ const translation = { guide: { get_sample_file: 'Get the sample project', header_description: - 'Follow a step by step guide to integrate your application or get a sample configured with your account settings', + 'Follow a step by step guide to integrate your application or click the right button to get the sample project', title: 'The application has been successfully created', subtitle: 'Now follow the steps below to finish your app settings. Please select the SDK type to continue.', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index be522232c..aebb91b11 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -107,7 +107,7 @@ const translation = { guide: { get_sample_file: '获取示例工程', header_description: - '参考如下教程，将 Logto 集成到你的应用中。你也可以点击右侧链接，获取我们为你准备好的示范工程。', + '参考如下教程，将 Logto 集成到你的应用中。你也可以点击右侧按钮，获取我们为你准备好的示范工程。', title: '应用创建成功', subtitle: '参考以下步骤完成你的应用设置。首先，选择你要使用的 SDK 类型：', description_by_sdk: '本教程向你演示如何在 {{sdk}} 应用中集成 Logto 登录功能',