strapi-plugin-keycloak-realm-users 1.0.0

package/admin/src/pages/RealmsPage/RealmEditPage.jsx

@@ -0,0 +1,791 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import {
+  Button,
+  Box,
+  Grid,
+  TextInput,
+  Toggle,
+  Typography,
+  Flex,
+  Alert,
+  Loader,
+  Field,
+  Tabs,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  IconButton,
+  Checkbox,
+  Dialog,
+  Modal,
+  SingleSelect,
+  SingleSelectOption,
+  Badge,
+  EmptyStateLayout,
+} from '@strapi/design-system';
+import { Layouts } from '@strapi/strapi/admin';
+import { ArrowLeft, Check, Play, Plus, Trash, Pencil, User } from '@strapi/icons';
+
+import { getTrad } from '../../constants';
+import useRealms from '../../hooks/useRealms';
+import useRealmAdmins from '../../hooks/useRealmAdmins';
+import pluginId from '../../pluginId';
+
+const PERMISSIONS = [
+  { key: 'canRead', label: 'Read', description: 'View users' },
+  { key: 'canCreate', label: 'Create', description: 'Add new users' },
+  { key: 'canUpdate', label: 'Update', description: 'Edit user details' },
+  { key: 'canDelete', label: 'Delete', description: 'Remove users' },
+  { key: 'canResetPassword', label: 'Reset Password', description: 'Change user passwords' },
+  { key: 'canManageRoles', label: 'Manage Roles', description: 'Assign/remove Keycloak roles' },
+];
+
+const RealmEditPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const { fetchOne, create, update, testConnectionRaw } = useRealms();
+  const {
+    admins,
+    strapiUsers,
+    isLoading: isLoadingAdmins,
+    fetchAdmins,
+    fetchStrapiUsers,
+    addAdmin,
+    updateAdmin,
+    removeAdmin,
+  } = useRealmAdmins(id);
+
+  const isEditMode = !!id;
+
+  const [activeTab, setActiveTab] = useState('configuration');
+  const [isLoading, setIsLoading] = useState(isEditMode);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isTesting, setIsTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    displayName: '',
+    serverUrl: '',
+    realmName: '',
+    clientId: '',
+    clientSecret: '',
+    enabled: true,
+    color: '#4945ff',
+  });
+  const [errors, setErrors] = useState({});
+
+  // Admin management state
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [selectedAdmin, setSelectedAdmin] = useState(null);
+  const [deleteAdminId, setDeleteAdminId] = useState(null);
+  const [newAdminUserId, setNewAdminUserId] = useState('');
+  const [adminPermissions, setAdminPermissions] = useState({
+    canRead: true,
+    canCreate: false,
+    canUpdate: false,
+    canDelete: false,
+    canResetPassword: false,
+    canManageRoles: false,
+  });
+
+  useEffect(() => {
+    if (isEditMode) {
+      fetchOne(id)
+        .then((realm) => {
+          setFormData({
+            name: realm.name || '',
+            displayName: realm.displayName || '',
+            serverUrl: realm.serverUrl || '',
+            realmName: realm.realmName || '',
+            clientId: realm.clientId || '',
+            clientSecret: '',
+            enabled: realm.enabled !== false,
+            color: realm.color || '#4945ff',
+          });
+        })
+        .catch(() => {
+          navigate(`/settings/${pluginId}`);
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [id, isEditMode, fetchOne, navigate]);
+
+  useEffect(() => {
+    if (isEditMode && activeTab === 'admins') {
+      fetchAdmins();
+      fetchStrapiUsers();
+    }
+  }, [isEditMode, activeTab, fetchAdmins, fetchStrapiUsers]);
+
+  const handleChange = (field) => (e) => {
+    const value = e.target ? e.target.value : e;
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: null }));
+    setTestResult(null);
+  };
+
+  const handleToggle = (field) => () => {
+    setFormData((prev) => ({ ...prev, [field]: !prev[field] }));
+  };
+
+  const validate = () => {
+    const newErrors = {};
+
+    if (!formData.name) {
+      newErrors.name = 'Name is required';
+    } else if (!/^[a-z0-9-]+$/.test(formData.name)) {
+      newErrors.name = 'Name must contain only lowercase letters, numbers, and hyphens';
+    }
+
+    if (!formData.displayName) {
+      newErrors.displayName = 'Display name is required';
+    }
+
+    if (!formData.serverUrl) {
+      newErrors.serverUrl = 'Server URL is required';
+    }
+
+    if (!formData.realmName) {
+      newErrors.realmName = 'Realm name is required';
+    }
+
+    if (!formData.clientId) {
+      newErrors.clientId = 'Client ID is required';
+    }
+
+    if (!isEditMode && !formData.clientSecret) {
+      newErrors.clientSecret = 'Client secret is required for new realms';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!formData.serverUrl || !formData.realmName || !formData.clientId) {
+      setTestResult({ success: false, message: 'Please fill in server URL, realm name, and client ID' });
+      return;
+    }
+
+    setIsTesting(true);
+    setTestResult(null);
+
+    try {
+      const result = await testConnectionRaw({
+        serverUrl: formData.serverUrl,
+        realmName: formData.realmName,
+        clientId: formData.clientId,
+        clientSecret: formData.clientSecret || undefined,
+      });
+      setTestResult(result);
+    } catch {
+      setTestResult({ success: false, message: 'Connection test failed' });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+
+    setIsSaving(true);
+
+    try {
+      const dataToSave = { ...formData };
+
+      if (!dataToSave.clientSecret) {
+        delete dataToSave.clientSecret;
+      }
+
+      if (isEditMode) {
+        await update(id, dataToSave);
+      } else {
+        await create(dataToSave);
+      }
+
+      navigate(`/settings/${pluginId}`);
+    } catch {
+      // Error handled by hook
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleOpenAddModal = () => {
+    setNewAdminUserId('');
+    setAdminPermissions({
+      canRead: true,
+      canCreate: false,
+      canUpdate: false,
+      canDelete: false,
+      canResetPassword: false,
+      canManageRoles: false,
+    });
+    setShowAddModal(true);
+  };
+
+  const handleOpenEditModal = (admin) => {
+    setSelectedAdmin(admin);
+    setAdminPermissions({
+      canRead: admin.canRead || false,
+      canCreate: admin.canCreate || false,
+      canUpdate: admin.canUpdate || false,
+      canDelete: admin.canDelete || false,
+      canResetPassword: admin.canResetPassword || false,
+      canManageRoles: admin.canManageRoles || false,
+    });
+    setShowEditModal(true);
+  };
+
+  const handleAddAdmin = async () => {
+    if (!newAdminUserId) return;
+
+    const selectedUser = strapiUsers.find((u) => u.id === parseInt(newAdminUserId, 10));
+    try {
+      await addAdmin(parseInt(newAdminUserId, 10), selectedUser?.email, adminPermissions);
+      setShowAddModal(false);
+    } catch {
+      // Error handled by hook
+    }
+  };
+
+  const handleUpdateAdmin = async () => {
+    if (!selectedAdmin) return;
+
+    try {
+      await updateAdmin(selectedAdmin.strapiUserId, adminPermissions);
+      setShowEditModal(false);
+      setSelectedAdmin(null);
+    } catch {
+      // Error handled by hook
+    }
+  };
+
+  const handleDeleteAdmin = async () => {
+    if (!deleteAdminId) return;
+
+    try {
+      await removeAdmin(deleteAdminId);
+      setDeleteAdminId(null);
+    } catch {
+      // Error handled by hook
+    }
+  };
+
+  const handlePermissionChange = (key) => () => {
+    setAdminPermissions((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // Filter out users already assigned as admins
+  const availableUsers = strapiUsers.filter(
+    (user) => !admins.some((admin) => admin.strapiUserId === user.id)
+  );
+
+  if (isLoading) {
+    return (
+      <Layouts.Root>
+        <Layouts.Content>
+          <Flex justifyContent="center" padding={8}>
+            <Loader />
+          </Flex>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title={isEditMode ? 'Edit Realm' : 'Create Realm'}
+        subtitle={isEditMode && formData.displayName}
+        navigationAction={
+          <Button
+            startIcon={<ArrowLeft />}
+            variant="ghost"
+            onClick={() => navigate(`/settings/${pluginId}`)}
+          >
+            {formatMessage({ id: getTrad('common.back'), defaultMessage: 'Back' })}
+          </Button>
+        }
+        primaryAction={
+          <Flex gap={2}>
+            {activeTab === 'configuration' && (
+              <>
+                <Button
+                  variant="secondary"
+                  startIcon={<Play />}
+                  onClick={handleTestConnection}
+                  loading={isTesting}
+                >
+                  {formatMessage({ id: getTrad('realm.testConnection'), defaultMessage: 'Test Connection' })}
+                </Button>
+                <Button startIcon={<Check />} onClick={handleSubmit} loading={isSaving}>
+                  {formatMessage({ id: getTrad('common.save'), defaultMessage: 'Save' })}
+                </Button>
+              </>
+            )}
+            {activeTab === 'admins' && (
+              <Button startIcon={<Plus />} onClick={handleOpenAddModal}>
+                Add Admin
+              </Button>
+            )}
+          </Flex>
+        }
+      />
+
+      <Layouts.Content>
+        {isEditMode ? (
+          <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
+            <Tabs.List>
+              <Tabs.Trigger value="configuration">Configuration</Tabs.Trigger>
+              <Tabs.Trigger value="admins">Admins</Tabs.Trigger>
+            </Tabs.List>
+
+            <Box marginTop={4}>
+              <Tabs.Content value="configuration">
+                <ConfigurationTab
+                  formData={formData}
+                  errors={errors}
+                  testResult={testResult}
+                  isEditMode={isEditMode}
+                  handleChange={handleChange}
+                  handleToggle={handleToggle}
+                  setTestResult={setTestResult}
+                  formatMessage={formatMessage}
+                />
+              </Tabs.Content>
+
+              <Tabs.Content value="admins">
+                <AdminsTab
+                  admins={admins}
+                  isLoading={isLoadingAdmins}
+                  onEdit={handleOpenEditModal}
+                  onDelete={setDeleteAdminId}
+                />
+              </Tabs.Content>
+            </Box>
+          </Tabs.Root>
+        ) : (
+          <ConfigurationTab
+            formData={formData}
+            errors={errors}
+            testResult={testResult}
+            isEditMode={isEditMode}
+            handleChange={handleChange}
+            handleToggle={handleToggle}
+            setTestResult={setTestResult}
+            formatMessage={formatMessage}
+          />
+        )}
+      </Layouts.Content>
+
+      {/* Add Admin Modal */}
+      <Modal.Root open={showAddModal} onOpenChange={() => setShowAddModal(false)}>
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Add Realm Admin</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Flex direction="column" gap={4}>
+              <Field.Root>
+                <Field.Label required>Select User</Field.Label>
+                <SingleSelect
+                  value={newAdminUserId}
+                  onChange={setNewAdminUserId}
+                  placeholder="Select a Strapi user..."
+                >
+                  {availableUsers.map((user) => (
+                    <SingleSelectOption key={user.id} value={String(user.id)}>
+                      {user.firstname} {user.lastname} ({user.email})
+                    </SingleSelectOption>
+                  ))}
+                </SingleSelect>
+              </Field.Root>
+
+              <Box>
+                <Typography variant="pi" fontWeight="bold">
+                  Permissions
+                </Typography>
+                <Box marginTop={2}>
+                  {PERMISSIONS.map((perm) => (
+                    <Flex key={perm.key} alignItems="center" gap={2} marginBottom={2}>
+                      <Checkbox
+                        checked={adminPermissions[perm.key]}
+                        onCheckedChange={handlePermissionChange(perm.key)}
+                      />
+                      <Box>
+                        <Typography fontWeight="semiBold">{perm.label}</Typography>
+                        <Typography variant="pi" textColor="neutral600">
+                          {perm.description}
+                        </Typography>
+                      </Box>
+                    </Flex>
+                  ))}
+                </Box>
+              </Box>
+            </Flex>
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="tertiary">Cancel</Button>
+            </Modal.Close>
+            <Button onClick={handleAddAdmin} disabled={!newAdminUserId}>
+              Add Admin
+            </Button>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+
+      {/* Edit Admin Modal */}
+      <Modal.Root open={showEditModal} onOpenChange={() => setShowEditModal(false)}>
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Edit Admin Permissions</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Flex direction="column" gap={4}>
+              {selectedAdmin && (
+                <Box background="neutral100" padding={3} hasRadius>
+                  <Typography fontWeight="bold">{selectedAdmin.strapiUserEmail}</Typography>
+                </Box>
+              )}
+
+              <Box>
+                <Typography variant="pi" fontWeight="bold">
+                  Permissions
+                </Typography>
+                <Box marginTop={2}>
+                  {PERMISSIONS.map((perm) => (
+                    <Flex key={perm.key} alignItems="center" gap={2} marginBottom={2}>
+                      <Checkbox
+                        checked={adminPermissions[perm.key]}
+                        onCheckedChange={handlePermissionChange(perm.key)}
+                      />
+                      <Box>
+                        <Typography fontWeight="semiBold">{perm.label}</Typography>
+                        <Typography variant="pi" textColor="neutral600">
+                          {perm.description}
+                        </Typography>
+                      </Box>
+                    </Flex>
+                  ))}
+                </Box>
+              </Box>
+            </Flex>
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="tertiary">Cancel</Button>
+            </Modal.Close>
+            <Button onClick={handleUpdateAdmin}>Save Permissions</Button>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+
+      {/* Delete Admin Dialog */}
+      <Dialog.Root open={!!deleteAdminId} onOpenChange={() => setDeleteAdminId(null)}>
+        <Dialog.Content>
+          <Dialog.Header>Remove Admin</Dialog.Header>
+          <Dialog.Body>
+            Are you sure you want to remove this admin from the realm? They will lose all permissions.
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Dialog.Cancel>
+              <Button variant="tertiary">Cancel</Button>
+            </Dialog.Cancel>
+            <Dialog.Action>
+              <Button variant="danger-light" onClick={handleDeleteAdmin}>
+                Remove
+              </Button>
+            </Dialog.Action>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </Layouts.Root>
+  );
+};
+
+// Configuration Tab Component
+const ConfigurationTab = ({
+  formData,
+  errors,
+  testResult,
+  isEditMode,
+  handleChange,
+  handleToggle,
+  setTestResult,
+  formatMessage,
+}) => (
+  <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+    {testResult && (
+      <Box marginBottom={4}>
+        <Alert
+          variant={testResult.success ? 'success' : 'danger'}
+          title={testResult.success ? 'Connection Successful' : 'Connection Failed'}
+          onClose={() => setTestResult(null)}
+          closeLabel="Close"
+        >
+          {testResult.success
+            ? `Connected to realm: ${testResult.realmDisplayName || formData.realmName}`
+            : testResult.message}
+        </Alert>
+      </Box>
+    )}
+
+    <Grid.Root gap={4}>
+      <Grid.Item col={6} s={12}>
+        <Field.Root error={errors.name}>
+          <Field.Label required>
+            {formatMessage({ id: getTrad('realm.name'), defaultMessage: 'Name' })}
+          </Field.Label>
+          <TextInput
+            name="name"
+            value={formData.name}
+            onChange={handleChange('name')}
+            disabled={isEditMode}
+          />
+          <Field.Hint>
+            {formatMessage({
+              id: getTrad('realm.name.hint'),
+              defaultMessage: 'Unique identifier (lowercase, numbers, hyphens only)',
+            })}
+          </Field.Hint>
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} s={12}>
+        <Field.Root error={errors.displayName}>
+          <Field.Label required>
+            {formatMessage({ id: getTrad('realm.displayName'), defaultMessage: 'Display Name' })}
+          </Field.Label>
+          <TextInput
+            name="displayName"
+            value={formData.displayName}
+            onChange={handleChange('displayName')}
+          />
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={12}>
+        <Field.Root error={errors.serverUrl}>
+          <Field.Label required>
+            {formatMessage({ id: getTrad('realm.serverUrl'), defaultMessage: 'Server URL' })}
+          </Field.Label>
+          <TextInput
+            name="serverUrl"
+            value={formData.serverUrl}
+            onChange={handleChange('serverUrl')}
+          />
+          <Field.Hint>
+            {formatMessage({
+              id: getTrad('realm.serverUrl.hint'),
+              defaultMessage: 'e.g., https://keycloak.example.com',
+            })}
+          </Field.Hint>
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} s={12}>
+        <Field.Root error={errors.realmName}>
+          <Field.Label required>
+            {formatMessage({ id: getTrad('realm.realmName'), defaultMessage: 'Realm Name' })}
+          </Field.Label>
+          <TextInput
+            name="realmName"
+            value={formData.realmName}
+            onChange={handleChange('realmName')}
+          />
+          <Field.Hint>
+            {formatMessage({
+              id: getTrad('realm.realmName.hint'),
+              defaultMessage: 'The Keycloak realm name',
+            })}
+          </Field.Hint>
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} s={12}>
+        <Field.Root error={errors.clientId}>
+          <Field.Label required>
+            {formatMessage({ id: getTrad('realm.clientId'), defaultMessage: 'Client ID' })}
+          </Field.Label>
+          <TextInput
+            name="clientId"
+            value={formData.clientId}
+            onChange={handleChange('clientId')}
+          />
+          <Field.Hint>
+            {formatMessage({
+              id: getTrad('realm.clientId.hint'),
+              defaultMessage: 'Service account client ID with admin permissions',
+            })}
+          </Field.Hint>
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={12}>
+        <Field.Root error={errors.clientSecret}>
+          <Field.Label required={!isEditMode}>
+            {formatMessage({ id: getTrad('realm.clientSecret'), defaultMessage: 'Client Secret' })}
+          </Field.Label>
+          <TextInput
+            name="clientSecret"
+            type="password"
+            value={formData.clientSecret}
+            onChange={handleChange('clientSecret')}
+            placeholder={isEditMode ? 'Leave empty to keep current secret' : ''}
+          />
+          <Field.Error />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} s={12}>
+        <Field.Root>
+          <Field.Label>
+            {formatMessage({ id: getTrad('realm.color'), defaultMessage: 'Color' })}
+          </Field.Label>
+          <TextInput
+            name="color"
+            type="color"
+            value={formData.color}
+            onChange={handleChange('color')}
+          />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} s={12}>
+        <Flex direction="column" gap={1}>
+          <Typography variant="pi" fontWeight="bold">
+            {formatMessage({ id: getTrad('realm.enabled'), defaultMessage: 'Enabled' })}
+          </Typography>
+          <Toggle
+            checked={formData.enabled}
+            onChange={handleToggle('enabled')}
+            onLabel="On"
+            offLabel="Off"
+          />
+        </Flex>
+      </Grid.Item>
+    </Grid.Root>
+  </Box>
+);
+
+// Admins Tab Component
+const AdminsTab = ({ admins, isLoading, onEdit, onDelete }) => {
+  if (isLoading) {
+    return (
+      <Flex justifyContent="center" padding={8}>
+        <Loader />
+      </Flex>
+    );
+  }
+
+  if (admins.length === 0) {
+    return (
+      <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+        <EmptyStateLayout
+          icon={<User width="6rem" height="6rem" />}
+          content="No admins assigned to this realm yet. Add an admin to allow them to manage users."
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+      <Table colCount={8} rowCount={admins.length + 1}>
+        <Thead>
+          <Tr>
+            <Th>
+              <Typography variant="sigma">User</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Read</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Create</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Update</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Delete</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Password</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Roles</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Actions</Typography>
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {admins.map((admin) => (
+            <Tr key={admin.documentId}>
+              <Td>
+                <Typography fontWeight="bold">{admin.strapiUserEmail}</Typography>
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canRead} />
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canCreate} />
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canUpdate} />
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canDelete} />
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canResetPassword} />
+              </Td>
+              <Td>
+                <PermissionBadge enabled={admin.canManageRoles} />
+              </Td>
+              <Td>
+                <Flex gap={1}>
+                  <IconButton withTooltip={false} label="Edit" onClick={() => onEdit(admin)}>
+                    <Pencil />
+                  </IconButton>
+                  <IconButton
+                    withTooltip={false}
+                    label="Remove"
+                    onClick={() => onDelete(admin.strapiUserId)}
+                  >
+                    <Trash />
+                  </IconButton>
+                </Flex>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+const PermissionBadge = ({ enabled }) => (
+  <Badge backgroundColor={enabled ? 'success100' : 'neutral150'}>
+    {enabled ? 'Yes' : 'No'}
+  </Badge>
+);
+
+export default RealmEditPage;