move settings into a new SettingsSection card

This commit is contained in:
Pallavi Kumari
2025-11-05 23:06:02 +05:30
committed by Owen Schwartz
parent 8618a5c2fd
commit 150c51c9eb
2 changed files with 189 additions and 165 deletions

View File

@@ -2370,6 +2370,7 @@
"maintenanceModeDescription": "Display a maintenance page to visitors", "maintenanceModeDescription": "Display a maintenance page to visitors",
"maintenanceModeType": "Maintenance Mode Type", "maintenanceModeType": "Maintenance Mode Type",
"showMaintenancePage": "Show a maintenance page to visitors", "showMaintenancePage": "Show a maintenance page to visitors",
"enableMaintenanceMode": "Enable Maintenance Mode",
"automatic": "Automatic", "automatic": "Automatic",
"automaticModeDescription": " Show maintenance page only when all backend targets are down or unhealthy. Your resource continues working normally as long as at least one target is healthy.", "automaticModeDescription": " Show maintenance page only when all backend targets are down or unhealthy. Your resource continues working normally as long as at least one target is healthy.",
"forced": "Forced", "forced": "Forced",

View File

@@ -60,7 +60,6 @@ import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext"; import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
import { useUserContext } from "@app/hooks/useUserContext"; import { useUserContext } from "@app/hooks/useUserContext";
import { Alert, AlertDescription } from "@app/components/ui/alert"; import { Alert, AlertDescription } from "@app/components/ui/alert";
import { Separator } from "@app/components/ui/separator";
import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
export default function GeneralForm() { export default function GeneralForm() {
@@ -470,19 +469,45 @@ export default function GeneralForm() {
</Button> </Button>
</div> </div>
</div> </div>
</>
)}
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<Separator className="my-6" /> <SettingsSectionFooter>
<Button
type="submit"
onClick={() => {
console.log(form.getValues());
}}
loading={saveLoading}
disabled={saveLoading}
form="general-settings-form"
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
<div className="space-y-4"> {build !== "oss" && resource.http && (
<div> <SettingsContainer>
<h3 className="text-lg font-medium"> <SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("maintenanceMode")} {t("maintenanceMode")}
</h3> </SettingsSectionTitle>
<p className="text-sm text-muted-foreground"> <SettingsSectionDescription>
{t("maintenanceModeDescription")} {t("maintenanceModeDescription")}
</p> </SettingsSectionDescription>
</div> </SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<Form {...form}>
<form className="space-y-4">
<FormField <FormField
control={form.control} control={form.control}
name="maintenanceModeEnabled" name="maintenanceModeEnabled"
@@ -493,7 +518,7 @@ export default function GeneralForm() {
<SwitchInput <SwitchInput
id="enable-maintenance" id="enable-maintenance"
checked={field.value} checked={field.value}
label="Enable Maintenance Mode" label={t("enableMaintenanceMode")}
onCheckedChange={(val) => onCheckedChange={(val) =>
form.setValue( form.setValue(
"maintenanceModeEnabled", "maintenanceModeEnabled",
@@ -512,7 +537,7 @@ export default function GeneralForm() {
/> />
{isMaintenanceEnabled && ( {isMaintenanceEnabled && (
<div className="space-y-4 pl-4 border-l-2 border-primary/20"> <div className="space-y-4">
<FormField <FormField
control={form.control} control={form.control}
name="maintenanceModeType" name="maintenanceModeType"
@@ -564,7 +589,7 @@ export default function GeneralForm() {
<Alert> <Alert>
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
<AlertDescription> <AlertDescription>
<strong>{t("warning:")}</strong> {t("forcedModeWarning")} <strong>{t("warning:")}</strong> {t("forcedeModeWarning")}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
)} )}
@@ -633,9 +658,6 @@ export default function GeneralForm() {
/> />
</div> </div>
)} )}
</div>
</>
)}
</form> </form>
</Form> </Form>
</SettingsSectionForm> </SettingsSectionForm>
@@ -656,6 +678,7 @@ export default function GeneralForm() {
</SettingsSectionFooter> </SettingsSectionFooter>
</SettingsSection> </SettingsSection>
</SettingsContainer> </SettingsContainer>
)}
<Credenza <Credenza
open={editDomainOpen} open={editDomainOpen}