Merge pull request #1330 from logto-io/charles-log-3331-improve-get-the-sample-project-feature

refactor(console): improve get sample project feature in sdk integration guide

packages/console/src/assets/images/get-sample.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.24658C9.6255 2.24668 7.32849 3.0917 5.51999 4.63043C3.71149 6.16916 2.50953 8.3012 2.12916 10.6451C1.74879 12.9889 2.21485 15.3917 3.44393 17.4233C4.67301 19.455 6.58491 20.9831 8.83755 21.7341C9.33755 21.8216 9.52505 21.5216 9.52505 21.2591C9.52505 21.0216 9.51254 20.2341 9.51254 19.3966C7.00003 19.8591 6.35003 18.7841 6.15003 18.2216C5.9281 17.6745 5.5763 17.1897 5.12503 16.8091C4.77503 16.6216 4.27503 16.1591 5.11252 16.1466C5.4323 16.1813 5.73901 16.2926 6.00666 16.471C6.2743 16.6494 6.49499 16.8897 6.65003 17.1716C6.7868 17.4173 6.97071 17.6336 7.19122 17.8081C7.41173 17.9826 7.6645 18.1118 7.93506 18.1885C8.20562 18.2651 8.48864 18.2876 8.76791 18.2547C9.04717 18.2218 9.3172 18.134 9.56251 17.9966C9.6058 17.4882 9.83237 17.0129 10.2 16.6591C7.97503 16.4091 5.65003 15.5466 5.65003 11.7216C5.63597 10.7278 6.00271 9.76619 6.67503 9.03411C6.36931 8.17033 6.40508 7.2224 6.77503 6.38411C6.77503 6.38411 7.6125 6.1216 9.52503 7.40911C11.1613 6.95909 12.8887 6.95909 14.525 7.40911C16.4375 6.10911 17.275 6.38411 17.275 6.38411C17.645 7.22238 17.6808 8.17034 17.375 9.03411C18.0494 9.76494 18.4164 10.7273 18.4 11.7216C18.4 15.5591 16.0625 16.4091 13.8375 16.6591C14.0762 16.901 14.26 17.1914 14.3764 17.5106C14.4929 17.8298 14.5393 18.1704 14.5125 18.5091C14.5125 19.8466 14.5 20.9216 14.5 21.2591C14.5 21.5216 14.6875 21.8341 15.1875 21.7341C17.4362 20.977 19.3426 19.4453 20.5664 17.4126C21.7903 15.3799 22.2519 12.9784 21.8689 10.6368C21.4859 8.29523 20.2832 6.16595 18.4755 4.62909C16.6678 3.09223 14.3727 2.24782 12 2.24658V2.24658Z" fill="currentColor"/>
+</svg>

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);
   }

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<HTMLDivElement>(null);
+
+  const onClickGetSample = () => {
+    const sampleUrl = getSampleProjectUrl(selectedSdk);
+    window.open(sampleUrl, '_blank');
+  };
+
   return (
     <div className={styles.header}>
       {isCompact && (
@@ -32,6 +60,12 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
             subtitle="applications.guide.header_description"
           />
           <Spacer />
+          <IconButton className={styles.githubIcon} size="large" onClick={onClickGetSample}>
+            <div ref={tipRef}>
+              <GetSample />
+            </div>
+            <Tooltip anchorRef={tipRef} content={t('applications.guide.get_sample_file')} />
+          </IconButton>
           <IconButton size="large" onClick={onClose}>
             <Close className={styles.closeIcon} />
           </IconButton>
@@ -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}
           />
         </>
       )}

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.',

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 登录功能',