@flightctl/ui-components 0.10.0-rc7 → 1.0.0-rc1

package/src/components/AuthProvider/CreateAuthProvider/CreateAuthProviderForm.tsx

@@ -0,0 +1,284 @@
+import * as React from 'react';
+import { Alert, Button, FormGroup, FormSection, Grid, Popover, Split, SplitItem } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+
+import { AuthProvider } from '@flightctl/types';
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import NameField from '../../form/NameField';
+import TextField from '../../form/TextField';
+import RadioField from '../../form/RadioField';
+import SwitchField from '../../form/SwitchField';
+import ListItemField from '../../form/ListItemField';
+import FlightCtlForm from '../../form/FlightCtlForm';
+import FlightCtlActionGroup from '../../form/FlightCtlActionGroup';
+import { getDnsSubdomainValidations } from '../../form/validations';
+import { AuthProviderFormValues, FieldValidationResult } from './types';
+import { ProviderType } from '../../../types/extraTypes';
+
+import { authProviderSchema, getAuthProvider, getAuthProviderPatches, getInitValues } from './utils';
+import { getErrorMessage } from '../../../utils/error';
+import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
+import { FormGroupWithHelperText } from '../../common/WithHelperText';
+
+import Oauth2ProviderFields from './Oauth2ProviderFields';
+import OrganizationAssignmentSection from './AuthOrganizationAssignment';
+import RoleAssignmentSection from './RoleAssignmentSection';
+import TestConnectionModal from '../TestConnectionModal/TestConnectionModal';
+import { ScopesHelperText, UsernameClaimHelperText } from './AuthProviderHelperText';
+
+const ProviderTypeSection = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Split hasGutter>
+      <SplitItem>
+        <RadioField id="oidc-provider-radio" name="providerType" label={t('OIDC')} checkedValue={ProviderType.OIDC} />
+      </SplitItem>
+      <SplitItem>
+        <RadioField
+          id="oauth2-provider-radio"
+          name="providerType"
+          label={t('OAuth2')}
+          checkedValue={ProviderType.OAuth2}
+        />
+      </SplitItem>
+    </Split>
+  );
+};
+
+const EnabledHelpText = () => {
+  const { t } = useTranslation();
+  return (
+    <Popover
+      bodyContent={
+        <div>
+          <p>{t('Turn this on to let users sign in with this provider.')}</p>
+          <p>{t('You can turn it off anytime without losing your settings.')}</p>
+        </div>
+      }
+      withFocusTrap
+      triggerAction="click"
+    >
+      <Button
+        component="a"
+        className="fctl-helper-text__icon"
+        isInline
+        variant="plain"
+        onClick={(ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        }}
+        aria-label="Enabled help text"
+      >
+        <OutlinedQuestionCircleIcon />
+      </Button>
+    </Popover>
+  );
+};
+
+export const AuthProviderForm = ({ isEdit }: { isEdit?: boolean }) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AuthProviderFormValues>();
+
+  const isOidcProvider = values.providerType === ProviderType.OIDC;
+
+  return (
+    <>
+      <SwitchField
+        name="enabled"
+        label={t('Enabled')}
+        aria-label={t('Enabled provider')}
+        labelIcon={<EnabledHelpText />}
+      />
+
+      <NameField
+        name="name"
+        aria-label={t('Provider name')}
+        isRequired
+        isDisabled={isEdit}
+        resourceType="authproviders"
+        validations={getDnsSubdomainValidations(t)}
+        helperText={t("You can't change the provider name after it's created")}
+      />
+
+      <FormGroup label={t('Display name')}>
+        <TextField name="displayName" aria-label={t('Display name')} helperText={t('Display name for this provider')} />
+      </FormGroup>
+
+      <ProviderTypeSection />
+
+      {values.providerType === ProviderType.OAuth2 && <Oauth2ProviderFields />}
+
+      <FormGroup label={t('Issuer URL')} isRequired={isOidcProvider}>
+        <TextField name="issuer" aria-label={t('Issuer URL')} />
+      </FormGroup>
+
+      <FormGroup label={t('Client ID')} isRequired>
+        <TextField name="clientId" aria-label={t('Client ID')} />
+      </FormGroup>
+
+      <FormGroup label={t('Client secret')} isRequired>
+        <TextField name="clientSecret" aria-label={t('Client secret')} type="password" />
+      </FormGroup>
+
+      <FormSection title={t('User identity & authorization')}>
+        <FormGroupWithHelperText label={t('Scopes')} content={<ScopesHelperText />}>
+          <ListItemField
+            name="scopes"
+            helperText={t('Add scopes required to access username and role claims from your authentication provider.')}
+            addButtonText={t('Add scope')}
+          />
+        </FormGroupWithHelperText>
+
+        <FormGroupWithHelperText label={t('Username claim path')} content={<UsernameClaimHelperText />}>
+          <ListItemField
+            name="usernameClaim"
+            helperText={t('Enter the path segments to the username claim')}
+            addButtonText={t('Add path segment')}
+            resolvedValue={(items) => items.join('.')}
+            resolvedLabel={t('Resulting username claim')}
+          />
+        </FormGroupWithHelperText>
+      </FormSection>
+
+      <RoleAssignmentSection />
+
+      <OrganizationAssignmentSection />
+    </>
+  );
+};
+
+const CreateAuthProviderFormContent = ({
+  isEdit,
+  onClose,
+  children,
+}: React.PropsWithChildren<{
+  onClose: VoidFunction;
+  isEdit: boolean;
+}>) => {
+  const { t } = useTranslation();
+  const { isValid, dirty, submitForm, isSubmitting, values } = useFormikContext<AuthProviderFormValues>();
+  const { proxyFetch } = useFetch();
+
+  const [isTesting, setIsTesting] = React.useState(false);
+  const [testResults, setTestResults] = React.useState<FieldValidationResult[] | null>(null);
+  const [testError, setTestError] = React.useState<string>();
+  const isSubmitDisabled = isSubmitting || !isValid || !dirty;
+  const isTestingDisabled = isSubmitting || !isValid || isTesting || (!isEdit && !dirty);
+
+  const handleTestConnection = async () => {
+    setIsTesting(true);
+    setTestError(undefined);
+
+    try {
+      const requestBody = {
+        providerType: values.providerType,
+        issuer: values.issuer,
+        authorizationUrl: values.authorizationUrl,
+        tokenUrl: values.tokenUrl,
+        userinfoUrl: values.userinfoUrl,
+        clientId: values.clientId,
+      };
+
+      const response = await proxyFetch('test-auth-provider-connection', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || `HTTP ${response.status}`);
+      }
+
+      const data = (await response.json()) as { results: FieldValidationResult[] };
+      setTestResults(data.results);
+    } catch (err) {
+      setTestError(getErrorMessage(err));
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  return (
+    <FlightCtlForm>
+      <Grid hasGutter span={8}>
+        <AuthProviderForm isEdit={isEdit} />
+      </Grid>
+      {children}
+      {testError && (
+        <Alert isInline variant="danger" title={t('Test connection failed')}>
+          {testError}
+        </Alert>
+      )}
+      <FlightCtlActionGroup>
+        <Button variant="primary" onClick={submitForm} isLoading={isSubmitting} isDisabled={isSubmitDisabled}>
+          {isEdit ? t('Save') : t('Create authentication provider')}
+        </Button>
+        <Button variant="secondary" onClick={handleTestConnection} isLoading={isTesting} isDisabled={isTestingDisabled}>
+          {t('Test connection')}
+        </Button>
+        <Button variant="link" isDisabled={isSubmitting} onClick={onClose}>
+          {t('Cancel')}
+        </Button>
+      </FlightCtlActionGroup>
+      {testResults && <TestConnectionModal onClose={() => setTestResults(null)} results={testResults} />}
+    </FlightCtlForm>
+  );
+};
+
+export type CreateAuthProviderFormProps = {
+  onClose: VoidFunction;
+  onSuccess: (authProvider: AuthProvider) => void;
+  authProvider?: AuthProvider;
+};
+
+const CreateAuthProviderForm = ({ authProvider, onClose, onSuccess }: CreateAuthProviderFormProps) => {
+  const { t } = useTranslation();
+  const { patch, post } = useFetch();
+  const [error, setError] = React.useState<string>();
+
+  return (
+    <Formik<AuthProviderFormValues>
+      initialValues={getInitValues(authProvider)}
+      validationSchema={Yup.lazy(authProviderSchema(t))}
+      onSubmit={async (values) => {
+        setError(undefined);
+        if (authProvider) {
+          const patches = getAuthProviderPatches(values, authProvider);
+          try {
+            if (patches.length) {
+              await patch<AuthProvider>(`authproviders/${authProvider.metadata.name}`, patches);
+              onSuccess(authProvider);
+            }
+          } catch (e) {
+            setError(getErrorMessage(e));
+          }
+        } else {
+          try {
+            const provider = await post<AuthProvider>('authproviders', getAuthProvider(values));
+            onSuccess(provider);
+          } catch (e) {
+            setError(getErrorMessage(e));
+          }
+        }
+      }}
+    >
+      <CreateAuthProviderFormContent isEdit={!!authProvider} onClose={onClose}>
+        {error && (
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {error}
+          </Alert>
+        )}
+        <LeaveFormConfirmation />
+      </CreateAuthProviderFormContent>
+    </Formik>
+  );
+};
+
+export default CreateAuthProviderForm;

package/src/components/AuthProvider/CreateAuthProvider/Oauth2ProviderFields.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { FormGroup } from '@patternfly/react-core';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import TextField from '../../form/TextField';
+
+const OAuth2ProviderFields = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <FormGroup label={t('Authorization URL')} isRequired>
+        <TextField name="authorizationUrl" aria-label={t('Authorization URL')} />
+      </FormGroup>
+      <FormGroup label={t('Token URL')} isRequired>
+        <TextField name="tokenUrl" aria-label={t('Token URL')} />
+      </FormGroup>
+      <FormGroup label={t('Userinfo URL')} isRequired>
+        <TextField name="userinfoUrl" aria-label={t('Userinfo URL')} />
+      </FormGroup>
+    </>
+  );
+};
+
+export default OAuth2ProviderFields;

