Feat/Native AI Agent (#640)

* refactor: only use message id

* feat: stream update, but react don't react on it dny

* feat: start stop

* feat: basic resoponse handlers

* feat: load handler config schema

* chore: upgrade to "moduleResolution": "bundler"

* fix: prompt concat

* feat: rjfs with mui

* fix: mui v7 upgrade

* fix: field editor tabs

* feat: Description field is i18n key, use i18nAlly extension to see it on VSCode. And use react-i18next to translate it on frontend.

* refactor: extract some shared components

* refactor: remove @mui/lab

* feat: faster editor

* feat: beautify editor

* refactor: better style

* fix: fullscreen style

* fix: array sort

* fix: editor not saved

* fix: broken array

* chore: upgrade mui deps

* Update type.d.ts

* feat: upgrade and install react dev tools

* refactor: simplify the code

* refactor: simplify the code

* refactor: simplify ai generated garbage code

* fix: translated label

* feat: translate enum and conditional show field based on enum

* feat: click to open source

* fix: ai generated garbage code to solve id and index problem

* refactor: simplify

* refactor: shorten

* test: add jest

* chore: node-linker=hoisted as electron forge suggested

* test: e2e

* fix: test failed on ci

* test: faster by disable some typecheck

* fix: ci

* fix: ci

* refactor: remove unused

* fix: use macos and take screenshot in ci

* docs:

(cherry picked from commit b1a9706264)

* fix: ci crash due to no dugite binary, due to NODE_ENV=test not set

* Update test.yml

* fix: ci

* Update release.yml

* docs: test

* refactor: move folders and lint

* refactor: organize pages to reduce level

* refactor: merge page service and workspace service to allow drag & drop of pages

* Update ipc-syncadaptor.ts

* Update browserViewMetaData.ts

* fix: view.webContents.loadURL won't reload on new electron version

* fix: try to disable annoying useless disabling pasting "feature"

https://github.com/electron/electron/issues/40995

* fix: initial page

* feat: allow sort add icon

* test: use vitest instead

* refactor: use emotion instead

* fix: all ts error after migrate to vitest and emotion

* fix: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

fix by not using this usage

* fix: too many open files

* test: add basic main page test

* refactor: split workspace type to make it more specific

* test: support mock react lazy import component by re-export them

* test: sidebar

* refactor: move mock to global

* test: testing library fix

* test: new wiki form

* docs: test with vitest

* lint: fix

* docs: pronounication & remove toc as gh build in

* feat: tools and rag

* feat: prompt for build-in tools

* fix: i18n

* fix: tool using

* test: fix

* refactor: Auto-create default wiki workspace if none exists (handled in backend)

* fix: create wiki workspace so it is on first one

* refactor: remove some useless feature

* refactor: use plugin instead of handler

* chore: make concatPrompt async iterator

* feat: show progress on frontend

* fix: errors

* fix: ConfigError: Config (unnamed): Key "overrides": This appears to be in eslintrc format rather than flat config format.

* Update package.json

* feat: allow windows to hide titlebar

* fix: logger error when ctrl+c on mac

* lint

* refactor: use plugin everywhere

* refactor: move more logic to plugin

* refactor: run tool in plugin, simplify abstraction

* refactor: remove ai generated duplicate

* refactor

* refactor: less plugins

* test: simplify wiki search test

* test: remove any

* fix: not streaming, tool order wrong

* test: plugin system and streaming

* refactor: remove useless auto reply plugin

* fix: hide duration expired tool calling message, so long tool result only show to ai once

* fix: $ props should lower cased

* test: support run as electron so can use sqlite3 compiled bin for electron

* docs: better electron as node run and doc

* test: restore to use threads instead of fock. Seems this also works for inmemory database

* test: fix frontend ui test

* lint: ai content

* test: fix coverage

* test: Refactor test mocks to dedicated __mocks__ directory

Moved common test mocks from setup-vitest.ts into separate files under src/__tests__/__mocks__ for better organization and maintainability. Updated documentation to reflect the new structure. Removed fileMock.js and updated setup-vitest.ts to import and use the new centralized mocks.

* Update ErrorDuringStart.md

* Update messageManagementPlugin.test.ts

* test: Fix Electron test process cleanup and update test config

Update test:unit script to use cross-env for ELECTRON_RUN_AS_NODE, ensuring child processes inherit the variable and preventing resource leaks. Remove manual process.env setting from vitest.config.ts and add documentation on handling related errors in Testing.md. Also, add 'hanging-process' reporter to Vitest config for improved diagnostics.

* fix: warning in test

* Create AgentInstanceWorkflow.md

* fix: duration bug

* fix: ai not response for tool result

* test: Add agent workflow feature and step definitions

Introduces a new Cucumber feature for agent workflow, including multi-round conversation and tool usage. Adds agent-specific step definitions for message input and chat history validation. Refactors application step definitions for improved selector handling and element interaction. Updates test scripts in package.json to include a preparation step for e2e tests.

* Update application.ts

* test: Add mock OpenAI server and tests

Introduces a MockOpenAIServer for simulating OpenAI chat completions, including tool call and tool result responses. Adds corresponding tests and updates vitest config to include tests in the features directory.

* test: simplify steps

* test: Add separate test userData and wiki folders

Introduces 'userData-test' and 'wiki-test' folders for test environments, updating appPaths, fileNames, and paths constants to distinguish between development and test modes. This helps prevent conflicts when running test and development instances simultaneously.

* Update eslint.config.mjs

@typescript-eslint/no-unnecessary-condition': 'off'

* test: Add data-testid attributes for test automation

Added data-testid attributes to form inputs and buttons in ExternalAPI components to improve test automation reliability. Updated feature files and step definitions to use these selectors, refined window switching logic, and improved timing for UI interactions. Also exposed isElectronDevelopment and added isMainWindowPage utility for window identification.

* test: fix wront page type by ai written garbage code

* Update application.ts

* Update Testing.md

* fix: no log during e2e test, and error creating wiki blocks other init steps

* test: click agent workspace button, and refactor mock server

* test: mock streamable openai api

* rename

* chore: try esbuild loader, renderer build too slow

* chore: organize webpack

* chore: ignore service code from hot reload

* Update Testing.md

* test: use full agentinstance in test

* chore: webpack error

* Update Testing.md

* chore: remove useless spectron

* test: EsbuildPlugin's `define` doesn't work, it won't set env properly.

* test: e2e mock openai

* lint: disable @typescript-eslint/require-await

* test: Add quick access to create default agent tab

Introduces a 'Create Default Agent' quick access button in the Agent New Tab page, with localization support. Adds utility to close all tabs and create a default agent tab for fallback scenarios, improves test selectors for tab and close actions, and refactors agent chat tab creation logic for consistency and testability.

* feat: remove unuse favorite

* feat: Add wiki operation and workspaces list plugins

Introduces wikiOperationPlugin and workspacesListPlugin for agent instance prompt and response handling. Updates plugin registry, test coverage, and default agent configuration to support wiki workspace listing and wiki note operations (create, update, delete) via tool calls. Refactors wikiSearchPlugin to delegate workspace list injection to workspacesListPlugin.

* Refactor plugin schema system for dynamic registration

Introduces a dynamic plugin schema registry, allowing plugins to register their parameter schemas and metadata at runtime. Refactors prompt concat schema generation to use dynamically registered plugin schemas, removes static plugin schema definitions, and updates all plugin files to export their parameter schemas. Adds new modelContextProtocolPlugin and schemaRegistry modules, and updates plugin initialization to register schemas and metadata. This enables extensibility and type safety for plugin configuration and validation.

* refactor: move PromptConfigForm to inside PromptPreviewDialog

* test: frontent render tool usage info

* test: split file

* test: fix error

* test: wiki operation

* test: remove log and clean up test deps

* Update i18next-electron-fs-backend.ts

* fix: wikiOperationInServer not called due to no message

* test: fix

* test: Refactor agent feature setup and improve mock server URL handling

Moved AI provider and model configuration to a shared setup scenario in agent.feature to avoid redundant steps in each test. Enhanced application.ts to use a fallback localhost URL for MOCK_SERVER_URL when the mock server is not available, improving test reliability.

* Remove retry logic from basicPromptConcatHandler

Eliminated retryCount and maxRetries from basicPromptConcatHandler, simplifying the control flow and removing the retry limit for LLM calls. Logging and yield logic were updated to reflect the removal of retries.

* Update agent.feature

* test: agent and default wiki

* test: refactor wiki cleanup

* Update agent.feature

* Refactor AI settings setup and add preference feature

Moved AI provider and model configuration steps from agent.feature to a new preference.feature file for better separation of concerns. Updated step definitions in agent.ts to improve robustness when reading and writing settings files, including type usage and directory checks.

* test: try debug can't stop bug

* Update Testing.md

* fix: cancel agent not update cancel button

* refactor: update Frontend use `void window.service.native.log` to log to file.

* test: log from renderer test

* feat: add default embedding model config and victor search service and search preference panel

* test: default embedding form and

* test: default agent

* refator: unused tool listing methods

* Refactor test database setup for integration tests

Centralizes in-memory SQLite test database initialization and cleanup in shared utilities for all integration tests. Updates agentDefinition and messageManagementPlugin tests to use the shared test database, improving reliability and reducing code duplication.

* fix: app path wrong in unit test

* feat: externalAPIDebug

* test: embedding service and let db use real in memory one

* test: provide at least one tab for close tab test

* fix: victor db not loaded in new connection

* test: disable hot reload

* Update DeveloperTools.tsx

* feat: tool message & wiki tool schema

* feat: pref to open db

* chore: skip ExternalsPlugin on dev

* fix: APIs doesn't accept 'tool' role, and it won't return anything when API calls

* fix: docs and remove ai fake fix

* refactor: get agent list don't need to have message

* Update basicPromptConcatHandler.failure.test.ts

* Update basicPromptConcatHandler.test.ts

* fix: role wrong cause e2e failed

* test: allow e2e create .db file to check

* feat: create new agent

* feat: getAgentDefinitionTemplatesFromWikis

* fix: Prevent update non-active (hiding) wiki workspace, so it won't pop up to cover other active agent workspace

* fix: Ensure the config change is fully persisted before proceeding

* test: Don't bring up window when running e2e test, otherwise it will annoy the developer who is doing other things.

* feat: Edit existing agent definition workflow

* Update StyledArrayContainer.tsx

* test: prevent mock server hang

* Refactor UI step definitions into separate file

Moved UI-related Cucumber step definitions from application.ts to a new ui.ts file for better separation of concerns and maintainability. application.ts now only contains application-specific logic.

* lint: ai auto fix

* Clean up feature files and improve test coverage

Removed unnecessary blank lines and improved formatting in feature files for better readability. Updated tsconfig to use 'bundler' module resolution. Enhanced EditAgentDefinitionContent test to mock and verify console.error output. Added type annotation for IAgentDefinitionService in basicPromptConcatHandler.failure.test.ts for improved type safety.

* test: simplify message text match

* feat: transcription and image generation model config

* fix: style props error

* chore: remove unused file

* chore: try to imporove dev start speed but no sig improvment

Replaces 'pnpm start' with 'pnpm start:init' for initial setup and documents slow startup in development. Adds a debug Webpack script, disables polling in renderer file watching, and only enables CircularDependencyPlugin in production/CI for faster dev builds. WebpackBar now only shows when DEBUG includes 'electron-forge:*'. ForkTsCheckerWebpackPlugin is now configured for async checks with memory limits and test file exclusion. Updates documentation to reflect these changes.

* docs: why not vite

* refactor: basic vite usage, but wiki worker is not running and view is not showing

* refactor: remove lazy inject so vite works and wiki worker works, wiki in browser view can loads

* Replace electron-squirrel-startup with inline implementation

Added a custom Squirrel event handler in src/helpers/squirrelStartup.ts to handle Windows install/update/uninstall events, replacing the electron-squirrel-startup package. This avoids ESM/CommonJS compatibility issues and simplifies event handling in src/main.ts.

* refactor: vite build and test

* fix: e2e still use dev wiki folder

* fix: provide env

* chore: "tiddlywiki": "5.3.7"

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: missing i18n

* test:  Module did not self-register: '/home/runner/work/TidGi-Desktop/TidGi-Desktop/node_modules/better-sqlite3/build/Release/better_sqlite3.node'.

* feat: i18n

* feat: zh-Hant i18n

* Update test.yml

* feat: zh-Hans in test

* test: i18n

* refactor: ts forge config

* lint: fix

* chore: update wiki

* Update pnpm-lock.yaml

* chore: update github action versions

* Update wiki

* fix: pnpm then node

* fix: Multiple versions of pnpm specified

* Update test.yml

* fix: Failed to take screenshot: page.screenshot: Target page, context or browser has been closed

* chore: CodeQL Action major versions v1 and v2 have been deprecated.

* chore: parallel codeql

* Update test.yml

* fix: i18n test not passing

* test: step screenshot in each folder

* fix: can't unzip, may due to file path

* test: increase timeout in CI

* docs: more log about wiki creation, and add log to criticial path

* Refactor: logging for structured and consistent output

Replaces string-based logger messages with structured logging throughout the codebase, providing function names, error messages, and relevant context as objects. This improves log readability, enables better filtering and searching, and standardizes error and debug reporting across services.

* chore: debug wiki copy

* fix: wiki submodule not cloned

* Revert "test: increase timeout in CI"

This reverts commit eff8583a01.

* test: reduce wait time, because most check already will wait for a while

* test: batch some e2e steps to reduce screenshot count

* Update index.ts

* chore: remove webpack files, use vite plugins

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
lin onetwo 2025-10-10 17:16:56 +08:00 committed by GitHub
parent a39023627d
commit fa9751e5ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
533 changed files with 53202 additions and 11006 deletions

View file

@ -0,0 +1,63 @@
import { useTranslation } from 'react-i18next';
import { Alert, LinearProgress, Snackbar, Typography } from '@mui/material';
import { CloseButton, ReportErrorFabButton, WikiLocation } from './FormComponents';
import { useCloneWiki, useValidateCloneWiki } from './useCloneWiki';
import type { IWikiWorkspaceFormProps } from './useForm';
import { useWikiCreationProgress } from './useIndicator';
export function CloneWikiDoneButton({ form, isCreateMainWorkspace, errorInWhichComponentSetter }: IWikiWorkspaceFormProps): React.JSX.Element {
const { t } = useTranslation();
const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateCloneWiki(
isCreateMainWorkspace,
form,
errorInWhichComponentSetter,
);
const onSubmit = useCloneWiki(isCreateMainWorkspace, form, wikiCreationMessageSetter, hasErrorSetter, errorInWhichComponentSetter);
const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
if (hasError) {
return (
<>
<CloseButton variant='contained' disabled>
{wikiCreationMessage}
</CloseButton>
{wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
</>
);
}
return (
<>
{inProgressOrError && <LinearProgress color='secondary' />}
<Snackbar
open={logPanelOpened}
autoHideDuration={5000}
onClose={() => {
logPanelSetter(false);
}}
>
<Alert severity='info'>{wikiCreationMessage}</Alert>
</Snackbar>
{isCreateMainWorkspace
? (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.CloneWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
</CloseButton>
)
: (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.CloneWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.AndLinkToMainWorkspace')}
</Typography>
</CloseButton>
)}
</>
);
}

View file

@ -0,0 +1,101 @@
import FolderIcon from '@mui/icons-material/Folder';
import { AutocompleteRenderInputParams, MenuItem, Typography } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { isWikiWorkspace } from '@services/workspaces/interface';
import { CreateContainer, LocationPickerButton, LocationPickerContainer, LocationPickerInput, SoftLinkToMainWikiSelect, SubWikiTagAutoComplete } from './FormComponents';
import { useValidateCloneWiki } from './useCloneWiki';
import type { IWikiWorkspaceFormProps } from './useForm';
export function CloneWikiForm({ form, isCreateMainWorkspace, errorInWhichComponent, errorInWhichComponentSetter }: IWikiWorkspaceFormProps): React.JSX.Element {
const { t } = useTranslation();
useValidateCloneWiki(isCreateMainWorkspace, form, errorInWhichComponentSetter);
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.parentFolderLocation}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
form.parentFolderLocationSetter(event.target.value);
}}
label={t('AddWorkspace.WorkspaceParentFolder')}
value={form.parentFolderLocation}
/>
<LocationPickerButton
onClick={async () => {
// first clear the text, so button will refresh
form.parentFolderLocationSetter('');
const filePaths = await window.service.native.pickDirectory(form.parentFolderLocation);
if (filePaths.length > 0) {
form.parentFolderLocationSetter(filePaths[0]);
}
}}
endIcon={<FolderIcon />}
>
<Typography variant='button' display='inline'>
{t('AddWorkspace.Choose')}
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiFolderName}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
form.wikiFolderNameSetter(event.target.value);
}}
label={t('AddWorkspace.WorkspaceFolderNameToCreate')}
helperText={`${t('AddWorkspace.CloneWiki')}${form.wikiFolderLocation ?? ''}`}
value={form.wikiFolderName}
/>
</LocationPickerContainer>
{!isCreateMainWorkspace && (
<>
<SoftLinkToMainWikiSelect
select
error={errorInWhichComponent.mainWikiToLink}
label={t('AddWorkspace.MainWorkspaceLocation')}
helperText={form.mainWikiToLink.wikiFolderLocation &&
`${t('AddWorkspace.SubWorkspaceWillLinkTo')}
${form.mainWikiToLink.wikiFolderLocation}/tiddlers/${form.wikiFolderName}`}
value={form.mainWikiToLinkIndex}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const index = event.target.value as unknown as number;
const selectedWorkspace = form.mainWorkspaceList[index];
if (selectedWorkspace && isWikiWorkspace(selectedWorkspace)) {
form.mainWikiToLinkSetter({
wikiFolderLocation: selectedWorkspace.wikiFolderLocation,
port: selectedWorkspace.port,
id: selectedWorkspace.id,
});
}
}}
>
{form.mainWorkspaceList.map((workspace, index) => (
<MenuItem key={index} value={index}>
{workspace.name}
</MenuItem>
))}
</SoftLinkToMainWikiSelect>
<SubWikiTagAutoComplete
freeSolo
options={form.fileSystemPaths.map((fileSystemPath) => fileSystemPath.tagName)}
value={form.tagName}
onInputChange={(_event: React.SyntheticEvent, value: string) => {
form.tagNameSetter(value);
}}
renderInput={(parameters: AutocompleteRenderInputParams) => (
<LocationPickerInput
{...parameters}
error={errorInWhichComponent.tagName}
label={t('AddWorkspace.TagName')}
helperText={t('AddWorkspace.TagNameHelp')}
/>
)}
/>
</>
)}
</CreateContainer>
);
}

