refactor: move some create field into advanced, so new user friendly

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",

localization/locales/zh_CN/translation.json

@@ -144,7 +144,8 @@
     "TagName": "标签名",
     "TagNameHelp": "加上此标签的笔记将会自动被放入这个子知识库内（可先不填，之后右键点击这个工作区的图标选择编辑工作区修改）",
     "NoGitInfoAlert": "你未选择在线Git仓库地址，或未成功登录在线Git存储服务账号（可能被墙）。点击创建按钮将创建一个不会自动同步到Github的本地仓库，请注意。",
-    "WikiNotStarted": "Wiki 页面未成功启动或未成功加载"
+    "WikiNotStarted": "Wiki 页面未成功启动或未成功加载",
+    "Advanced": "高级设置"
   },
   "EditWorkspace": {
     "Path": "Wiki的位置",

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

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.

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

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;

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

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} />