From a23425f4f6705dcc1608e181db0efcc25a69bfa8 Mon Sep 17 00:00:00 2001
From: tiddlygit-test <linonetwo012@gmail.com>
Date: Mon, 20 Sep 2021 22:50:18 +0800
Subject: [PATCH] refactor: move some create field into advanced, so new user
 friendly

---
 localization/locales/en/translation.json    |  3 +-
 localization/locales/zh_CN/translation.json |  3 +-
 src/pages/AddWorkspace/CloneWikiForm.tsx    | 12 ------
 src/pages/AddWorkspace/Description.tsx      |  5 +--
 src/pages/AddWorkspace/ExistedWikiForm.tsx  | 12 ------
 src/pages/AddWorkspace/FormComponents.tsx   |  1 +
 src/pages/AddWorkspace/NewWikiForm.tsx      | 12 ------
 src/pages/AddWorkspace/index.tsx            | 47 +++++++++++++++------
 8 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/localization/locales/en/translation.json b/localization/locales/en/translation.json
index 8ec59f59..d69cac83 100644
--- a/localization/locales/en/translation.json
+++ b/localization/locales/en/translation.json
@@ -113,7 +113,8 @@
     "AddWorkspace": "Add Workspace",
     "WorkspaceUserName": "Workspace User Name",
     "WorkspaceUserNameDetail": "The editor name used in the Wiki will be fill in the creator field when the Tiddler is created or edited. The editor name set in the workspace will override the global default editor name assigned in the preferences. This allows you to create Tiddlers with different identities in the same Wiki, with multiple workspace configed with different user name.",