View file

@ -0,0 +1,88 @@
import { styled } from '@mui/material/styles';
import React from 'react';
import { useTranslation } from 'react-i18next';
import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import SwitchRaw from '@mui/material/Switch';
import Typography from '@mui/material/Typography';
const Switch = styled(SwitchRaw)`
& span.MuiSwitch-track,
& > span:not(.Mui-checked) span.MuiSwitch-thumb {
background-color: #1976d2;
}
`;
const Container = styled(Paper)`
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
/**
* Introduce difference between main and sub wiki.
* @returns
*/
export function MainSubWikiDescription({
isCreateMainWorkspace,
isCreateMainWorkspaceSetter,
}: {
isCreateMainWorkspace: boolean;
isCreateMainWorkspaceSetter: (is: boolean) => void;
}): React.JSX.Element {
const { t } = useTranslation();
const label = isCreateMainWorkspace ? t('AddWorkspace.MainWorkspace') : t('AddWorkspace.SubWorkspace');
const description = isCreateMainWorkspace ? t('AddWorkspace.MainWorkspaceDescription') : t('AddWorkspace.SubWorkspaceDescription');
return (
<Container elevation={0} square>
<FormControlLabel
control={
<Switch
checked={isCreateMainWorkspace}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
isCreateMainWorkspaceSetter(event.target.checked);
}}
/>
}
label={label}
/>
<Typography variant='body2' display='inline'>
{description}
</Typography>
</Container>
);
}
/**
* Introduce difference between Sync to cloud wiki and local wiki.
* @returns
*/
export function SyncedWikiDescription({
isCreateSyncedWorkspace,
isCreateSyncedWorkspaceSetter,
}: {
isCreateSyncedWorkspace: boolean;
isCreateSyncedWorkspaceSetter: (is: boolean) => void;
}): React.JSX.Element {
const { t } = useTranslation();
const label = isCreateSyncedWorkspace ? t('AddWorkspace.SyncedWorkspace') : t('AddWorkspace.LocalWorkspace');
const description = isCreateSyncedWorkspace ? t('AddWorkspace.SyncedWorkspaceDescription') : t('AddWorkspace.LocalWorkspaceDescription');
return (
<Container elevation={0} square>
<FormControlLabel
control={
<Switch
checked={isCreateSyncedWorkspace}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
isCreateSyncedWorkspaceSetter(event.target.checked);
}}
/>
}
label={label}
/>
<Typography variant='body2' display='inline'>
{description}
</Typography>
</Container>
);
}

View file

@ -0,0 +1,70 @@
import { useTranslation } from 'react-i18next';
import { Alert, LinearProgress, Snackbar, Typography } from '@mui/material';
import { CloseButton, ReportErrorFabButton, WikiLocation } from './FormComponents';
import { useExistedWiki, useValidateExistedWiki } from './useExistedWiki';
import type { IWikiWorkspaceFormProps } from './useForm';
import { useWikiCreationProgress } from './useIndicator';
export function ExistedWikiDoneButton({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateMainWorkspace: boolean; isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateExistedWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
errorInWhichComponentSetter,
);
const onSubmit = useExistedWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, wikiCreationMessageSetter, hasErrorSetter, errorInWhichComponentSetter);
const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
if (hasError) {
return (
<>
<CloseButton variant='contained' disabled>
{wikiCreationMessage}
</CloseButton>
{wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
</>
);
}
return (
<>
{inProgressOrError && <LinearProgress color='secondary' />}
<Snackbar
open={logPanelOpened}
autoHideDuration={5000}
onClose={() => {
logPanelSetter(false);
}}
>
<Alert severity='info'>{wikiCreationMessage}</Alert>
</Snackbar>
{isCreateMainWorkspace
? (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.ImportWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
</CloseButton>
)
: (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.ImportWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.AndLinkToMainWorkspace')}
</Typography>
</CloseButton>
)}
</>
);
}

View file

@ -0,0 +1,122 @@
import FolderIcon from '@mui/icons-material/Folder';
import { AutocompleteRenderInputParams, MenuItem, Typography } from '@mui/material';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { isWikiWorkspace } from '@services/workspaces/interface';
import { CreateContainer, LocationPickerButton, LocationPickerContainer, LocationPickerInput, SoftLinkToMainWikiSelect, SubWikiTagAutoComplete } from './FormComponents';
import { useValidateExistedWiki } from './useExistedWiki';
import type { IWikiWorkspaceFormProps } from './useForm';
export function ExistedWikiForm({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponent,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
const {
wikiFolderLocation,
wikiFolderNameSetter,
parentFolderLocation,
parentFolderLocationSetter,
mainWikiToLink,
wikiFolderName,
mainWikiToLinkIndex,
mainWikiToLinkSetter,
mainWorkspaceList,
fileSystemPaths,
tagName,
tagNameSetter,
} = form;
useValidateExistedWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
const onLocationChange = useCallback(
async (newLocation: string) => {
const folderName = await window.service.native.path('basename', newLocation);
const directoryName = await window.service.native.path('dirname', newLocation);
if (folderName !== undefined && directoryName !== undefined) {
wikiFolderNameSetter(folderName);
parentFolderLocationSetter(directoryName);
}
},
[wikiFolderNameSetter, parentFolderLocationSetter],
);
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiFolderLocation}
onChange={async (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
await onLocationChange(event.target.value);
}}
label={t('AddWorkspace.WorkspaceFolder')}
helperText={`${t('AddWorkspace.ImportWiki')}${wikiFolderLocation ?? ''}`}
value={wikiFolderLocation}
/>
<LocationPickerButton
onClick={async () => {
// first clear the text, so button will refresh
await onLocationChange('');
const filePaths = await window.service.native.pickDirectory(parentFolderLocation);
if (filePaths.length > 0) {
await onLocationChange(filePaths[0]);
}
}}
endIcon={<FolderIcon />}
>
<Typography variant='button' display='inline'>
{t('AddWorkspace.Choose')}
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
{!isCreateMainWorkspace && (
<>
<SoftLinkToMainWikiSelect
select
error={errorInWhichComponent.mainWikiToLink}
label={t('AddWorkspace.MainWorkspaceLocation')}
helperText={mainWikiToLink.wikiFolderLocation &&
`${t('AddWorkspace.SubWorkspaceWillLinkTo')}
${mainWikiToLink.wikiFolderLocation}/tiddlers/${wikiFolderName}`}
value={mainWikiToLinkIndex}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const index = event.target.value as unknown as number;
const selectedWorkspace = mainWorkspaceList[index];
if (selectedWorkspace && isWikiWorkspace(selectedWorkspace)) {
mainWikiToLinkSetter({
wikiFolderLocation: selectedWorkspace.wikiFolderLocation,
port: selectedWorkspace.port,
id: selectedWorkspace.id,
});
}
}}
>
{mainWorkspaceList.map((workspace, index) => (
<MenuItem key={index} value={index}>
{workspace.name}
</MenuItem>
))}
</SoftLinkToMainWikiSelect>
<SubWikiTagAutoComplete
freeSolo
options={fileSystemPaths.map((fileSystemPath) => fileSystemPath.tagName)}
value={tagName}
onInputChange={(_event: React.SyntheticEvent, value: string) => {
tagNameSetter(value);
}}
renderInput={(parameters: AutocompleteRenderInputParams) => (
<LocationPickerInput
{...parameters}
error={errorInWhichComponent.tagName}
label={t('AddWorkspace.TagName')}
helperText={t('AddWorkspace.TagNameHelp')}
/>
)}
/>
</>
)}
</CreateContainer>
);
}

View file

@ -0,0 +1,92 @@
import { Autocomplete, Button, Fab, Paper, TextField, Tooltip, Typography } from '@mui/material';
import { css, styled } from '@mui/material/styles';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
export const CreateContainer = styled(Paper)`
padding: 10px;
margin-top: 10px;
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
export const LocationPickerContainer = styled('div')`
display: flex;
flex-direction: row;
margin-bottom: 10px;
width: 100%;
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
export const LocationPickerInput = styled((props: React.ComponentProps<typeof TextField>) => <TextField fullWidth variant='standard' {...props} />)`
background-color: ${({ theme }) => theme.palette.background.paper};
flex: 1;
`;
export const LocationPickerButton = styled((props: React.ComponentProps<typeof Button>) => <Button variant='contained' color='inherit' {...props} />)`
white-space: nowrap;
width: fit-content;
`;
export const CloseButton = styled(Button)`
${({ disabled }) =>
disabled === true
? ''
: css`
white-space: nowrap;
`}
width: 100%;
background-color: ${({ theme }) => theme.palette.secondary[theme.palette.mode]};
`;
export const SoftLinkToMainWikiSelect = styled((props: React.ComponentProps<typeof LocationPickerInput>) => <LocationPickerInput {...props} />)`
width: 100%;
`;
export const SubWikiTagAutoComplete = styled((props: React.ComponentProps<typeof Autocomplete>) => <Autocomplete {...props} />)``;
export const WikiLocation = styled((props: { children?: ReactNode } & React.ComponentProps<typeof Typography>) => (
<Typography variant='body2' noWrap display='inline' align='center' {...props} />
))`
direction: rtl;
text-transform: none;
margin-left: 5px;
margin-right: 5px;
`;
export function ReportErrorButton(props: { message: string }): React.JSX.Element {
const { t } = useTranslation();
return (
<Tooltip title={(t('Dialog.ReportBugDetail') ?? '') + (t('Menu.ReportBugViaGithub') ?? '')}>
<Button
color='secondary'
onClick={() => {
const error = new Error(props.message);
error.stack = 'ReportErrorButton';
void window.service.native.openNewGitHubIssue(error);
}}
>
{t('Dialog.ReportBug')}
</Button>
</Tooltip>
);
}
const AbsoluteFab = styled(Fab)`
position: fixed;
right: 10px;
bottom: 10px;
color: rgba(0, 0, 0, 0.2);
font-size: 10px;
`;
export function ReportErrorFabButton(props: { message: string }): React.JSX.Element {
const { t } = useTranslation();
return (
<Tooltip title={(t('Dialog.ReportBugDetail') ?? '') + (t('Menu.ReportBugViaGithub') ?? '')}>
<AbsoluteFab
color='default'
onClick={() => {
const error = new Error(props.message);
error.stack = 'ReportErrorButton';
void window.service.native.openNewGitHubIssue(error);
}}
>
{t('Dialog.ReportBug')}
</AbsoluteFab>
</Tooltip>
);
}

View file

@ -0,0 +1,47 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SupportedStorageServices } from '@services/types';
import SearchGithubRepo from '@/components/StorageService/SearchGithubRepo';
import { CreateContainer, LocationPickerContainer, LocationPickerInput } from './FormComponents';
export function GitRepoUrlForm({
storageProvider,
gitRepoUrl,
gitRepoUrlSetter,
wikiFolderNameSetter,
isCreateMainWorkspace,
error,
}: {
error?: boolean;
gitRepoUrl: string;
gitRepoUrlSetter: (nextUrl: string) => void;
isCreateMainWorkspace: boolean;
storageProvider?: SupportedStorageServices;
wikiFolderNameSetter?: (nextName: string) => void;
}): React.JSX.Element {
const { t } = useTranslation();
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={error}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
gitRepoUrlSetter(event.target.value);
}}
label={t('AddWorkspace.GitRepoUrl')}
value={gitRepoUrl}
/>
</LocationPickerContainer>
{storageProvider === SupportedStorageServices.github && (
<SearchGithubRepo
githubWikiUrl={gitRepoUrl}
githubWikiUrlSetter={gitRepoUrlSetter}
isCreateMainWorkspace={isCreateMainWorkspace}
wikiFolderNameSetter={wikiFolderNameSetter}
/>
)}
</CreateContainer>
);
}

View file

@ -0,0 +1,62 @@
import { Alert, LinearProgress, Snackbar, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CloseButton, ReportErrorFabButton, WikiLocation } from './FormComponents';
import type { IWikiWorkspaceFormProps } from './useForm';
import { useImportHtmlWiki, useValidateHtmlWiki } from './useImportHtmlWiki';
import { useWikiCreationProgress } from './useIndicator';
export function ImportHtmlWikiDoneButton({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateMainWorkspace: boolean; isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateHtmlWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
errorInWhichComponentSetter,
);
const onSubmit = useImportHtmlWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
wikiCreationMessageSetter,
hasErrorSetter,
errorInWhichComponentSetter,
);
const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
if (hasError) {
return (
<>
<CloseButton variant='contained' disabled>
{wikiCreationMessage}
</CloseButton>
{wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
</>
);
}
return (
<>
{inProgressOrError && <LinearProgress color='secondary' />}
{/* 这个好像是log面板 */}
<Snackbar
open={logPanelOpened}
autoHideDuration={5000}
onClose={() => {
logPanelSetter(false);
}}
>
<Alert severity='info'>{wikiCreationMessage}</Alert>
</Snackbar>
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.ImportWiki')}
</Typography>
<WikiLocation>{form.wikiHtmlPath}</WikiLocation>
</CloseButton>
</>
);
}

View file

@ -0,0 +1,93 @@
import FolderIcon from '@mui/icons-material/Folder';
import { Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useValidateHtmlWiki } from './useImportHtmlWiki';
import { CreateContainer, LocationPickerButton, LocationPickerContainer, LocationPickerInput } from './FormComponents';
import type { IWikiWorkspaceFormProps } from './useForm';
export function ImportHtmlWikiForm({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponent,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
const { wikiHtmlPathSetter, wikiFolderLocation, wikiFolderName, wikiHtmlPath, parentFolderLocation, wikiFolderNameSetter } = form;
useValidateHtmlWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiHtmlPath}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
// https://zh-hans.reactjs.org/docs/events.html#clipboard-events
wikiHtmlPathSetter(event.target.value);
}}
label={t('AddWorkspace.LocalWikiHtml')}
value={wikiHtmlPath}
/>
<LocationPickerButton
// 第一个输入框的选择文件夹按钮。
onClick={async () => {
// first clear the text, so button will refresh
wikiHtmlPathSetter('');
const filePaths = await window.service.native.pickFile([{ name: 'html文件', extensions: ['html', 'htm'] }]);
if (filePaths.length > 0) {
wikiHtmlPathSetter(filePaths[0]);
const fileName = await window.service.native.path('basename', filePaths[0]);
if (fileName !== undefined) {
// use html file name as default wiki name
wikiFolderNameSetter(fileName.split('.')[0]);
}
}
}}
endIcon={<FolderIcon />}
>
<Typography variant='button' display='inline'>
{t('AddWorkspace.Choose')}
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.parentFolderLocation}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
form.parentFolderLocationSetter(event.target.value);
}}
label={t('AddWorkspace.WorkspaceParentFolder')}
value={parentFolderLocation}
/>
<LocationPickerButton
onClick={async () => {
// first clear the text, so button will refresh
form.parentFolderLocationSetter('');
const filePaths = await window.service.native.pickDirectory(parentFolderLocation);
if (filePaths.length > 0) {
form.parentFolderLocationSetter(filePaths[0]);
}
}}
endIcon={<FolderIcon />}
>
<Typography variant='button' display='inline'>
{t('AddWorkspace.Choose')}
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiFolderName}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
wikiFolderNameSetter(event.target.value);
}}
label={t('AddWorkspace.ExtractedWikiFolderName')}
helperText={`${t('AddWorkspace.CreateWiki')}${wikiFolderLocation ?? ''}`}
value={wikiFolderName}
/>
</LocationPickerContainer>
</CreateContainer>
);
}

View file

@ -0,0 +1,68 @@
import { Alert, LinearProgress, Snackbar, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CloseButton, ReportErrorFabButton, WikiLocation } from './FormComponents';
import type { IWikiWorkspaceFormProps } from './useForm';
import { useWikiCreationProgress } from './useIndicator';
import { useNewWiki, useValidateNewWiki } from './useNewWiki';
export function NewWikiDoneButton({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateMainWorkspace: boolean; isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
const [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter] = useValidateNewWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
errorInWhichComponentSetter,
);
const onSubmit = useNewWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, wikiCreationMessageSetter, hasErrorSetter, errorInWhichComponentSetter);
const [logPanelOpened, logPanelSetter, inProgressOrError] = useWikiCreationProgress(wikiCreationMessageSetter, wikiCreationMessage, hasError);
if (hasError) {
return (
<>
<CloseButton variant='contained' disabled={true}>
{wikiCreationMessage}
</CloseButton>
{wikiCreationMessage !== undefined && <ReportErrorFabButton message={wikiCreationMessage} />}
</>
);
}
return (
<>
{inProgressOrError && <LinearProgress color='secondary' />}
<Snackbar
open={logPanelOpened}
autoHideDuration={5000}
onClose={() => {
logPanelSetter(false);
}}
>
<Alert severity='info'>{wikiCreationMessage}</Alert>
</Snackbar>
{isCreateMainWorkspace
? (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.CreateWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
</CloseButton>
)
: (
<CloseButton variant='contained' color='secondary' disabled={inProgressOrError} onClick={onSubmit}>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.CreateWiki')}
</Typography>
<WikiLocation>{form.wikiFolderLocation}</WikiLocation>
<Typography variant='body1' display='inline'>
{t('AddWorkspace.AndLinkToMainWorkspace')}
</Typography>
</CloseButton>
)}
</>
);
}

View file

@ -0,0 +1,108 @@
import FolderIcon from '@mui/icons-material/Folder';
import { AutocompleteRenderInputParams, MenuItem, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { isWikiWorkspace } from '@services/workspaces/interface';
import { CreateContainer, LocationPickerButton, LocationPickerContainer, LocationPickerInput, SoftLinkToMainWikiSelect, SubWikiTagAutoComplete } from './FormComponents';
import type { IWikiWorkspaceFormProps } from './useForm';
import { useValidateNewWiki } from './useNewWiki';
export function NewWikiForm({
form,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
errorInWhichComponent,
errorInWhichComponentSetter,
}: IWikiWorkspaceFormProps & { isCreateSyncedWorkspace: boolean }): React.JSX.Element {
const { t } = useTranslation();
useValidateNewWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
return (
<CreateContainer elevation={2} square>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.parentFolderLocation}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
form.parentFolderLocationSetter(event.target.value);
}}
label={t('AddWorkspace.WorkspaceParentFolder')}
value={form.parentFolderLocation}
/>
<LocationPickerButton
onClick={async () => {
// first clear the text, so button will refresh
form.parentFolderLocationSetter('');
const filePaths = await window.service.native.pickDirectory(form.parentFolderLocation);
if (filePaths.length > 0) {
form.parentFolderLocationSetter(filePaths[0]);
}
}}
endIcon={<FolderIcon />}
>
<Typography variant='button' display='inline'>
{t('AddWorkspace.Choose')}
</Typography>
</LocationPickerButton>
</LocationPickerContainer>
<LocationPickerContainer>
<LocationPickerInput
error={errorInWhichComponent.wikiFolderName}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
form.wikiFolderNameSetter(event.target.value);
}}
label={t('AddWorkspace.WorkspaceFolderNameToCreate')}
helperText={`${t('AddWorkspace.CreateWiki')}${form.wikiFolderLocation ?? ''}`}
value={form.wikiFolderName}
/>
</LocationPickerContainer>
{!isCreateMainWorkspace && (
<>
<SoftLinkToMainWikiSelect
select
error={errorInWhichComponent.mainWikiToLink}
label={t('AddWorkspace.MainWorkspaceLocation')}
helperText={form.mainWikiToLink.wikiFolderLocation &&
`${t('AddWorkspace.SubWorkspaceWillLinkTo')}
${form.mainWikiToLink.wikiFolderLocation}/tiddlers/subwiki/${form.wikiFolderName}`}
value={form.mainWikiToLinkIndex}
slotProps={{ htmlInput: { 'data-testid': 'main-wiki-select' } }}
onChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const index = event.target.value as unknown as number;
const selectedWorkspace = form.mainWorkspaceList[index];
if (selectedWorkspace && isWikiWorkspace(selectedWorkspace)) {
form.mainWikiToLinkSetter({
wikiFolderLocation: selectedWorkspace.wikiFolderLocation,
port: selectedWorkspace.port,
id: selectedWorkspace.id,
});
}
}}
>
{form.mainWorkspaceList.map((workspace, index) => (
<MenuItem key={index} value={index}>
{workspace.name}
</MenuItem>
))}
</SoftLinkToMainWikiSelect>
<SubWikiTagAutoComplete
freeSolo
options={form.fileSystemPaths.map((fileSystemPath) => fileSystemPath.tagName)}
value={form.tagName}
onInputChange={(_event: React.SyntheticEvent, value: string) => {
form.tagNameSetter(value);
}}
renderInput={(parameters: AutocompleteRenderInputParams) => (
<LocationPickerInput
error={errorInWhichComponent.tagName}
{...parameters}
label={t('AddWorkspace.TagName')}
helperText={t('AddWorkspace.TagNameHelp')}
slotProps={{ htmlInput: { ...parameters.inputProps, 'data-testid': 'tagname-autocomplete-input' } }}
/>
)}
/>
</>
)}
</CreateContainer>
);
}

View file

@ -0,0 +1,284 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import '@testing-library/jest-dom/vitest';
import { IGitUserInfos } from '@services/git/interface';
import { SupportedStorageServices } from '@services/types';
import { ISubWikiPluginContent } from '@services/wiki/plugin/subWikiPlugin';
import { IWorkspace } from '@services/workspaces/interface';
import { NewWikiForm } from '../NewWikiForm';
import { IErrorInWhichComponent, IWikiWorkspaceForm } from '../useForm';
// Mock form data helper
const createMockForm = (overrides: Partial<IWikiWorkspaceForm> = {}): IWikiWorkspaceForm => ({
storageProvider: SupportedStorageServices.local,
storageProviderSetter: vi.fn(),
wikiPort: 5212,
wikiPortSetter: vi.fn(),
parentFolderLocation: '/test/parent',
parentFolderLocationSetter: vi.fn(),
wikiFolderName: 'test-wiki',
wikiFolderNameSetter: vi.fn(),
wikiFolderLocation: '/test/parent/test-wiki',
mainWikiToLink: {
wikiFolderLocation: '/main/wiki',
id: 'main-wiki-id',
port: 5212,
},
mainWikiToLinkSetter: vi.fn(),
mainWikiToLinkIndex: 0,
mainWorkspaceList: [
{
id: 'main-wiki-id',
name: 'Main Wiki',
wikiFolderLocation: '/main/wiki',
port: 5212,
gitUrl: 'https://example.com/git',
homeUrl: 'http://localhost:5212',
metadata: {},
} as unknown as IWorkspace,
{
id: 'second-wiki-id',
name: 'Second Wiki',
wikiFolderLocation: '/second/wiki',
port: 5213,
gitUrl: 'https://example.com/git2',
homeUrl: 'http://localhost:5213',
metadata: {},
} as unknown as IWorkspace,
],
fileSystemPaths: [
{ tagName: 'TagA', folderName: 'FolderA' } as ISubWikiPluginContent,
{ tagName: 'TagB', folderName: 'FolderB' } as ISubWikiPluginContent,
],
fileSystemPathsSetter: vi.fn(),
tagName: '',
tagNameSetter: vi.fn(),
gitRepoUrl: '',
gitRepoUrlSetter: vi.fn(),
gitUserInfo: undefined as IGitUserInfos | undefined,
workspaceList: [] as IWorkspace[],
wikiHtmlPath: '',
wikiHtmlPathSetter: vi.fn(),
...overrides,
});
const createMockProps = (overrides: Partial<{
form: IWikiWorkspaceForm;
isCreateMainWorkspace: boolean;
isCreateSyncedWorkspace: boolean;
errorInWhichComponent: IErrorInWhichComponent;
errorInWhichComponentSetter: ReturnType<typeof vi.fn>;
}> = {}) => ({
form: createMockForm(),
isCreateMainWorkspace: true,
isCreateSyncedWorkspace: false,
errorInWhichComponent: {},
errorInWhichComponentSetter: vi.fn(),
...overrides,
});
describe('NewWikiForm Component', () => {
beforeEach(() => {
vi.clearAllMocks();
});
// Helper function to render component with default props
const renderNewWikiForm = (overrides = {}) => {
const props = createMockProps(overrides);
return render(<NewWikiForm {...props} />);
};
describe('Basic Rendering Tests', () => {
it('should render main workspace form with basic fields', () => {
renderNewWikiForm({
isCreateMainWorkspace: true,
});
// Should render parent folder input
expect(screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceParentFolder' })[0]).toBeInTheDocument();
// Should render wiki folder name input
expect(screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceFolderNameToCreate' })[0]).toBeInTheDocument();
// Should render choose folder button
expect(screen.getAllByRole('button', { name: 'AddWorkspace.Choose' })[0]).toBeInTheDocument();
// Main workspace should not show sub workspace fields
expect(screen.queryAllByRole('combobox', { name: 'AddWorkspace.MainWorkspaceLocation' }).length).toBe(0);
expect(screen.queryAllByRole('combobox', { name: 'AddWorkspace.TagName' }).length).toBe(0);
});
it('should render sub workspace form with all fields', () => {
renderNewWikiForm({
isCreateMainWorkspace: false,
});
// Should render basic fields
expect(screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceParentFolder' })[0]).toBeInTheDocument();
expect(screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceFolderNameToCreate' })[0]).toBeInTheDocument();
// Should render sub workspace specific fields
expect(screen.getAllByRole('combobox', { name: 'AddWorkspace.MainWorkspaceLocation' })[0]).toBeInTheDocument();
expect(screen.getAllByRole('combobox', { name: 'AddWorkspace.TagName' })[0]).toBeInTheDocument();
});
it('should display correct initial values', () => {
const form = createMockForm({
parentFolderLocation: '/custom/path',
wikiFolderName: 'my-wiki',
});
renderNewWikiForm({
form,
isCreateMainWorkspace: false,
});
expect(screen.getByDisplayValue('/custom/path')).toBeInTheDocument();
expect(screen.getByDisplayValue('my-wiki')).toBeInTheDocument();
});
});
describe('User Interaction Tests', () => {
it('should handle parent folder path input change', async () => {
const user = userEvent.setup();
const mockSetter = vi.fn();
const form = createMockForm({
parentFolderLocationSetter: mockSetter,
});
renderNewWikiForm({ form });
const input = screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceParentFolder' })[0];
await user.clear(input);
await user.type(input, '/new/path');
// Should call setter for each character
expect(mockSetter).toHaveBeenCalled();
expect(mockSetter.mock.calls.length).toBeGreaterThan(0);
});
it('should handle wiki folder name input change', async () => {
const user = userEvent.setup();
const mockSetter = vi.fn();
const form = createMockForm({
wikiFolderNameSetter: mockSetter,
});
renderNewWikiForm({ form });
const input = screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceFolderNameToCreate' })[0];
await user.clear(input);
await user.type(input, 'new-wiki-name');
// Should call setter for each character
expect(mockSetter).toHaveBeenCalled();
expect(mockSetter.mock.calls.length).toBeGreaterThan(0);
});
it('should handle directory picker button click', async () => {
const user = userEvent.setup();
const mockSetter = vi.fn();
const form = createMockForm({
parentFolderLocationSetter: mockSetter,
});
renderNewWikiForm({ form });
const button = screen.getAllByRole('button', { name: 'AddWorkspace.Choose' })[0];
await user.click(button);
// Should call the setter with empty string first, then with selected path
expect(mockSetter).toHaveBeenCalledWith('');
expect(mockSetter).toHaveBeenCalledWith('/test/selected/path');
});
it('should handle tag name input for sub workspace', async () => {
const user = userEvent.setup();
const mockSetter = vi.fn();
const form = createMockForm({
tagNameSetter: mockSetter,
});
renderNewWikiForm({
form,
isCreateMainWorkspace: false,
});
// Simulate user typing in autocomplete and pressing enter
const tagInput = screen.getByTestId('tagname-autocomplete-input');
await user.type(tagInput, 'MyTag');
await user.keyboard('{enter}');
expect(mockSetter).toHaveBeenCalledWith('MyTag');
});
});
describe('Error State Tests', () => {
it('should display errors on form fields when provided', () => {
renderNewWikiForm({
errorInWhichComponent: {
parentFolderLocation: true,
wikiFolderName: true,
},
});
// Should show error state on input fields
const parentInputs = screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceParentFolder' });
const wikiNameInputs = screen.getAllByRole('textbox', { name: 'AddWorkspace.WorkspaceFolderNameToCreate' });
expect(parentInputs.some(input => input.getAttribute('aria-invalid') === 'true')).toBe(true);
expect(wikiNameInputs.some(input => input.getAttribute('aria-invalid') === 'true')).toBe(true);
});
it('should display errors on sub workspace fields when provided', () => {
renderNewWikiForm({
isCreateMainWorkspace: false,
errorInWhichComponent: {
mainWikiToLink: true,
tagName: true,
},
});
// Should show error state on sub workspace fields
const mainWikiSelects = screen.getAllByRole('combobox', { name: 'AddWorkspace.MainWorkspaceLocation' });
const tagInputs = screen.getAllByRole('combobox', { name: 'AddWorkspace.TagName' });
expect(mainWikiSelects.some(select => select.getAttribute('aria-invalid') === 'true')).toBe(true);
expect(tagInputs.some(input => input.getAttribute('aria-invalid') === 'true')).toBe(true);
});
});
describe('Props and State Tests', () => {
it('should render without errors when required props are provided', () => {
expect(() => {
renderNewWikiForm();
}).not.toThrow();
});
it('should show helper text for wiki folder location', () => {
const form = createMockForm({
wikiFolderLocation: '/test/parent/my-wiki',
});
renderNewWikiForm({ form });
expect(screen.getByText('AddWorkspace.CreateWiki/test/parent/my-wiki')).toBeInTheDocument();
});
it('should show helper text for sub workspace linking', () => {
const form = createMockForm({
wikiFolderName: 'sub-wiki',
mainWikiToLink: {
wikiFolderLocation: '/main/wiki',
id: 'main-id',
port: 5212,
},
});
renderNewWikiForm({
form,
isCreateMainWorkspace: false,
});
// Because the text is rendered with a template literal and newlines, we need to use a regex
expect(screen.getByText((content, _element) => {
// The actual text might have whitespace and newlines
const normalized = content.replace(/\s+/g, ' ').trim();
return normalized === 'AddWorkspace.SubWorkspaceWillLinkTo /main/wiki/tiddlers/subwiki/sub-wiki';
})).toBeInTheDocument();
});
});
});

View file

@ -0,0 +1,6 @@
export enum CreateWorkspaceTabs {
CloneOnlineWiki = 'CloneOnlineWiki',
CreateNewWiki = 'CreateNewWiki',
OpenLocalWiki = 'OpenLocalWiki',
OpenLocalWikiFromHtml = 'OpenLocalWikiFromHtml',
}

View file

@ -0,0 +1,176 @@
import { Helmet } from '@dr.pogodin/react-helmet';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Accordion as AccordionRaw, AccordionDetails, AccordionSummary, AppBar, Box, Paper as PaperRaw, Tab as TabRaw, Tabs as TabsRaw } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SupportedStorageServices } from '@services/types';
import { MainSubWikiDescription, SyncedWikiDescription } from './Description';
import { CloneWikiDoneButton } from './CloneWikiDoneButton';
import { CloneWikiForm } from './CloneWikiForm';
import { ExistedWikiDoneButton } from './ExistedWikiDoneButton';
import { ExistedWikiForm } from './ExistedWikiForm';
import { NewWikiDoneButton } from './NewWikiDoneButton';
import { NewWikiForm } from './NewWikiForm';
import { IErrorInWhichComponent, useWikiWorkspaceForm } from './useForm';
import { TokenForm } from '@/components/TokenForm';
import { usePromiseValue } from '@/helpers/useServiceValue';
import { IPossibleWindowMeta, WindowMeta, WindowNames } from '@services/windows/WindowProperties';
import { CreateWorkspaceTabs } from './constants';
import { GitRepoUrlForm } from './GitRepoUrlForm';
import { ImportHtmlWikiDoneButton } from './ImportHtmlWikiDoneButton';
import { ImportHtmlWikiForm } from './ImportHtmlWikiForm';
const Paper = styled((props: React.ComponentProps<typeof PaperRaw>) => <PaperRaw {...props} />)`
border-color: ${({ theme }) => theme.palette.divider};
background: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
const Accordion = styled((props: React.ComponentProps<typeof AccordionRaw>) => <AccordionRaw {...props} />)`
border-color: ${({ theme }) => theme.palette.divider};
background: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
const Container = styled('main')`
display: flex;
flex-direction: column;
overflow: scroll;
&::-webkit-scrollbar {
width: 0;
}
`;
const TokenFormContainer = styled((props: React.ComponentProps<typeof Paper>) => <Paper square elevation={2} {...props} />)`
margin: 10px 0;
padding: 5px 10px;
background-color: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.primary};
`;
const Tabs = styled((props: React.ComponentProps<typeof TabsRaw>) => <TabsRaw {...props} />)`
background: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.secondary};
`;
const Tab = styled((props: React.ComponentProps<typeof TabRaw>) => <TabRaw {...props} />)`
background: ${({ theme }) => theme.palette.background.paper};
color: ${({ theme }) => theme.palette.text.secondary};
`;
const TabPanel = styled((props: React.ComponentProps<typeof Box>) => <Box {...props} />)`
margin-bottom: 10px;
padding: 0;
`;
const AdvancedSettingsAccordionSummary = styled((props: React.ComponentProps<typeof AccordionSummary>) => <AccordionSummary {...props} />)`
margin-top: 10px;
`;
export default function AddWorkspace(): React.JSX.Element {
const { t } = useTranslation();
const [currentTab, currentTabSetter] = useState<CreateWorkspaceTabs>(
(window.meta() as IPossibleWindowMeta<WindowMeta[WindowNames.addWorkspace]>).addWorkspaceTab ?? CreateWorkspaceTabs.CreateNewWiki,
);
const isCreateSyncedWorkspace = currentTab === CreateWorkspaceTabs.CloneOnlineWiki;
const [isCreateMainWorkspace, isCreateMainWorkspaceSetter] = useState(true);
const form = useWikiWorkspaceForm();
const [errorInWhichComponent, errorInWhichComponentSetter] = useState<IErrorInWhichComponent>({});
const workspaceList = usePromiseValue(async () => await window.service.workspace.getWorkspacesAsList());
// update storageProviderSetter to local based on isCreateSyncedWorkspace. Other services value will be changed by TokenForm
const { storageProvider, storageProviderSetter, wikiFolderName } = form;
useEffect(() => {
if (!isCreateSyncedWorkspace && storageProvider !== SupportedStorageServices.local) {
storageProviderSetter(SupportedStorageServices.local);
}
}, [isCreateSyncedWorkspace, storageProvider, storageProviderSetter]);
// const [onClickLogin] = useAuth(storageService);
const formProps = {
form,
isCreateMainWorkspace,
errorInWhichComponent,
errorInWhichComponentSetter,
};
if (workspaceList === undefined) {
return <Container>{t('Loading')}</Container>;
}
return (
<Box>
<Helmet>
<title>
{t('AddWorkspace.AddWorkspace')} {wikiFolderName}
</title>
</Helmet>
<AppBar position='static'>
<Paper square>
<Tabs
onChange={(_event: React.SyntheticEvent, newValue: CreateWorkspaceTabs) => {
currentTabSetter(newValue);
}}
variant='scrollable'
value={currentTab}
aria-label={t('AddWorkspace.SwitchCreateNewOrOpenExisted')}
>
<Tab label={t('AddWorkspace.CreateNewWiki')} value={CreateWorkspaceTabs.CreateNewWiki} />
<Tab label={t(`AddWorkspace.CloneOnlineWiki`)} value={CreateWorkspaceTabs.CloneOnlineWiki} />
<Tab label={t('AddWorkspace.OpenLocalWiki')} value={CreateWorkspaceTabs.OpenLocalWiki} />
<Tab label={t('AddWorkspace.OpenLocalWikiFromHTML')} value={CreateWorkspaceTabs.OpenLocalWikiFromHtml} />
</Tabs>
</Paper>
</AppBar>
{/* show advanced options if user have already created a workspace */}
<Accordion defaultExpanded={workspaceList.length > 0}>
<AdvancedSettingsAccordionSummary expandIcon={<ExpandMoreIcon />}>{t('AddWorkspace.Advanced')}</AdvancedSettingsAccordionSummary>
<AccordionDetails>
{/* Force it only show sync option when clone online wiki, because many user encounter sync problem here. Recommend them create local first and sync later. */}
{isCreateSyncedWorkspace && <SyncedWikiDescription isCreateSyncedWorkspace={isCreateSyncedWorkspace} isCreateSyncedWorkspaceSetter={() => {}} />}
<MainSubWikiDescription isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
</AccordionDetails>
</Accordion>
{isCreateSyncedWorkspace && (
<TokenFormContainer>
<TokenForm storageProvider={storageProvider} storageProviderSetter={storageProviderSetter} />
</TokenFormContainer>
)}
{storageProvider !== SupportedStorageServices.local && <GitRepoUrlForm error={errorInWhichComponent.gitRepoUrl} {...formProps} {...formProps.form} />}
{currentTab === CreateWorkspaceTabs.CreateNewWiki && (
<TabPanel>
<Container>
<NewWikiForm {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
<NewWikiDoneButton {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
</Container>
</TabPanel>
)}
{currentTab === CreateWorkspaceTabs.CloneOnlineWiki && (
<TabPanel>
<Container>
<CloneWikiForm {...formProps} />
<CloneWikiDoneButton {...formProps} />
</Container>
</TabPanel>
)}
{currentTab === CreateWorkspaceTabs.OpenLocalWiki && (
<TabPanel>
<Container>
<ExistedWikiForm {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
<ExistedWikiDoneButton {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
</Container>
</TabPanel>
)}
{currentTab === CreateWorkspaceTabs.OpenLocalWikiFromHtml && (
<TabPanel>
<Container>
<ImportHtmlWikiForm {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
<ImportHtmlWikiDoneButton {...formProps} isCreateSyncedWorkspace={isCreateSyncedWorkspace} />
</Container>
</TabPanel>
)}
</Box>
);
}

View file

@ -0,0 +1,34 @@
import { WikiCreationMethod } from '@/constants/wikiCreation';
import type { IGitUserInfos } from '@services/git/interface';
import type { INewWikiWorkspaceConfig } from '@services/workspaces/interface';
import type { TFunction } from 'i18next';
interface ICallWikiInitConfig {
from: WikiCreationMethod;
notClose?: boolean;
}
export async function callWikiInitialization(
newWorkspaceConfig: INewWikiWorkspaceConfig,
wikiCreationMessageSetter: (m: string) => void,
t: TFunction,
gitUserInfo: IGitUserInfos | undefined,
configs: ICallWikiInitConfig,
): Promise<void> {
wikiCreationMessageSetter(t('Log.InitializeWikiGit'));
const newWorkspace = await window.service.wikiGitWorkspace.initWikiGitTransaction(newWorkspaceConfig, gitUserInfo);
if (newWorkspace === undefined) {
throw new Error('newWorkspace is undefined');
}
// start wiki on startup, or on sub-wiki creation
wikiCreationMessageSetter(t('Log.InitializeWorkspaceView'));
/** create workspace from workspaceService to store workspace configs, and create a WebContentsView to actually display wiki web content from viewService */
await window.service.workspaceView.initializeWorkspaceView(newWorkspace, { isNew: true, from: configs.from });
wikiCreationMessageSetter(t('Log.InitializeWorkspaceViewDone'));
await window.service.workspaceView.setActiveWorkspaceView(newWorkspace.id);
wikiCreationMessageSetter('');
if (configs.notClose !== true) {
// wait for wiki to start and close the window now.
await window.remote.closeCurrentWindow();
}
}

View file

@ -0,0 +1,91 @@
import { WikiCreationMethod } from '@/constants/wikiCreation';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { callWikiInitialization } from './useCallWikiInitialization';
import type { IErrorInWhichComponent, IWikiWorkspaceForm } from './useForm';
import { workspaceConfigFromForm } from './useForm';
import { updateErrorInWhichComponentSetterByErrorMessage } from './useIndicator';
export function useValidateCloneWiki(
isCreateMainWorkspace: boolean,
form: IWikiWorkspaceForm,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): [boolean, string | undefined, (m: string) => void, (m: boolean) => void] {
const { t } = useTranslation();
const [wikiCreationMessage, wikiCreationMessageSetter] = useState<string | undefined>();
const [hasError, hasErrorSetter] = useState<boolean>(false);
useEffect(() => {
if (!form.parentFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.WorkspaceFolder')}`);
errorInWhichComponentSetter({ parentFolderLocation: true });
hasErrorSetter(true);
} else if (!form.wikiFolderName) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.WorkspaceFolderNameToCreate')}`);
errorInWhichComponentSetter({ wikiFolderName: true });
hasErrorSetter(true);
} else if (!form.gitRepoUrl) {
errorInWhichComponentSetter({ gitRepoUrl: true });
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.GitRepoUrl')}`);
hasErrorSetter(true);
} else if (!isCreateMainWorkspace && !form.mainWikiToLink.wikiFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.MainWorkspace')}`);
errorInWhichComponentSetter({ mainWikiToLink: true });
hasErrorSetter(true);
} else if (form.gitUserInfo === undefined || !(form.gitUserInfo.accessToken.length > 0)) {
wikiCreationMessageSetter(t('AddWorkspace.NotLoggedIn'));
errorInWhichComponentSetter({ gitUserInfo: true });
hasErrorSetter(true);
} else {
wikiCreationMessageSetter('');
errorInWhichComponentSetter({});
hasErrorSetter(false);
}
}, [
t,
isCreateMainWorkspace,
form.parentFolderLocation,
form.wikiFolderName,
form.gitRepoUrl,
form.gitUserInfo,
form.mainWikiToLink.wikiFolderLocation,
form.tagName,
errorInWhichComponentSetter,
]);
return [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter];
}
export function useCloneWiki(
isCreateMainWorkspace: boolean,
form: IWikiWorkspaceForm,
wikiCreationMessageSetter: (m: string) => void,
hasErrorSetter: (m: boolean) => void,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): () => Promise<void> {
const { t } = useTranslation();
const onSubmit = useCallback(async () => {
wikiCreationMessageSetter(t('AddWorkspace.Processing'));
try {
const newWorkspaceConfig = workspaceConfigFromForm(form, isCreateMainWorkspace, true);
if (isCreateMainWorkspace) {
await window.service.wiki.cloneWiki(form.parentFolderLocation, form.wikiFolderName, form.gitRepoUrl, form.gitUserInfo!);
} else {
await window.service.wiki.cloneSubWiki(
form.parentFolderLocation,
form.wikiFolderName,
form.mainWikiToLink.wikiFolderLocation,
form.gitRepoUrl,
form.gitUserInfo!,
form.tagName,
);
}
await callWikiInitialization(newWorkspaceConfig, wikiCreationMessageSetter, t, form.gitUserInfo, { from: WikiCreationMethod.Clone });
} catch (error) {
wikiCreationMessageSetter((error as Error).message);
updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
hasErrorSetter(true);
}
}, [wikiCreationMessageSetter, t, form, isCreateMainWorkspace, errorInWhichComponentSetter, hasErrorSetter]);
return onSubmit;
}

View file

@ -0,0 +1,102 @@
import { WikiCreationMethod } from '@/constants/wikiCreation';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { callWikiInitialization } from './useCallWikiInitialization';
import type { IErrorInWhichComponent, IWikiWorkspaceForm } from './useForm';
import { workspaceConfigFromForm } from './useForm';
import { updateErrorInWhichComponentSetterByErrorMessage } from './useIndicator';
export function useValidateExistedWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: IWikiWorkspaceForm,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): [boolean, string | undefined, (m: string) => void, (m: boolean) => void] {
const { t } = useTranslation();
const [wikiCreationMessage, wikiCreationMessageSetter] = useState<string | undefined>();
const [hasError, hasErrorSetter] = useState<boolean>(false);
useEffect(() => {
if (!form.wikiFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.ExistedWikiLocation')}`);
errorInWhichComponentSetter({ wikiFolderLocation: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && !form.gitRepoUrl) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.GitRepoUrl')}`);
errorInWhichComponentSetter({ gitRepoUrl: true });
hasErrorSetter(true);
} else if (!isCreateMainWorkspace && !form.mainWikiToLink.wikiFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.MainWorkspace')}`);
errorInWhichComponentSetter({ mainWikiToLink: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && (form.gitUserInfo === undefined || !(form.gitUserInfo.accessToken.length > 0))) {
wikiCreationMessageSetter(t('AddWorkspace.NotLoggedIn'));
errorInWhichComponentSetter({ gitUserInfo: true });
hasErrorSetter(true);
} else {
wikiCreationMessageSetter('');
errorInWhichComponentSetter({});
hasErrorSetter(false);
}
}, [
t,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form.wikiFolderLocation,
form.wikiFolderName,
form.gitRepoUrl,
form.gitUserInfo,
form.mainWikiToLink.wikiFolderLocation,
form.tagName,
errorInWhichComponentSetter,
]);
return [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter];
}
export function useExistedWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: IWikiWorkspaceForm,
wikiCreationMessageSetter: (m: string) => void,
hasErrorSetter: (m: boolean) => void,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): () => Promise<void> {
const { t } = useTranslation();
const onSubmit = useCallback(async () => {
wikiCreationMessageSetter(t('AddWorkspace.Processing'));
const newWorkspaceConfig = workspaceConfigFromForm(form, isCreateMainWorkspace, isCreateSyncedWorkspace);
if (!form.wikiFolderLocation) {
throw new Error(t('AddWorkspace.MainWorkspaceLocation') + t('AddWorkspace.NotFilled'));
}
try {
if (isCreateMainWorkspace) {
await window.service.wiki.ensureWikiExist(form.wikiFolderLocation, true);
} else {
const wikiFolderNameForExistedFolder = await window.service.native.path('basename', form.wikiFolderLocation);
const parentFolderLocationForExistedFolder = await window.service.native.path('dirname', form.wikiFolderLocation);
if (!wikiFolderNameForExistedFolder || !parentFolderLocationForExistedFolder) {
throw new Error(
`Undefined folder name: parentFolderLocationForExistedFolder: ${parentFolderLocationForExistedFolder ?? '-'}, parentFolderLocationForExistedFolder: ${
parentFolderLocationForExistedFolder ?? '-'
}`,
);
}
await window.service.wiki.ensureWikiExist(form.wikiFolderLocation, false);
await window.service.wiki.createSubWiki(
parentFolderLocationForExistedFolder,
wikiFolderNameForExistedFolder,
'subwiki',
form.mainWikiToLink.wikiFolderLocation,
form.tagName,
true,
);
}
await callWikiInitialization(newWorkspaceConfig, wikiCreationMessageSetter, t, form.gitUserInfo, { from: WikiCreationMethod.LoadExisting });
} catch (error) {
wikiCreationMessageSetter((error as Error).message);
updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
hasErrorSetter(true);
}
}, [wikiCreationMessageSetter, t, form, isCreateMainWorkspace, isCreateSyncedWorkspace, errorInWhichComponentSetter, hasErrorSetter]);
return onSubmit;
}

View file

@ -0,0 +1,187 @@
// ...existing code...
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { usePromiseValue } from '@/helpers/useServiceValue';
import { useStorageServiceUserInfoObservable } from '@services/auth/hooks';
import { SupportedStorageServices } from '@services/types';
import type { ISubWikiPluginContent } from '@services/wiki/plugin/subWikiPlugin';
import type { INewWikiWorkspaceConfig, IWikiWorkspace } from '@services/workspaces/interface';
import { isWikiWorkspace } from '@services/workspaces/interface';
import type { INewWikiRequiredFormData } from './useNewWiki';
type IMainWikiInfo = Pick<IWikiWorkspace, 'wikiFolderLocation' | 'port' | 'id'>;
export function useIsCreateSyncedWorkspace(): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
const [isCreateSyncedWorkspace, isCreateSyncedWorkspaceSetter] = useState(false);
useEffect(() => {
void window.service.auth.getRandomStorageServiceUserInfo().then((result) => {
isCreateSyncedWorkspaceSetter(result !== undefined);
});
}, []);
return [isCreateSyncedWorkspace, isCreateSyncedWorkspaceSetter];
}
export function useWikiWorkspaceForm(options?: { fromExisted: boolean }) {
const { t } = useTranslation();
const workspaceList = usePromiseValue(async () => await window.service.workspace.getWorkspacesAsList(), []);
const [wikiPort, wikiPortSetter] = useState(5212);
useEffect(() => {
// only update default port on component mount
void window.service.workspace.countWorkspaces().then((workspaceCount) => {
wikiPortSetter(wikiPort + workspaceCount);
});
}, []);
/**
* Set storage service used by this workspace, for example, Github.
*/
const [storageProvider, storageProviderSetter] = useState<SupportedStorageServices>(SupportedStorageServices.local);
const gitUserInfo = useStorageServiceUserInfoObservable(storageProvider);
/**
* For sub-wiki, we need to link it to a main wiki's folder, so all wiki contents can be loaded together.
*/
const mainWorkspaceList = useMemo(() => workspaceList?.filter((workspace) => isWikiWorkspace(workspace) && !workspace.isSubWiki) ?? [], [workspaceList]);
const [mainWikiToLink, mainWikiToLinkSetter] = useState<IMainWikiInfo>(
() => {
const firstMainWiki = mainWorkspaceList.find(isWikiWorkspace);
return firstMainWiki ? { wikiFolderLocation: firstMainWiki.wikiFolderLocation, port: firstMainWiki.port, id: firstMainWiki.id } : { wikiFolderLocation: '', port: 0, id: '' };
},
);
const [tagName, tagNameSetter] = useState<string>('');
let mainWikiToLinkIndex = mainWorkspaceList.findIndex((workspace) => workspace.id === mainWikiToLink.id);
if (mainWikiToLinkIndex < 0) {
mainWikiToLinkIndex = 0;
}
useEffect(() => {
const selectedWorkspace = mainWorkspaceList[mainWikiToLinkIndex];
if (selectedWorkspace && isWikiWorkspace(selectedWorkspace) && selectedWorkspace.wikiFolderLocation) {
mainWikiToLinkSetter({ wikiFolderLocation: selectedWorkspace.wikiFolderLocation, port: selectedWorkspace.port, id: selectedWorkspace.id });
}
}, [mainWorkspaceList, mainWikiToLinkIndex]);
/**
* For sub-wiki, we need `fileSystemPaths` which is a TiddlyWiki concept that tells wiki where to put sub-wiki files.
*/
const [fileSystemPaths, fileSystemPathsSetter] = useState<ISubWikiPluginContent[]>([]);
useEffect(() => {
void window.service.wiki.getSubWikiPluginContent(mainWikiToLink.wikiFolderLocation).then(fileSystemPathsSetter);
}, [mainWikiToLink]);
/**
* For creating new wiki, we use parentFolderLocation to determine in which folder we create the new wiki folder.
* New folder will basically be created in `${parentFolderLocation}/${wikiFolderName}`
*/
const [parentFolderLocation, parentFolderLocationSetter] = useState<string>('');
/**
* For creating new wiki, we put `tiddlers` folder in this `${parentFolderLocation}/${wikiFolderName}` folder
*/
const [wikiFolderName, wikiFolderNameSetter] = useState('tiddlywiki');
/**
* Initialize a folder path for user
*/
useEffect(() => {
void (async function getDefaultExistedWikiFolderPathEffect() {
const desktopPathAsDefaultExistedWikiFolderPath = await window.service.context.get('DEFAULT_FIRST_WIKI_FOLDER_PATH');
const lastMainWiki = mainWorkspaceList.at(-1);
const defaultWikiFolderName = (lastMainWiki && isWikiWorkspace(lastMainWiki)) ? lastMainWiki.wikiFolderLocation : 'wiki';
wikiFolderNameSetter(defaultWikiFolderName);
parentFolderLocationSetter(desktopPathAsDefaultExistedWikiFolderPath);
})();
// we only do this on component init
}, []);
const [gitRepoUrl, gitRepoUrlSetter] = useState<string>('');
// derived values
/** full path of created wiki folder */
const wikiFolderLocation = usePromiseValue(
async () => await window.service.native.path('join', parentFolderLocation ?? t('Error') ?? 'Error', wikiFolderName),
'Error',
[parentFolderLocation, wikiFolderName],
);
/**
* For importing existed nodejs wiki into TidGi, we parse git url from the folder to import
*/
useEffect(() => {
void (async function getWorkspaceRemoteEffect(): Promise<void> {
if (options?.fromExisted) {
const url = await window.service.git.getWorkspacesRemote(wikiFolderLocation);
if (typeof url === 'string' && url.length > 0) {
gitRepoUrlSetter(url);
}
}
})();
}, [gitRepoUrlSetter, wikiFolderLocation, options?.fromExisted]);
/*
* For wikiHTML
*/
const [wikiHtmlPath, wikiHtmlPathSetter] = useState<string>('');
useEffect(() => {
void (async function getDefaultWikiHtmlPathEffect() {})();
}, []);
return {
storageProvider,
storageProviderSetter,
wikiPort,
wikiPortSetter,
mainWikiToLink,
mainWikiToLinkSetter,
tagName,
tagNameSetter,
fileSystemPaths,
fileSystemPathsSetter,
gitRepoUrl,
gitRepoUrlSetter,
parentFolderLocation,
parentFolderLocationSetter,
wikiFolderName,
wikiFolderNameSetter,
gitUserInfo,
wikiFolderLocation,
workspaceList,
mainWorkspaceList,
mainWikiToLinkIndex,
wikiHtmlPath,
wikiHtmlPathSetter,
};
}
export type IWikiWorkspaceForm = ReturnType<typeof useWikiWorkspaceForm>;
export type IErrorInWhichComponent = Partial<Record<keyof IWikiWorkspaceForm, boolean>>;
export interface IWikiWorkspaceFormProps {
errorInWhichComponent: IErrorInWhichComponent;
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void;
form: IWikiWorkspaceForm;
isCreateMainWorkspace: boolean;
}
/**
* Fill in default value for newly created wiki.
* @param form New wiki form value
*/
export function workspaceConfigFromForm(form: INewWikiRequiredFormData, isCreateMainWorkspace: boolean, isCreateSyncedWorkspace: boolean): INewWikiWorkspaceConfig {
return {
gitUrl: isCreateSyncedWorkspace ? form.gitRepoUrl : null,
isSubWiki: !isCreateMainWorkspace,
mainWikiToLink: isCreateMainWorkspace ? null : form.mainWikiToLink.wikiFolderLocation,
mainWikiID: isCreateMainWorkspace ? null : form.mainWikiToLink.id,
name: form.wikiFolderName,
storageService: form.storageProvider,
tagName: isCreateMainWorkspace ? null : form.tagName,
port: form.wikiPort,
wikiFolderLocation: form.wikiFolderLocation!,
backupOnInterval: true,
readOnlyMode: false,
tokenAuth: false,
// let global config override this
userName: undefined,
excludedPlugins: [],
enableHTTPAPI: false,
lastNodeJSArgv: [],
};
}

View file

@ -0,0 +1,78 @@
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import type { IErrorInWhichComponent, IWikiWorkspaceForm } from './useForm';
import { useNewWiki, useValidateNewWiki } from './useNewWiki';
export function useValidateHtmlWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: IWikiWorkspaceForm,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): [boolean, string | undefined, (m: string) => void, (m: boolean) => void] {
const { t } = useTranslation();
const [wikiCreationMessage, wikiCreationMessageSetter] = useState<string | undefined>();
const [hasError, hasErrorSetter] = useState<boolean>(false);
useValidateNewWiki(isCreateMainWorkspace, isCreateSyncedWorkspace, form, errorInWhichComponentSetter);
useEffect(() => {
if (form.wikiHtmlPath) {
wikiCreationMessageSetter('');
errorInWhichComponentSetter({});
hasErrorSetter(false);
} else {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.LocalWikiHtml')}`);
errorInWhichComponentSetter({ wikiHtmlPath: true });
hasErrorSetter(true);
}
}, [t, form.wikiHtmlPath, form.parentFolderLocation, form.wikiFolderName, errorInWhichComponentSetter]);
return [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter];
}
export function useImportHtmlWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: IWikiWorkspaceForm,
wikiCreationMessageSetter: (m: string) => void,
hasErrorSetter: (m: boolean) => void,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): () => Promise<void> {
const { t } = useTranslation();
const createNewWikiSubmit = useNewWiki(
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form,
wikiCreationMessageSetter,
hasErrorSetter,
errorInWhichComponentSetter,
{ noCopyTemplate: true },
);
const onSubmit = useCallback(async () => {
const { wikiFolderLocation, wikiHtmlPath } = form;
if (wikiFolderLocation === undefined) {
hasErrorSetter(true);
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.WorkspaceFolder')}`);
errorInWhichComponentSetter({ parentFolderLocation: true });
return;
}
wikiCreationMessageSetter(t('AddWorkspace.Processing'));
try {
const extractErrorMessage = await window.service.wiki.extractWikiHTML(wikiHtmlPath, wikiFolderLocation);
if (typeof extractErrorMessage === 'string') {
hasErrorSetter(true);
wikiCreationMessageSetter(t('AddWorkspace.BadWikiHtml') + extractErrorMessage);
errorInWhichComponentSetter({ wikiHtmlPath: true });
return;
}
} catch (error) {
wikiCreationMessageSetter(`${t('AddWorkspace.BadWikiHtml')}${(error as Error).message}`);
errorInWhichComponentSetter({ wikiHtmlPath: true });
hasErrorSetter(true);
return;
}
await createNewWikiSubmit();
}, [form, wikiCreationMessageSetter, t, createNewWikiSubmit, hasErrorSetter, errorInWhichComponentSetter]);
return onSubmit;
}

View file

@ -0,0 +1,56 @@
import type { TFunction } from 'i18next';
import { useEffect, useState } from 'react';
import type { IErrorInWhichComponent } from './useForm';
export function useWikiCreationProgress(
wikiCreationMessageSetter: (message: string) => void,
wikiCreationMessage?: string,
hasError?: boolean,
): [boolean, React.Dispatch<React.SetStateAction<boolean>>, boolean] {
const [logPanelOpened, logPanelSetter] = useState<boolean>(false);
const [inProgressOrError, inProgressOrErrorSetter] = useState<boolean>(false);
useEffect(() => {
const creationInProgress = wikiCreationMessage !== undefined && wikiCreationMessage.length > 0 && hasError !== true;
if (creationInProgress) {
logPanelSetter(true);
inProgressOrErrorSetter(true);
}
if (hasError === true) {
logPanelSetter(false);
inProgressOrErrorSetter(false);
} else if (!creationInProgress) {
logPanelSetter(false);
inProgressOrErrorSetter(false);
}
}, [wikiCreationMessage, hasError]);
// register to WikiChannel.createProgress on component mount
useEffect(() => {
const unregister = window.log.registerWikiCreationMessage((message: string) => {
wikiCreationMessageSetter(message);
});
return unregister;
}, [wikiCreationMessageSetter]);
return [logPanelOpened, logPanelSetter, inProgressOrError];
}
export function updateErrorInWhichComponentSetterByErrorMessage(
t: TFunction,
message: string,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): void {
if (message.includes(t('AddWorkspace.PathNotExist').replace(/".*"/, ''))) {
errorInWhichComponentSetter({ parentFolderLocation: true, wikiFolderLocation: true });
}
if (message.includes(t('AddWorkspace.CantCreateFolderHere').replace(/".*"/, ''))) {
errorInWhichComponentSetter({ parentFolderLocation: true });
}
if (message.includes(t('AddWorkspace.WikiExisted').replace(/".*"/, ''))) {
errorInWhichComponentSetter({ wikiFolderName: true });
}
if (message.includes(t('AddWorkspace.ThisPathIsNotAWikiFolder').replace(/".*"/, ''))) {
errorInWhichComponentSetter({ wikiFolderName: true, wikiFolderLocation: true });
}
if (message.includes('The unpackwiki command requires that the output wiki folder be empty')) {
errorInWhichComponentSetter({ wikiFolderName: true, wikiFolderLocation: true });
}
}

View file

@ -0,0 +1,96 @@
import { WikiCreationMethod } from '@/constants/wikiCreation';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ConditionalExcept } from 'type-fest';
import { callWikiInitialization } from './useCallWikiInitialization';
import type { IErrorInWhichComponent, IWikiWorkspaceForm } from './useForm';
import { workspaceConfigFromForm } from './useForm';
import { updateErrorInWhichComponentSetterByErrorMessage } from './useIndicator';
export function useValidateNewWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: IWikiWorkspaceForm,
errorInWhichComponentSetter: (errors: IErrorInWhichComponent) => void,
): [boolean, string | undefined, (m: string) => void, (m: boolean) => void] {
const { t } = useTranslation();
const [wikiCreationMessage, wikiCreationMessageSetter] = useState<string | undefined>();
const [hasError, hasErrorSetter] = useState<boolean>(false);
useEffect(() => {
if (!form.parentFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.WorkspaceFolder')}`);
errorInWhichComponentSetter({ parentFolderLocation: true });
hasErrorSetter(true);
} else if (!form.wikiFolderName) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.WorkspaceFolderNameToCreate')}`);
errorInWhichComponentSetter({ wikiFolderName: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && !form.gitRepoUrl) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.GitRepoUrl')}`);
errorInWhichComponentSetter({ gitRepoUrl: true });
hasErrorSetter(true);
} else if (!isCreateMainWorkspace && !form.mainWikiToLink.wikiFolderLocation) {
wikiCreationMessageSetter(`${t('AddWorkspace.NotFilled')}${t('AddWorkspace.MainWorkspace')}`);
errorInWhichComponentSetter({ mainWikiToLink: true });
hasErrorSetter(true);
} else if (isCreateSyncedWorkspace && (form.gitUserInfo === undefined || !(form.gitUserInfo.accessToken.length > 0))) {
wikiCreationMessageSetter(t('AddWorkspace.NotLoggedIn'));
errorInWhichComponentSetter({ gitUserInfo: true });
hasErrorSetter(true);
} else {
wikiCreationMessageSetter('');
errorInWhichComponentSetter({});
hasErrorSetter(false);
}
}, [
t,
isCreateMainWorkspace,
isCreateSyncedWorkspace,
form.parentFolderLocation,
form.wikiFolderName,
form.gitRepoUrl,
form.gitUserInfo,
form.mainWikiToLink.wikiFolderLocation,
form.tagName,
errorInWhichComponentSetter,
]);
return [hasError, wikiCreationMessage, wikiCreationMessageSetter, hasErrorSetter];
}
export type INewWikiRequiredFormData = ConditionalExcept<IWikiWorkspaceForm, (...arguments_: unknown[]) => unknown>;
export function useNewWiki(
isCreateMainWorkspace: boolean,
isCreateSyncedWorkspace: boolean,
form: INewWikiRequiredFormData,
wikiCreationMessageSetter: (m: string) => void,
hasErrorSetter?: (m: boolean) => void,
errorInWhichComponentSetter?: (errors: IErrorInWhichComponent) => void,
options?: { noCopyTemplate?: boolean; notClose?: boolean },
): () => Promise<void> {
const { t } = useTranslation();
const onSubmit = useCallback(async () => {
wikiCreationMessageSetter(t('AddWorkspace.Processing'));
hasErrorSetter?.(false);
try {
const newWorkspaceConfig = workspaceConfigFromForm(form, isCreateMainWorkspace, isCreateSyncedWorkspace);
if (isCreateMainWorkspace) {
if (options?.noCopyTemplate !== true) {
await window.service.wiki.copyWikiTemplate(form.parentFolderLocation, form.wikiFolderName);
}
} else {
await window.service.wiki.createSubWiki(form.parentFolderLocation, form.wikiFolderName, 'subwiki', form.mainWikiToLink.wikiFolderLocation, form.tagName);
}
await callWikiInitialization(newWorkspaceConfig, wikiCreationMessageSetter, t, form.gitUserInfo, { notClose: options?.notClose, from: WikiCreationMethod.Create });
} catch (error) {
wikiCreationMessageSetter((error as Error).message);
if (errorInWhichComponentSetter) {
updateErrorInWhichComponentSetterByErrorMessage(t, (error as Error).message, errorInWhichComponentSetter);
}
hasErrorSetter?.(true);
}
}, [wikiCreationMessageSetter, t, hasErrorSetter, form, isCreateMainWorkspace, isCreateSyncedWorkspace, options, errorInWhichComponentSetter]);
return onSubmit;
}