95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { Stack } from "@mantine/core";
|
|
import SuperJSON from "superjson";
|
|
|
|
import { revalidatePathActionAsync } from "@homarr/common/client";
|
|
import { useModalAction } from "@homarr/modals";
|
|
|
|
// We don't have access to the API client here, so we need to import it from the API package
|
|
// In the future we should consider having the used router also in this package
|
|
import { clientApi } from "../../../api/src/client";
|
|
import type { AnalyseResult } from "../analyse/analyse-oldmarr-import";
|
|
import { prepareMultipleImports } from "../prepare/prepare-multiple";
|
|
import type { InitialOldmarrImportSettings } from "../settings";
|
|
import { defaultSidebarBehaviour } from "../settings";
|
|
import { BoardSelectionCard } from "./initial/board-selection-card";
|
|
import { ImportSettingsCard } from "./initial/import-settings-card";
|
|
import { ImportSummaryCard } from "./initial/import-summary-card";
|
|
import { ImportTokenModal } from "./initial/token-modal";
|
|
|
|
interface InitialOldmarrImportProps {
|
|
file: File;
|
|
analyseResult: AnalyseResult;
|
|
}
|
|
|
|
export const InitialOldmarrImport = ({ file, analyseResult }: InitialOldmarrImportProps) => {
|
|
const [boardSelections, setBoardSelections] = useState<Map<string, boolean>>(
|
|
new Map(analyseResult.configs.filter(({ config }) => config !== null).map(({ name }) => [name, true])),
|
|
);
|
|
const [settings, setSettings] = useState<InitialOldmarrImportSettings>({
|
|
onlyImportApps: false,
|
|
sidebarBehaviour: defaultSidebarBehaviour,
|
|
});
|
|
|
|
const { preparedApps, preparedBoards, preparedIntegrations } = useMemo(
|
|
() => prepareMultipleImports(analyseResult.configs, settings, boardSelections),
|
|
[analyseResult, boardSelections, settings],
|
|
);
|
|
|
|
const { mutateAsync, isPending } = clientApi.import.importInitialOldmarrImport.useMutation({
|
|
async onSuccess() {
|
|
await revalidatePathActionAsync("/init");
|
|
},
|
|
});
|
|
const { openModal } = useModalAction(ImportTokenModal);
|
|
|
|
const createFormData = (token: string | null) => {
|
|
const formData = new FormData();
|
|
formData.set("file", file);
|
|
formData.set("settings", JSON.stringify(settings));
|
|
// Map can not be send over the wire without superjson
|
|
formData.set("boardSelections", SuperJSON.stringify(boardSelections));
|
|
if (token) {
|
|
formData.set("token", token);
|
|
}
|
|
return formData;
|
|
};
|
|
|
|
const handleSubmitAsync = async () => {
|
|
if (analyseResult.checksum) {
|
|
openModal({
|
|
checksum: analyseResult.checksum,
|
|
onSuccessAsync: async (token) => {
|
|
await mutateAsync(createFormData(token));
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
await mutateAsync(createFormData(null));
|
|
};
|
|
|
|
return (
|
|
<Stack mb="sm">
|
|
<ImportSettingsCard
|
|
settings={settings}
|
|
updateSetting={(setting, value) => {
|
|
setSettings((settings) => ({ ...settings, [setting]: value }));
|
|
}}
|
|
/>
|
|
{settings.onlyImportApps ? null : (
|
|
<BoardSelectionCard selections={boardSelections} updateSelections={setBoardSelections} />
|
|
)}
|
|
<ImportSummaryCard
|
|
counts={{
|
|
apps: preparedApps.length,
|
|
boards: preparedBoards.length,
|
|
integrations: preparedIntegrations.length,
|
|
credentialUsers: analyseResult.userCount,
|
|
}}
|
|
onSubmit={handleSubmitAsync}
|
|
loading={isPending}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|