issue 2818 (#2857)

public/resources/en/partial-export.json

@@ -1,9 +0,0 @@
-{
-  "partialExportHeaderText": "Partial export allows you to export realm configuration, and other associated resources into a json file.",
-  "includeGroupsAndRoles": "Include groups and roles",
-  "includeClients": "Include clients",
-  "exportWarningTitle": "Export with caution",
-  "exportWarningDescription": "If there is a great number of groups, roles or clients in your realm, the operation may make server unresponsive for a while.",
-  "exportSuccess": "Realm successfully exported.",
-  "exportFail": "Could not export realm: '{{error}}'"
-}

public/resources/en/partial-import.json

@@ -1,24 +0,0 @@
-{
-  "partialImportHeaderText": "Partial import allows you to import users, clients, and other resources from a previously exported json file.",
-  "selectRealm": "Select realm",
-  "chooseResources": "Choose the resources you want to import",
-  "selectIfResourceExists": "If a resource already exists, specify what should be done",
-  "import": "Import",
-  "resourcesToImport": "Resources to import",
-  "importFail": "Import failed: {{error}}",
-  "FAIL": "Fail import",
-  "SKIP": "Skip",
-  "OVERWRITE": "Overwrite",
-  "added": "Added",
-  "skipped": "Skipped",
-  "overwritten": "Overwritten",
-  "importAdded_zero": "No records added.",
-  "importAdded_one": "One record added.",
-  "importAdded_other": "{{count}} records added.",
-  "importOverwritten_zero": "No records overwritten.",
-  "importOverwritten_one": "One record overwritten.",
-  "importOverwritten_other": "{{count}} records overwritten.",
-  "importSkipped_zero": "No records skipped.",
-  "importSkipped_one": "One record skipped.",
-  "importSkipped_other": "{{count}} records skipped."
-}

public/resources/en/realm-settings.json

@@ -98,6 +98,7 @@
   "noKeys": "No keys",
   "noKeysDescription": "You haven't created any active keys",
   "certificate": "Certificate",
+  "userRegistration": "User registration",
   "loginScreenCustomization": "Login screen customization",
   "registrationAllowed": "User registration",
   "userRegistrationHelpText": "Enable/disable the registration page. A link for registration will show on login page too.",
@@ -815,5 +816,35 @@
   "maxFailureWaitSeconds": "Max wait",
   "maxDeltaTimeSeconds": "Failure reset time",
   "quickLoginCheckMilliSeconds": "Quick login check milliseconds",
-  "minimumQuickLoginWaitSeconds": "Minimum quick login wait"
+  "minimumQuickLoginWaitSeconds": "Minimum quick login wait",
+  "partialExportHeaderText": "Partial export allows you to export realm configuration, and other associated resources into a json file.",
+  "includeGroupsAndRoles": "Include groups and roles",
+  "includeClients": "Include clients",
+  "exportWarningTitle": "Export with caution",
+  "exportWarningDescription": "If there is a great number of groups, roles or clients in your realm, the operation may make server unresponsive for a while.",
+  "exportSuccess": "Realm successfully exported.",
+  "exportFail": "Could not export realm: '{{error}}'",
+  "partialImportHeaderText": "Partial import allows you to import users, clients, and other resources from a previously exported json file.",
+  "selectRealm": "Select realm",
+  "chooseResources": "Choose the resources you want to import",
+  "selectIfResourceExists": "If a resource already exists, specify what should be done",
+  "import": "Import",
+  "resourcesToImport": "Resources to import",
+  "importFail": "Import failed: {{error}}",
+  "FAIL": "Fail import",
+  "SKIP": "Skip",
+  "OVERWRITE": "Overwrite",
+  "added": "Added",
+  "skipped": "Skipped",
+  "overwritten": "Overwritten",
+  "importAdded_zero": "No records added.",
+  "importAdded_one": "One record added.",
+  "importAdded_other": "{{count}} records added.",
+  "importOverwritten_zero": "No records overwritten.",
+  "importOverwritten_one": "One record overwritten.",
+  "importOverwritten_other": "{{count}} records overwritten.",
+  "importSkipped_zero": "No records skipped.",
+  "importSkipped_one": "One record skipped.",
+  "importSkipped_other": "{{count}} records skipped."
+
 }

src/realm-settings/PartialExport.tsx

@@ -3,11 +3,11 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  Checkbox,
+  Form,
+  FormGroup,
   Modal,
   ModalVariant,
-  Stack,
+  Switch,
-  StackItem,
   Text,
   TextContent,
 } from "@patternfly/react-core";
@@ -19,6 +19,8 @@ import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { prettyPrintJSON } from "../util";
 
