first commit

common/resources/client/admin/roles/crupdate-role-page/crupdate-role-settings-panel.tsx

@@ -0,0 +1,102 @@
+import {Role} from '../../../auth/role';
+import {useTrans} from '../../../i18n/use-trans';
+import {useFormContext} from 'react-hook-form';
+import {FormTextField} from '../../../ui/forms/input-field/text-field/text-field';
+import {Trans} from '../../../i18n/trans';
+import {message} from '../../../i18n/message';
+import {FormSelect} from '../../../ui/forms/select/select';
+import {Item} from '../../../ui/forms/listbox/item';
+import {FormSwitch} from '../../../ui/forms/toggle/switch';
+import {FormPermissionSelector} from '../../../auth/ui/permission-selector';
+import {useSettings} from '../../../core/settings/use-settings';
+import {Button} from '@common/ui/buttons/button';
+
+interface CrupdateRolePageSettingsPanelProps {
+  isInternal?: boolean;
+}
+export function CrupdateRolePageSettingsPanel({
+  isInternal = false,
+}: CrupdateRolePageSettingsPanelProps) {
+  const {trans} = useTrans();
+  const {workspaces} = useSettings();
+  const {watch, setValue} = useFormContext<Role>();
+  const watchedType = watch('type');
+
+  return (
+    <>
+      <FormTextField
+        label={<Trans message="Name" />}
+        name="name"
+        className="mb-20"
+        required
+      />
+      <FormTextField
+        label={<Trans message="Description" />}
+        name="description"
+        inputElementType="textarea"
+        placeholder={trans(message('Role description...'))}
+        rows={4}
+        className="mb-20"
+      />
+      {workspaces.integrated && (
+        <FormSelect
+          label={<Trans message="Type" />}
+          name="type"
+          selectionMode="single"
+          className="mb-20"
+          description={
+            <Trans message="Whether this role will be assigned to users globally on the site or only within workspaces." />
+          }
+        >
+          <Item value="sitewide">
+            <Trans message="Sitewide" />
+          </Item>
+          <Item value="workspace">
+            <Trans message="Workspace" />
+          </Item>
+        </FormSelect>
+      )}
+      {!isInternal && (
+        <>
+          <FormSwitch
+            name="default"
+            className="mb-20"
+            description={
+              <Trans message="Assign this role to new users automatically." />
+            }
+          >
+            <Trans message="Default" />
+          </FormSwitch>
+          {watchedType === 'sitewide' && (
+            <FormSwitch
+              name="guests"
+              description={
+                <Trans message="Assign this role to guests (not logged in users)." />
+              }
+            >
+              <Trans message="Guests" />
+            </FormSwitch>
+          )}
+        </>
+      )}
+      <div className="mb-14 mt-30 flex items-end justify-between gap-12">
+        <h2 className="text-lg leading-tight">
+          <Trans message="Permissions" />
+        </h2>
+        <Button
+          variant="outline"
+          size="xs"
+          onClick={() => setValue('permissions', [])}
+        >
+          <Trans message="Remove all" />
+        </Button>
+      </div>
+      <FormPermissionSelector
+        name="permissions"
+        valueListKey={
+          watchedType === 'sitewide' ? 'permissions' : 'workspacePermissions'
+        }
+      />
+    </>
+  );
+}