package/src/components/AuthProvider/CreateAuthProvider/RoleAssignmentSection.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { TFunction } from 'react-i18next';
+import {
+  FormGroup,
+  FormSection,
+  Label,
+  LabelGroup,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import { useField, useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import RadioField from '../../form/RadioField';
+import ListItemField from '../../form/ListItemField';
+import TextField from '../../form/TextField';
+import ErrorHelperText, { DefaultHelperText } from '../../form/FieldHelperText';
+import { AuthProviderFormValues, RoleAssignmentType } from './types';
+import { FormGroupWithHelperText } from '../../common/WithHelperText';
+import { RoleClaimHelperText, RoleSeparatorHelperText } from './AuthProviderHelperText';
+
+const getAvailableRoles = (t: TFunction): Record<string, string> => ({
+  admin: t('System administrator'),
+  'org-admin': t('Organization administrator'),
+  operator: t('Operator'),
+  installer: t('Installer'),
+  viewer: t('Viewer'),
+});
+
+const RoleSelector = () => {
+  const { t } = useTranslation();
+  const [{ value: roles }, meta, { setValue }] = useField<string[]>('staticRoles');
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const allRoles = React.useMemo(() => {
+    return getAvailableRoles(t);
+  }, [t]);
+
+  const availableRoles = React.useMemo(() => {
+    return Object.entries(allRoles)
+      .filter(([roleCode]) => !roles.includes(roleCode))
+      .map(([roleCode, roleLabel]) => ({
+        value: roleCode,
+        label: roleLabel,
+      }));
+  }, [roles, allRoles]);
+
+  const onAddRole = (role: string) => {
+    if (!roles.includes(role)) {
+      setValue([...roles, role], true);
+    }
+    setIsOpen(false);
+  };
+
+  const onDelete = (role: string) => {
+    setValue(
+      roles.filter((r) => r !== role),
+      true,
+    );
+  };
+
+  const hasAvailableRoles = availableRoles.length > 0;
+
+  return (
+    <>
+      <DefaultHelperText helperText={t('List of roles to assign to all users from this provider')} />
+      <LabelGroup
+        numLabels={5}
+        isEditable
+        addLabelControl={
+          <Select
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            onSelect={(_, value) => onAddRole(value as string)}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isDisabled={!hasAvailableRoles}
+                onClick={() => setIsOpen(!isOpen)}
+                isExpanded={isOpen}
+                className="pf-v5-u-ml-xs"
+              >
+                {t('Add role')}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              {availableRoles.map((role) => (
+                <SelectOption key={role.value} value={role.value}>
+                  {role.label}
+                </SelectOption>
+              ))}
+            </SelectList>
+          </Select>
+        }
+      >
+        {roles.map((roleCode) => (
+          <Label key={roleCode} onClose={() => onDelete(roleCode)} textMaxWidth="18ch" isEditable>
+            {allRoles[roleCode]}
+          </Label>
+        ))}
+      </LabelGroup>
+      <ErrorHelperText meta={meta} touchRequired={false} />
+    </>
+  );
+};
+
+const RoleAssignmentSection = () => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AuthProviderFormValues>();
+
+  return (
+    <FormSection title={t('Role assignment')} className="pf-v5-u-mt-md">
+      <Split hasGutter>
+        <SplitItem>
+          <RadioField
+            id="roleAssignmentStatic"
+            name="roleAssignmentType"
+            label={t('Static')}
+            checkedValue={RoleAssignmentType.Static}
+          />
+        </SplitItem>
+        <SplitItem>
+          <RadioField
+            id="roleAssignmentDynamic"
+            name="roleAssignmentType"
+            label={t('Dynamic')}
+            checkedValue={RoleAssignmentType.Dynamic}
+          />
+        </SplitItem>
+      </Split>
+
+      {values.roleAssignmentType === RoleAssignmentType.Static && (
+        <FormGroup label={t('Roles')} isRequired>
+          <RoleSelector />
+        </FormGroup>
+      )}
+
+      {values.roleAssignmentType === RoleAssignmentType.Dynamic && (
+        <>
+          <FormGroupWithHelperText label={t('Role claim path')} content={<RoleClaimHelperText />}>
+            <ListItemField
+              name="roleClaimPath"
+              helperText={t(
+                'Path segments to the role/group claim (e.g., ["groups"], ["roles"], ["realm_access", "roles"])',
+              )}
+              addButtonText={t('Add path segment')}
+            />
+          </FormGroupWithHelperText>
+
+          <FormGroupWithHelperText label={t('Separator')} content={<RoleSeparatorHelperText />}>
+            <TextField name="roleSeparator" id="roleSeparator" aria-label={t('Separator')} placeholder=":" />
+          </FormGroupWithHelperText>
+        </>
+      )}
+    </FormSection>
+  );
+};
+
+export default RoleAssignmentSection;

package/src/components/AuthProvider/CreateAuthProvider/types.ts

@@ -0,0 +1,96 @@
+import {
+  AuthDynamicOrganizationAssignment,
+  AuthDynamicRoleAssignment,
+  AuthOrganizationAssignment,
+  AuthPerUserOrganizationAssignment,
+  AuthProviderSpec,
+  AuthRoleAssignment,
+  AuthStaticOrganizationAssignment,
+  AuthStaticRoleAssignment,
+  OAuth2ProviderSpec,
+  OIDCProviderSpec,
+} from '@flightctl/types';
+import { ProviderType } from '../../../types/extraTypes';
+
+export enum OrgAssignmentType {
+  Static = 'static',
+  Dynamic = 'dynamic',
+  PerUser = 'perUser',
+}
+
+export const DEFAULT_USERNAME_CLAIM = 'preferred_username';
+export const DEFAULT_ROLE_CLAIM = 'groups';
+export const DEFAULT_ROLE_SEPARATOR = ':';
+
+export const isOidcProvider = (providerSpec: AuthProviderSpec): providerSpec is OIDCProviderSpec =>
+  providerSpec.providerType === ProviderType.OIDC;
+
+export const isOAuth2Provider = (providerSpec: AuthProviderSpec): providerSpec is OAuth2ProviderSpec =>
+  providerSpec.providerType === ProviderType.OAuth2;
+
+export const isOrgAssignmentStatic = (
+  orgAssignment: AuthOrganizationAssignment,
+): orgAssignment is AuthStaticOrganizationAssignment => orgAssignment.type === OrgAssignmentType.Static;
+
+export const isOrgAssignmentDynamic = (
+  orgAssignment: AuthOrganizationAssignment,
+): orgAssignment is AuthDynamicOrganizationAssignment => orgAssignment.type === OrgAssignmentType.Dynamic;
+
+export const isOrgAssignmentPerUser = (
+  orgAssignment: AuthOrganizationAssignment,
+): orgAssignment is AuthPerUserOrganizationAssignment => orgAssignment.type === OrgAssignmentType.PerUser;
+
+export enum RoleAssignmentType {
+  Static = 'static',
+  Dynamic = 'dynamic',
+}
+
+export const isRoleAssignmentStatic = (
+  roleAssignment: AuthRoleAssignment,
+): roleAssignment is AuthStaticRoleAssignment => roleAssignment.type === RoleAssignmentType.Static;
+
+export const isRoleAssignmentDynamic = (
+  roleAssignment: AuthRoleAssignment,
+): roleAssignment is AuthDynamicRoleAssignment => roleAssignment.type === RoleAssignmentType.Dynamic;
+
+export type AuthProviderFormValues = {
+  exists: boolean;
+  name: string;
+  displayName?: string;
+  providerType: ProviderType;
+  issuer: string;
+  clientId: string;
+  clientSecret: string;
+  enabled: boolean;
+  scopes: string[];
+  usernameClaim?: string[]; // Array of path segments (e.g., ["preferred_username"] or ["custom", "user_id"])
+  roleAssignmentType?: RoleAssignmentType;
+  roleClaimPath?: string[]; // For dynamic role assignment
+  roleSeparator?: string; // For dynamic role assignment - separator for org:role format
+  staticRoles?: string[]; // For static role assignment
+
+  // OAuth2 specific fields
+  authorizationUrl?: string;
+  tokenUrl?: string;
+  userinfoUrl?: string;
+
+  orgAssignmentType: OrgAssignmentType;
+  orgName?: string; // OrgAssignment: Static only
+  claimPath?: string[]; // OrgAssignment: Dynamic only - array of path segments
+  orgNamePrefix?: string; // OrgAssignment: Dynamic and perUser
+  orgNameSuffix?: string; // OrgAssignment: Dynamic and perUser
+};
+
+// Test connection types
+export type FieldValidation = {
+  valid: boolean;
+  value?: string;
+  notes?: string[];
+};
+
+export type FieldValidationResult = {
+  field: string;
+  valid: boolean;
+  value?: string;
+  notes?: string[];
+};