+import "./partial-export.css";
+
 export type PartialExportDialogProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -28,7 +30,7 @@ export const PartialExportDialog = ({
   isOpen,
   onClose,
 }: PartialExportDialogProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("realm-settings");
   const { realm } = useRealm();
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -56,10 +58,10 @@ export const PartialExportDialog = ({
         "realm-export.json"
       );
 
-      addAlert(t("partial-export:exportSuccess"), AlertVariant.success);
+      addAlert(t("exportSuccess"), AlertVariant.success);
       onClose();
     } catch (error) {
-      addError("partial-export:exportFail", error);
+      addError("exportFail", error);
     }
 
     setIsExporting(false);
@@ -68,7 +70,7 @@ export const PartialExportDialog = ({
   return (
     <Modal
       variant={ModalVariant.small}
-      title={t("realm-settings:partialExport")}
+      title={t("partialExport")}
       isOpen={isOpen}
       onClose={onClose}
       actions={[
@@ -90,41 +92,53 @@ export const PartialExportDialog = ({
         </Button>,
       ]}
     >
-      <Stack hasGutter>
-        <StackItem>
       <TextContent>
-            <Text>{t("partial-export:partialExportHeaderText")}</Text>
+        <Text>{t("partialExportHeaderText")}</Text>
       </TextContent>
-        </StackItem>
+      <Form
-        <StackItem>
+        isHorizontal
-          <Checkbox
+        className="keycloak__realm-settings__partial-import_form"
+      >
+        <FormGroup
+          label={t("includeGroupsAndRoles")}
+          fieldId="include-groups-and-roles-check"
+          hasNoPaddingTop
+        >
+          <Switch
             id="include-groups-and-roles-check"
-            label={t("partial-export:includeGroupsAndRoles")}
+            data-testid="include-groups-and-roles-check"
             isChecked={exportGroupsAndRoles}
             onChange={setExportGroupsAndRoles}
+            label={t("common:on")}
+            labelOff={t("common:off")}
           />
-        </StackItem>
+        </FormGroup>
-        <StackItem>
+        <FormGroup
-          <Checkbox
+          label={t("includeClients")}
+          fieldId="include-clients-check"
+          hasNoPaddingTop
+        >
+          <Switch
             id="include-clients-check"
-            label={t("partial-export:includeClients")}
+            data-testid="include-clients-check"
-            isChecked={exportClients}
             onChange={setExportClients}
+            isChecked={exportClients}
+            label={t("common:on")}
+            labelOff={t("common:off")}
           />
-        </StackItem>
+        </FormGroup>
+      </Form>
+
       {showWarning && (
-          <StackItem>
         <Alert
           data-testid="warning-message"
           variant="warning"
-              title={t("partial-export:exportWarningTitle")}
+          title={t("exportWarningTitle")}
           isInline
         >
-              {t("partial-export:exportWarningDescription")}
+          {t("exportWarningDescription")}
         </Alert>
-          </StackItem>
       )}
-      </Stack>
     </Modal>
   );
 };

src/realm-settings/PartialImport.tsx

@@ -65,8 +65,7 @@ const INITIAL_RESOURCES: Readonly<ResourceChecked> = {
 };
 
 export const PartialImportDialog = (props: PartialImportProps) => {
-  const tRealm = useTranslation("realm-settings").t;
+  const { t } = useTranslation("realm-settings");
-  const { t } = useTranslation("partial-import");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
 
@@ -273,7 +272,7 @@ export const PartialImportDialog = (props: PartialImportProps) => {
       });
       setImportResponse(importResults);
     } catch (error) {
-      addError("partial-import:importFail", error);
+      addError("realm-settings:importFail", error);
     }
 
     setImportInProgress(false);
@@ -283,7 +282,7 @@ export const PartialImportDialog = (props: PartialImportProps) => {
     return (
       <Modal
         variant={ModalVariant.medium}
-        title={tRealm("partialImport")}
+        title={t("partialImport")}
         isOpen={props.open}
         onClose={props.toggleDialog}
         actions={[
@@ -447,7 +446,7 @@ export const PartialImportDialog = (props: PartialImportProps) => {
     return (
       <Modal
         variant={ModalVariant.medium}
-        title={tRealm("partialImport")}
+        title={t("partialImport")}
         isOpen={props.open}
         onClose={props.toggleDialog}
         actions={[

src/realm-settings/partial-export.css

@@ -0,0 +1,4 @@
+
+.keycloak__realm-settings__partial-import_form {
+  padding: var(--pf-global--spacer--lg) 0 var(--pf-global--spacer--lg) 0;
+}