-    "WikiNotStarted": "Wiki is not started or not loaded"
+    "WikiNotStarted": "Wiki is not started or not loaded",
+    "Advanced": "Advanced Settings"
   },
   "EditWorkspace": {
     "Path": "Wiki Path",
diff --git a/localization/locales/zh_CN/translation.json b/localization/locales/zh_CN/translation.json
index 148233ac..77f0c952 100644
--- a/localization/locales/zh_CN/translation.json
+++ b/localization/locales/zh_CN/translation.json
@@ -144,7 +144,8 @@
     "TagName": "标签名",
     "TagNameHelp": "加上此标签的笔记将会自动被放入这个子知识库内（可先不填，之后右键点击这个工作区的图标选择编辑工作区修改）",
     "NoGitInfoAlert": "你未选择在线Git仓库地址，或未成功登录在线Git存储服务账号（可能被墙）。点击创建按钮将创建一个不会自动同步到Github的本地仓库，请注意。",
-    "WikiNotStarted": "Wiki 页面未成功启动或未成功加载"
+    "WikiNotStarted": "Wiki 页面未成功启动或未成功加载",
+    "Advanced": "高级设置"
   },
   "EditWorkspace": {
     "Path": "Wiki的位置",
diff --git a/src/pages/AddWorkspace/CloneWikiForm.tsx b/src/pages/AddWorkspace/CloneWikiForm.tsx
index c57a7a11..d76ef108 100644
--- a/src/pages/AddWorkspace/CloneWikiForm.tsx
+++ b/src/pages/AddWorkspace/CloneWikiForm.tsx
@@ -62,18 +62,6 @@ export function CloneWikiForm({
           value={form.wikiFolderName}
         />
       </LocationPickerContainer>
-      {isCreateMainWorkspace && (
-        <LocationPickerContainer>
-          <LocationPickerInput
-            error={errorInWhichComponent.wikiPort}
-            onChange={(event) => {
-              form.wikiPortSetter(Number(event.target.value));
-            }}
-            label={t('AddWorkspace.WikiServerPort')}
-            value={form.wikiPort}
-          />
-        </LocationPickerContainer>
-      )}
       {!isCreateMainWorkspace && (
         <>
           <SoftLinkToMainWikiSelect
diff --git a/src/pages/AddWorkspace/Description.tsx b/src/pages/AddWorkspace/Description.tsx
index 1cdb87e5..62e21fd6 100644
--- a/src/pages/AddWorkspace/Description.tsx
+++ b/src/pages/AddWorkspace/Description.tsx
@@ -14,10 +14,7 @@ const Switch = styled(SwitchRaw)`
   }
 `;
 
-const Container = styled(Paper)`
-  margin-top: 10px;
-  padding: 10px;
-`;
+const Container = styled(Paper)``;
 
 /**
  * Introduce difference between main and sub wiki.
diff --git a/src/pages/AddWorkspace/ExistedWikiForm.tsx b/src/pages/AddWorkspace/ExistedWikiForm.tsx
index 24fb8f77..ffa026e7 100644
--- a/src/pages/AddWorkspace/ExistedWikiForm.tsx
+++ b/src/pages/AddWorkspace/ExistedWikiForm.tsx
@@ -79,18 +79,6 @@ export function ExistedWikiForm({
           </Typography>
         </LocationPickerButton>
       </LocationPickerContainer>
-      {isCreateMainWorkspace && (
-        <LocationPickerContainer>
-          <LocationPickerInput
-            error={errorInWhichComponent.wikiPort}
-            onChange={(event) => {
-              wikiPortSetter(Number(event.target.value));
-            }}
-            label={t('AddWorkspace.WikiServerPort')}
-            value={wikiPort}
-          />
-        </LocationPickerContainer>
-      )}
       {!isCreateMainWorkspace && (
         <>
           <SoftLinkToMainWikiSelect
diff --git a/src/pages/AddWorkspace/FormComponents.tsx b/src/pages/AddWorkspace/FormComponents.tsx
index 44e07612..b848e505 100644
--- a/src/pages/AddWorkspace/FormComponents.tsx
+++ b/src/pages/AddWorkspace/FormComponents.tsx
@@ -3,6 +3,7 @@ import { Paper, Button, TextField, Autocomplete, Typography } from '@material-ui
 
 export const CreateContainer = styled(Paper)`
   padding: 10px;
+  margin-top: 10px；
 `;
 export const LocationPickerContainer = styled.div`
   display: flex;
diff --git a/src/pages/AddWorkspace/NewWikiForm.tsx b/src/pages/AddWorkspace/NewWikiForm.tsx
index 7ae9d840..e4eaec82 100644
--- a/src/pages/AddWorkspace/NewWikiForm.tsx
+++ b/src/pages/AddWorkspace/NewWikiForm.tsx
@@ -58,18 +58,6 @@ export function NewWikiForm({
           value={form.wikiFolderName}
         />
       </LocationPickerContainer>
-      {isCreateMainWorkspace && (
-        <LocationPickerContainer>
-          <LocationPickerInput
-            error={errorInWhichComponent.wikiPort}
-            onChange={(event) => {
-              form.wikiPortSetter(Number(event.target.value));
-            }}
-            label={t('AddWorkspace.WikiServerPort')}
-            value={form.wikiPort}
-          />
-        </LocationPickerContainer>
-      )}
       {!isCreateMainWorkspace && (
         <>
           <SoftLinkToMainWikiSelect
diff --git a/src/pages/AddWorkspace/index.tsx b/src/pages/AddWorkspace/index.tsx
index 8bae17a0..1bd2c911 100644
--- a/src/pages/AddWorkspace/index.tsx
+++ b/src/pages/AddWorkspace/index.tsx
@@ -2,8 +2,9 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
-import { AppBar, Paper, Tab } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, AppBar, Paper, Tab } from '@material-ui/core';
 import { TabPanel as TabPanelRaw, TabContext, TabList } from '@material-ui/lab';
+import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 
 import { SupportedStorageServices } from '@services/types';
 
@@ -20,6 +21,7 @@ import { IErrorInWhichComponent, useIsCreateMainWorkspace, useIsCreateSyncedWork
 import { TokenForm } from '@/components/TokenForm';
 // import { useAuthing, useTokenFromAuthingRedirect } from '@/components/TokenForm/gitTokenHooks';
 import { GitRepoUrlForm } from './GitRepoUrlForm';
+import { LocationPickerContainer, LocationPickerInput } from './FormComponents';
 
 enum CreateWorkspaceTabs {
   CloneOnlineWiki = 'CloneOnlineWiki',
@@ -36,7 +38,7 @@ const Container = styled.main`
   }
 `;
 const TokenFormContainer = styled(Paper)`
-  margin-bottom: 10px;
+  margin: 10px 0;
   padding: 5px 10px;
 `;
 TokenFormContainer.defaultProps = {
@@ -47,6 +49,9 @@ const TabPanel = styled(TabPanelRaw)`
   margin-bottom: 10px;
   padding: 0 !important;
 `;
+const AdvancedSettingsAccordionSummary = styled(AccordionSummary)`
+  margin-top: 10px;
+`;
 
 export default function AddWorkspace(): JSX.Element {
   const { t } = useTranslation();
@@ -57,7 +62,7 @@ export default function AddWorkspace(): JSX.Element {
   const [errorInWhichComponent, errorInWhichComponentSetter] = useState<IErrorInWhichComponent>({});
 
   // update storageProviderSetter to local based on isCreateSyncedWorkspace. Other services value will be changed by TokenForm
-  const { storageProvider, storageProviderSetter, wikiFolderName } = form;
+  const { storageProvider, storageProviderSetter, wikiFolderName, wikiPort } = form;
   useEffect(() => {
     if (!isCreateSyncedWorkspace && storageProvider !== SupportedStorageServices.local) {
       storageProviderSetter(SupportedStorageServices.local);
@@ -88,14 +93,33 @@ export default function AddWorkspace(): JSX.Element {
             variant="scrollable"
             value={currentTab}
             aria-label={t('AddWorkspace.SwitchCreateNewOrOpenExisted')}>
-            <Tab label={t(`AddWorkspace.CloneOnlineWiki`)} value={CreateWorkspaceTabs.CloneOnlineWiki} />
             <Tab label={t('AddWorkspace.CreateNewWiki')} value={CreateWorkspaceTabs.CreateNewWiki} />
+            <Tab label={t(`AddWorkspace.CloneOnlineWiki`)} value={CreateWorkspaceTabs.CloneOnlineWiki} />
             <Tab label={t('AddWorkspace.OpenLocalWiki')} value={CreateWorkspaceTabs.OpenLocalWiki} />
           </TabList>
         </Paper>
       </AppBar>
 
-      <SyncedWikiDescription isCreateSyncedWorkspace={isCreateSyncedWorkspace} isCreateSyncedWorkspaceSetter={isCreateSyncedWorkspaceSetter} />
+      <Accordion>
+        <AdvancedSettingsAccordionSummary expandIcon={<ExpandMoreIcon />}>{t('AddWorkspace.Advanced')}</AdvancedSettingsAccordionSummary>
+        <AccordionDetails>
+          <SyncedWikiDescription isCreateSyncedWorkspace={isCreateSyncedWorkspace} isCreateSyncedWorkspaceSetter={isCreateSyncedWorkspaceSetter} />
+          <MainSubWikiDescription isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
+          {isCreateMainWorkspace && (
+            <LocationPickerContainer>
+              <LocationPickerInput
+                error={errorInWhichComponent.wikiPort}
+                onChange={(event) => {
+                  form.wikiPortSetter(Number(event.target.value));
+                }}
+                label={t('AddWorkspace.WikiServerPort')}
+                value={wikiPort}
+              />
+            </LocationPickerContainer>
+          )}
+        </AccordionDetails>
+      </Accordion>
+
       {isCreateSyncedWorkspace && (
         <TokenFormContainer>
           <TokenForm storageProvider={storageProvider} storageProviderSetter={storageProviderSetter} />
@@ -103,19 +127,18 @@ export default function AddWorkspace(): JSX.Element {
       )}
       {storageProvider !== SupportedStorageServices.local && <GitRepoUrlForm error={errorInWhichComponent.gitRepoUrl} {...formProps} {...formProps.form} />}
 
-      <MainSubWikiDescription isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
-      <TabPanel value={CreateWorkspaceTabs.CloneOnlineWiki}>
-        <Container>
-          <CloneWikiForm {...formProps} isCreateSyncedWorkspaceSetter={isCreateSyncedWorkspaceSetter} />
-          <CloneWikiDoneButton {...formProps} />
-        </Container>
-      </TabPanel>
       <TabPanel value={CreateWorkspaceTabs.CreateNewWiki}>
         <Container>
           <NewWikiForm {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
           <NewWikiDoneButton {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
         </Container>
       </TabPanel>
+      <TabPanel value={CreateWorkspaceTabs.CloneOnlineWiki}>
+        <Container>
+          <CloneWikiForm {...formProps} isCreateSyncedWorkspaceSetter={isCreateSyncedWorkspaceSetter} />
+          <CloneWikiDoneButton {...formProps} />
+        </Container>
+      </TabPanel>
       <TabPanel value={CreateWorkspaceTabs.OpenLocalWiki}>
         <Container>
           <ExistedWikiForm {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />