chore(options/advanced): use options row for database anonymization

This commit is contained in:
Elian Doran
2026-04-13 15:11:10 +03:00
parent 3dc0d25c4d
commit 7455d235d1
2 changed files with 38 additions and 51 deletions

View File

@@ -1129,11 +1129,12 @@
},
"database_anonymization": {
"title": "Database Anonymization",
"full_anonymization": "Full Anonymization",
"full_anonymization_description": "This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata) for sharing online for debugging purposes without fear of leaking your personal data.",
"description": "Create an anonymized copy of your database for sharing with developers when debugging issues, without exposing personal data.",
"full_anonymization": "Full anonymization",
"full_anonymization_description": "Creates a copy of the database with all note content removed, leaving only structure and non-sensitive metadata. Safe for sharing online when debugging issues.",
"save_fully_anonymized_database": "Save fully anonymized database",
"light_anonymization": "Light Anonymization",
"light_anonymization_description": "This action will create a new copy of the database and do a light anonymization on it — specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.",
"light_anonymization": "Light anonymization",
"light_anonymization_description": "Creates a copy with note content removed, but titles, attributes, and custom scripts/widgets remain. Provides more context for debugging.",
"choose_anonymization": "You can decide yourself if you want to provide a fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.",
"save_lightly_anonymized_database": "Save lightly anonymized database",
"existing_anonymized_databases": "Existing anonymized databases",

View File

@@ -1,12 +1,10 @@
import { AnonymizedDbResponse, DatabaseAnonymizeResponse, DatabaseCheckIntegrityResponse } from "@triliumnext/commons";
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import { experimentalFeatures, type ExperimentalFeatureId } from "../../../services/experimental_features";
import { type ExperimentalFeatureId,experimentalFeatures } from "../../../services/experimental_features";
import { t } from "../../../services/i18n";
import server from "../../../services/server";
import toast from "../../../services/toast";
import Button from "../../react/Button";
import Column from "../../react/Column";
import FormText from "../../react/FormText";
import { useTriliumOptionJson } from "../../react/hooks";
import { OptionsRowWithButton, OptionsRowWithToggle } from "./components/OptionsRow";
@@ -89,7 +87,7 @@ function DatabaseOptions() {
}
function DatabaseAnonymizationOptions() {
const [ existingAnonymizedDatabases, setExistingAnonymizedDatabases ] = useState<AnonymizedDbResponse[]>([]);
const [existingAnonymizedDatabases, setExistingAnonymizedDatabases] = useState<AnonymizedDbResponse[]>([]);
function refreshAnonymizedDatabase() {
server.get<AnonymizedDbResponse[]>("database/anonymized-databases").then(setExistingAnonymizedDatabases);
@@ -99,59 +97,47 @@ function DatabaseAnonymizationOptions() {
return (
<OptionsSection title={t("database_anonymization.title")}>
<FormText>{t("database_anonymization.choose_anonymization")}</FormText>
<FormText>{t("database_anonymization.description")}</FormText>
<div className="row">
<DatabaseAnonymizationOption
title={t("database_anonymization.full_anonymization")}
description={t("database_anonymization.full_anonymization_description")}
buttonText={t("database_anonymization.save_fully_anonymized_database")}
buttonClick={async () => {
toast.showMessage(t("database_anonymization.creating_fully_anonymized_database"));
const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/full");
<OptionsRowWithButton
label={t("database_anonymization.full_anonymization")}
description={t("database_anonymization.full_anonymization_description")}
onClick={async () => {
toast.showMessage(t("database_anonymization.creating_fully_anonymized_database"));
const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/full");
if (!resp.success) {
toast.showError(t("database_anonymization.error_creating_anonymized_database"));
} else {
toast.showMessage(t("database_anonymization.successfully_created_fully_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
refreshAnonymizedDatabase();
}
}}
/>
<DatabaseAnonymizationOption
title={t("database_anonymization.light_anonymization")}
description={t("database_anonymization.light_anonymization_description")}
buttonText={t("database_anonymization.save_lightly_anonymized_database")}
buttonClick={async () => {
toast.showMessage(t("database_anonymization.creating_lightly_anonymized_database"));
const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/light");
if (!resp.success) {
toast.showError(t("database_anonymization.error_creating_anonymized_database"));
} else {
toast.showMessage(t("database_anonymization.successfully_created_fully_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
refreshAnonymizedDatabase();
}
}}
/>
if (!resp.success) {
toast.showError(t("database_anonymization.error_creating_anonymized_database"));
} else {
toast.showMessage(t("database_anonymization.successfully_created_lightly_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
refreshAnonymizedDatabase();
}
}}
/>
</div>
<OptionsRowWithButton
label={t("database_anonymization.light_anonymization")}
description={t("database_anonymization.light_anonymization_description")}
onClick={async () => {
toast.showMessage(t("database_anonymization.creating_lightly_anonymized_database"));
const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/light");
if (!resp.success) {
toast.showError(t("database_anonymization.error_creating_anonymized_database"));
} else {
toast.showMessage(t("database_anonymization.successfully_created_lightly_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
refreshAnonymizedDatabase();
}
}}
/>
<hr />
<ExistingAnonymizedDatabases databases={existingAnonymizedDatabases} />
</OptionsSection>
);
}
function DatabaseAnonymizationOption({ title, description, buttonText, buttonClick }: { title: string, description: string, buttonText: string, buttonClick: () => void }) {
return (
<Column md={6} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", marginTop: "1em" }}>
<h5>{title}</h5>
<FormText>{description}</FormText>
<Button text={buttonText} onClick={buttonClick} />
</Column>
);
}
function ExistingAnonymizedDatabases({ databases }: { databases: AnonymizedDbResponse[] }) {
if (!databases.length) {
return <FormText>{t("database_anonymization.no_anonymized_database_yet")}</FormText>;