refactor(react/settings): use FormGroup for time selector

Author: eliandoran

apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx

@@ -10,8 +10,8 @@ import toast from "../../../../services/toast";
 type TimeSelectorScale = "seconds" | "minutes" | "hours" | "days";
 
 interface TimeSelectorProps {
+    id?: string;
     name: string;
-    label: string;
     optionValueId: keyof OptionDefinitions;
     optionTimeScaleId: keyof OptionDefinitions;
     includedTimeScales?: Set<TimeSelectorScale>;
@@ -23,7 +23,7 @@ interface TimeScaleInfo {
     unit: string;
 }
 
-export default function TimeSelector({ name, label, includedTimeScales, optionValueId, optionTimeScaleId, minimumSeconds }: TimeSelectorProps) {
+export default function TimeSelector({ id, name, includedTimeScales, optionValueId, optionTimeScaleId, minimumSeconds }: TimeSelectorProps) {
     const values = useMemo(() => {
         const values: TimeScaleInfo[] = [];
         const timeScalesWithDefault = includedTimeScales ?? new Set(["seconds", "minutes", "hours", "days"]);
@@ -48,38 +48,37 @@ export default function TimeSelector({ name, label, includedTimeScales, optionVa
     }, [ value, scale ]);
 
     return (
-        <FormGroup label={label}>
-            <div class="d-flex gap-2">
-                <FormTextBox
-                    name={name}
-                    type="number" min={0} step={1} required
-                    currentValue={displayedTime} onChange={(value, validity) => {
-                        if (!validity.valid) {
-                            toast.showError(t("time_selector.invalid_input"));
-                            return false;
-                        }
+        <div class="d-flex gap-2">
+            <FormTextBox
+                id={id}
+                name={name}
+                type="number" min={0} step={1} required
+                currentValue={displayedTime} onChange={(value, validity) => {
+                    if (!validity.valid) {
+                        toast.showError(t("time_selector.invalid_input"));
+                        return false;
+                    }
 
-                        let time = parseInt(value, 10);
-                        const minimumSecondsOrDefault = (minimumSeconds ?? 0);
-                        const newTime = convertTime(time, scale).toOption();
+                    let time = parseInt(value, 10);
+                    const minimumSecondsOrDefault = (minimumSeconds ?? 0);
+                    const newTime = convertTime(time, scale).toOption();
 
-                        if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) {
-                            toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault }));
-                            time = minimumSecondsOrDefault;
-                        }
+                    if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) {
+                        toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault }));
+                        time = minimumSecondsOrDefault;
+                    }
 
-                        setValue(newTime);
-                    }}
-                />
+                    setValue(newTime);
+                }}
+            />
 
-                <FormSelect
-                    values={values}
-                    keyProperty="value" titleProperty="unit"
-                    style={{ width: "auto" }}
-                    currentValue={scale} onChange={setScale}
-                />
-            </div>
-        </FormGroup>
+            <FormSelect
+                values={values}
+                keyProperty="value" titleProperty="unit"
+                style={{ width: "auto" }}
+                currentValue={scale} onChange={setScale}
+            />
+        </div>
     )
 }
 

apps/client/src/widgets/type_widgets/options/other.tsx

@@ -104,11 +104,12 @@ function NoteErasureTimeout() {
     return (
         <OptionsSection title={t("note_erasure_timeout.note_erasure_timeout_title")}>
             <FormText>{t("note_erasure_timeout.note_erasure_description")}</FormText>
-            <TimeSelector
-                name="erase-entities-after"
-                label={t("note_erasure_timeout.erase_notes_after")}
-                optionValueId="eraseEntitiesAfterTimeInSeconds" optionTimeScaleId="eraseEntitiesAfterTimeScale"
-            />
+            <FormGroup label={t("note_erasure_timeout.erase_notes_after")}>
+                <TimeSelector
+                    name="erase-entities-after"                    
+                    optionValueId="eraseEntitiesAfterTimeInSeconds" optionTimeScaleId="eraseEntitiesAfterTimeScale"
+                />
+            </FormGroup>
             <FormText>{t("note_erasure_timeout.manual_erasing_description")}</FormText>
 
             <Button
@@ -127,11 +128,12 @@ function AttachmentErasureTimeout() {
     return (
         <OptionsSection title={t("attachment_erasure_timeout.attachment_erasure_timeout")}>
             <FormText>{t("attachment_erasure_timeout.attachment_auto_deletion_description")}</FormText>
-            <TimeSelector
-                name="erase-unused-attachments-after"
-                label={t("attachment_erasure_timeout.erase_attachments_after")}
-                optionValueId="eraseUnusedAttachmentsAfterSeconds" optionTimeScaleId="eraseUnusedAttachmentsAfterTimeScale"
-            />
+            <FormGroup label={t("attachment_erasure_timeout.erase_attachments_after")}>
+                <TimeSelector
+                    name="erase-unused-attachments-after"                
+                    optionValueId="eraseUnusedAttachmentsAfterSeconds" optionTimeScaleId="eraseUnusedAttachmentsAfterTimeScale"
+                />
+            </FormGroup>
             <FormText>{t("attachment_erasure_timeout.manual_erasing_description")}</FormText>
 
             <Button
@@ -155,12 +157,13 @@ function RevisionSnapshotInterval() {
                     components={{ doc: <a href="https://triliumnext.github.io/Docs/Wiki/note-revisions.html" class="external" />}}
                 />
             </FormText>
-            <TimeSelector
-                name="revision-snapshot-time-interval"
-                label={t("revisions_snapshot_interval.snapshot_time_interval_label")}
-                optionValueId="revisionSnapshotTimeInterval" optionTimeScaleId="revisionSnapshotTimeIntervalTimeScale"
-                minimumSeconds={10}
-            />
+            <FormGroup label={t("revisions_snapshot_interval.snapshot_time_interval_label")}>
+                <TimeSelector
+                    name="revision-snapshot-time-interval"
+                    optionValueId="revisionSnapshotTimeInterval" optionTimeScaleId="revisionSnapshotTimeIntervalTimeScale"
+                    minimumSeconds={10}
+                />
+            </FormGroup>
         </OptionsSection>
     )
 }

apps/client/src/widgets/type_widgets/options/password.tsx

@@ -114,12 +114,13 @@ function ProtectedSessionTimeout() {
                 <a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" className="external">{t("password.wiki")}</a> {t("password.for_more_info")}
             </FormText>
 
-            <TimeSelector
-                name="protected-session-timeout"
-                label={t("password.protected_session_timeout_label")}
-                optionValueId="protectedSessionTimeout" optionTimeScaleId="protectedSessionTimeoutTimeScale"
-                minimumSeconds={60}
-            />
+            <FormGroup label={t("password.protected_session_timeout_label")}>
+                <TimeSelector
+                    name="protected-session-timeout"                
+                    optionValueId="protectedSessionTimeout" optionTimeScaleId="protectedSessionTimeoutTimeScale"
+                    minimumSeconds={60}
+                />
+            </FormGroup>
         </OptionsSection>
     )
 }