feat: try add token tabs

src/components/TokenForm/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Paper, Typography } from '@material-ui/core';
+import { Paper, Typography, Tabs, Tab, TabPanel } from '@material-ui/core';
 import SearchRepo from '@/components/github/SearchRepo';
+import { SupportedStorageServices } from '@services/types';
 
-import { GithubTokenForm } from '../github/git-token-form';
-
-const SyncContainer = styled(Paper)`
+const Container = styled(Paper)`
   margin-top: 5px;
 `;
 const GithubRepoLink = styled(Typography)`
@@ -16,25 +15,39 @@ const GithubRepoLink = styled(Typography)`
   }
 `;
 
+const a11yProps = (
+  index: SupportedStorageServices,
+): {
+  id: string;
+  'aria-controls': string;
+} => ({
+  id: index,
+  'aria-controls': `simple-tabpanel-${index}`,
+});
+
+/**
+ * Create storage provider's token.
+ * @returns
+ */
 export function TokenForm(): JSX.Element {
+  const [currentTab, currentTabSetter] = useState<SupportedStorageServices>(SupportedStorageServices.github);
   return (
-    <SyncContainer elevation={2} square>
-    <GithubTokenForm>
-      {githubWikiUrl?.length > 0 ? (
-        <GithubRepoLink onClick={async () => await window.service.native.open(githubWikiUrl)} variant="subtitle2" align="center">
-          ({githubWikiUrl})
-        </GithubRepoLink>
-      ) : undefined}
-      <SearchRepo
-        githubWikiUrl={githubWikiUrl}
-        accessToken={accessToken}
-        githubWikiUrlSetter={githubWikiUrlSetter}
-        userInfo={userInfo}
-        currentTab={currentTab}
-        wikiFolderNameSetter={wikiFolderNameSetter}
-        isCreateMainWorkspace={isCreateMainWorkspace}
-      />
-    </GithubTokenForm>
-  </SyncContainer>
-  )
-}
+    <Container elevation={2} square>
+      <Tabs
+        orientation="vertical"
+        variant="scrollable"
+        value={currentTab}
+        onChange={(_event, newValue: SupportedStorageServices) => currentTabSetter(newValue)}
+        aria-label="Vertical tabs example">
+        <Tab label="GitHub" {...a11yProps(SupportedStorageServices.github)} />
+        <Tab label="GitLab" {...a11yProps(SupportedStorageServices.gitlab)} />
+      </Tabs>
+      <TabPanel value={currentTab} index={0}>
+        Item One
+      </TabPanel>
+      <TabPanel value={currentTab} index={1}>
+        Item Two
+      </TabPanel>
+    </Container>
+  );
+}

src/pages/AddWorkspace/index.tsx

@@ -4,6 +4,8 @@ import { GraphQLClient, ClientContext } from 'graphql-hooks';
 
 import { GITHUB_GRAPHQL_API } from '../../constants/auth';
 
+import { TokenForm } from '@/components/TokenForm';
+
 import { Description } from './Description';
 
 import { NewWikiForm } from './NewWikiForm';
@@ -40,6 +42,8 @@ export default function AddWorkspace(): JSX.Element {
       <TabBar currentTab={currentTab} currentTabSetter={currentTabSetter} />
       <Description isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
 
+      <TokenForm />
+
       {currentTab === 'CreateNewWiki' && (
         <Container>
           <NewWikiForm form={form} isCreateMainWorkspace={isCreateMainWorkspace} />

src/services/types.ts

@@ -6,6 +6,8 @@ export enum SupportedStorageServices {
   local = 'local',
   /** High availability git service without storage limit, but is blocked by GFW in China somehow */
   github = 'github',
+  /** Open source git service */
+  gitlab = 'gitlab',
   /** SocialLinkedData, a privacy first DApp platform leading by Tim Berners-Lee, you can run a server by you own  */
   solid = 'solid',
   /** China's Collaboration platform for software development & code hosting,