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

package/src/components/AuthProvider/AuthProviderRow.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
+import { Label } from '@patternfly/react-core';
+
+import { AuthProvider } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Link, ROUTE, useNavigate } from '../../hooks/useNavigate';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { DynamicAuthProviderSpec } from '../../types/extraTypes';
+import { isOAuth2Provider } from './CreateAuthProvider/types';
+import { getProviderTypeLabel } from './CreateAuthProvider/utils';
+import { usePermissionsContext } from '../common/PermissionsContext';
+
+const authProviderPermissions = [
+  { kind: RESOURCE.AUTH_PROVIDER, verb: VERB.UPDATE },
+  { kind: RESOURCE.AUTH_PROVIDER, verb: VERB.DELETE },
+];
+
+const AuthProviderRow = ({ provider, onDeleteClick }: { provider: AuthProvider; onDeleteClick: VoidFunction }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const providerName = provider.metadata.name || '';
+  const providerSpec = provider.spec as DynamicAuthProviderSpec;
+
+  const { checkPermissions } = usePermissionsContext();
+  const [canEdit, canDelete] = checkPermissions(authProviderPermissions);
+
+  const actions = [
+    {
+      title: t('View details'),
+      onClick: () => navigate({ route: ROUTE.AUTH_PROVIDER_DETAILS, postfix: providerName }),
+    },
+  ];
+
+  if (canEdit) {
+    actions.push({
+      title: t('Edit'),
+      onClick: () => navigate({ route: ROUTE.AUTH_PROVIDER_EDIT, postfix: providerName }),
+    });
+  }
+
+  if (canDelete) {
+    actions.push({
+      title: t('Delete'),
+      onClick: onDeleteClick,
+    });
+  }
+
+  let url: string = 'N/A';
+  let urlTitle: string = '';
+  if (isOAuth2Provider(providerSpec)) {
+    url = providerSpec.authorizationUrl;
+    urlTitle = t('Authorization URL');
+  } else {
+    url = providerSpec.issuer;
+    urlTitle = t('Issuer URL');
+  }
+
+  const isEnabled = providerSpec.enabled ?? true;
+
+  return (
+    <Tr>
+      <Td dataLabel={t('Name')}>
+        <Link to={{ route: ROUTE.AUTH_PROVIDER_DETAILS, postfix: providerName }}>
+          <strong>{providerName}</strong>
+        </Link>
+      </Td>
+      <Td dataLabel={t('Type')}>
+        <Label color="blue">{getProviderTypeLabel(providerSpec.providerType, t)}</Label>
+      </Td>
+      <Td dataLabel={urlTitle}>{url || 'N/A'}</Td>
+      <Td dataLabel={t('Enabled')}>
+        <Label color={isEnabled ? 'green' : 'grey'} isDisabled={!isEnabled}>
+          {isEnabled ? t('Enabled') : t('Disabled')}
+        </Label>
+      </Td>
+      <Td isActionCell>
+        <ActionsColumn items={actions} />
+      </Td>
+    </Tr>
+  );
+};
+
+export default AuthProviderRow;

package/src/components/AuthProvider/AuthProvidersPage.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  PageSection,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { Tbody } from '@patternfly/react-table';
+import { TFunction } from 'i18next';
+import { CubesIcon } from '@patternfly/react-icons/dist/js/icons/cubes-icon';
+
+import ListPageBody from '../ListPage/ListPageBody';
+import Table, { ApiSortTableColumn } from '../Table/Table';
+import { useTranslation } from '../../hooks/useTranslation';
+import AuthProviderRow from './AuthProviderRow';
+import { useAuthProviders } from './useAuthProviders';
+import ResourceListEmptyState from '../common/ResourceListEmptyState';
+import PageWithPermissions from '../common/PageWithPermissions';
+import { usePermissionsContext } from '../common/PermissionsContext';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import DeleteAuthProviderModal from './AuthProviderDetails/DeleteAuthProviderModal';
+
+const getColumns = (t: TFunction): ApiSortTableColumn[] => [
+  {
+    name: t('Name'),
+  },
+  {
+    name: t('Type'),
+  },
+  {
+    name: t('Issuer/Authorization URL'),
+  },
+  {
+    name: t('Status'),
+  },
+];
+
+const CreateAuthProviderButton = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreate] = checkPermissions([{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.CREATE }]);
+
+  return (
+    canCreate && (
+      <Button variant="primary" onClick={() => navigate(ROUTE.AUTH_PROVIDER_CREATE)}>
+        {t('Add authentication provider')}
+      </Button>
+    )
+  );
+};
+
+const AuthProviderEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <ResourceListEmptyState icon={CubesIcon} titleText={t('Add your first authentication providers')}>
+      <EmptyStateBody>
+        {t('Connect OIDC and OAuth2 providers to enable additional secure authentication options for your users.')}
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <CreateAuthProviderButton />
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </ResourceListEmptyState>
+  );
+};
+
+const AuthProvidersTable = () => {
+  const { t } = useTranslation();
+
+  const providerColumns = React.useMemo(() => getColumns(t), [t]);
+  const { providers, isLoading, error, isUpdating, refetch } = useAuthProviders();
+  const [deleteModalProviderId, setDeleteModalProviderId] = React.useState<string>();
+
+  return (
+    <ListPageBody error={error} loading={isLoading}>
+      <Table
+        aria-label={t('Authentication providers list')}
+        loading={isUpdating}
+        columns={providerColumns}
+        emptyData={providers.length === 0}
+      >
+        <Tbody>
+          {providers.map((provider) => {
+            const providerId = provider.metadata.name as string;
+            return (
+              <AuthProviderRow
+                key={providerId}
+                provider={provider}
+                onDeleteClick={() => {
+                  setDeleteModalProviderId(providerId);
+                }}
+              />
+            );
+          })}
+        </Tbody>
+      </Table>
+      {!isUpdating && providers.length === 0 && <AuthProviderEmptyState />}
+      {deleteModalProviderId && (
+        <DeleteAuthProviderModal
+          authProviderId={deleteModalProviderId}
+          onClose={() => setDeleteModalProviderId(undefined)}
+          onDeleteSuccess={() => {
+            setDeleteModalProviderId(undefined);
+            refetch();
+          }}
+        />
+      )}
+    </ListPageBody>
+  );
+};
+
+const AuthProvidersPage = () => {
+  const { t } = useTranslation();
+
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [canList] = checkPermissions([{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.LIST }]);
+  const navigate = useNavigate();
+
+  return (
+    <PageWithPermissions allowed={canList} loading={loading}>
+      <PageSection variant="light" type="breadcrumb">
+        <Stack hasGutter>
+          <StackItem>
+            <Title headingLevel="h1" size="3xl">
+              {t('Authentication')}
+            </Title>
+            <TextContent>
+              <Text component={TextVariants.small}>{t('Manage authentication providers')}</Text>
+            </TextContent>
+          </StackItem>
+          <StackItem>
+            <Toolbar>
+              <ToolbarContent>
+                <ToolbarItem>
+                  <Title headingLevel="h2" size="lg">
+                    {t('Authentication providers')}
+                  </Title>
+                </ToolbarItem>
+                <ToolbarItem variant="separator" />
+                <ToolbarItem>
+                  <Button variant="primary" onClick={() => navigate(ROUTE.AUTH_PROVIDER_CREATE)}>
+                    {t('Add authentication provider')}
+                  </Button>
+                </ToolbarItem>
+              </ToolbarContent>
+            </Toolbar>
+          </StackItem>
+          <AuthProvidersTable />
+        </Stack>
+      </PageSection>
+    </PageWithPermissions>
+  );
+};
+
+export default AuthProvidersPage;

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { FormGroup, FormSection, Split, SplitItem } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import RadioField from '../../form/RadioField';
+import TextField from '../../form/TextField';
+import ListItemField from '../../form/ListItemField';
+import { AuthProviderFormValues, OrgAssignmentType } from './types';
+
+const OrganizationAssignmentSection = () => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<AuthProviderFormValues>();
+
+  return (
+    <FormSection title={t('Organization assignment')} className="pf-v5-u-mt-md">
+      <Split hasGutter>
+        <SplitItem>
+          <RadioField
+            id="orgAssignmentStatic"
+            name="orgAssignmentType"
+            label={t('Static')}
+            checkedValue={OrgAssignmentType.Static}
+          />
+        </SplitItem>
+        <SplitItem>
+          <RadioField
+            id="orgAssignmentDynamic"
+            name="orgAssignmentType"
+            label={t('Dynamic')}
+            checkedValue={OrgAssignmentType.Dynamic}
+          />
+        </SplitItem>
+        <SplitItem>
+          <RadioField
+            id="orgAssignmentPerUser"
+            name="orgAssignmentType"
+            label={t('Per user')}
+            checkedValue={OrgAssignmentType.PerUser}
+          />
+        </SplitItem>
+      </Split>
+
+      {values.orgAssignmentType === OrgAssignmentType.Static && (
+        <FormGroup label={t('External organization name')} isRequired>
+          <TextField
+            name="orgName"
+            aria-label={t('External organization name')}
+            helperText={t('Users from this provider will be assigned to this organization')}
+          />
+        </FormGroup>
+      )}
+
+      {values.orgAssignmentType === OrgAssignmentType.Dynamic && (
+        <>
+          <FormGroup label={t('Claim path')} isRequired>
+            <ListItemField
+              name="claimPath"
+              helperText={t('Enter the path segments to the claim (e.g., ["groups"], ["custom_claims", "org_id"])')}
+              addButtonText={t('Add path segment')}
+            />
+          </FormGroup>
+          <FormGroup label={t('Organization name prefix')}>
+            <TextField
+              name="orgNamePrefix"
+              aria-label={t('Organization name prefix')}
+              helperText={t('Optional prefix for the organization name')}
+            />
+          </FormGroup>
+          <FormGroup label={t('Organization name suffix')}>
+            <TextField
+              name="orgNameSuffix"
+              aria-label={t('Organization name suffix')}
+              helperText={t('Optional suffix for the organization name')}
+            />
+          </FormGroup>
+        </>
+      )}
+
+      {values.orgAssignmentType === OrgAssignmentType.PerUser && (
+        <>
+          <FormGroup label={t('Organization name prefix')}>
+            <TextField
+              name="orgNamePrefix"
+              aria-label={t('Organization name prefix')}
+              helperText={t('Optional prefix for the user-specific organization name')}
+            />
+          </FormGroup>
+          <FormGroup label={t('Organization name suffix')}>
+            <TextField
+              name="orgNameSuffix"
+              aria-label={t('Organization name suffix')}
+              helperText={t('Optional suffix for the user-specific organization name')}
+            />
+          </FormGroup>
+        </>
+      )}
+    </FormSection>
+  );
+};
+
+export default OrganizationAssignmentSection;

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+export const ScopesHelperText = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <p>
+        <strong>{t('Purpose')}:</strong>
+        {t('Scopes define the permissions your application requests from the provider.')}
+      </p>
+      <p>
+        <strong>{t('Configuration')}:</strong> {t("Check your provider's documentation for required scopes.")}
+      </p>
+      <p>
+        <strong>{t('Common examples')}:</strong> {t('openid, profile, email, groups.')}
+      </p>
+    </div>
+  );
+};
+
+export const UsernameClaimHelperText = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <p>
+        <strong>{t('Purpose')}:</strong> {t('The claim field that contains the username.')}
+      </p>
+      <p>
+        <strong>{t('Format')}:</strong>{' '}
+        {t(
+          'Enter each segment of the claim path as a separate item. Simple claims like "email" require only one segment. For nested claims like "user.name", add multiple segments in order: first "user", then "name".',
+        )}
+      </p>
+      <p>
+        <strong>{t('Requirements')}:</strong>{' '}
+        {t(
+          'Each segment must start with a letter or underscore and contain only letters, numbers, dots or underscores.',
+        )}
+      </p>
+    </div>
+  );
+};
+
+export const RoleClaimHelperText = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <p>
+        <strong>{t('Purpose')}:</strong>{' '}
+        {t('The claim field that contains user roles or group memberships for authorization.')}
+      </p>
+      <p>
+        <strong>{t('Configuration')}:</strong> {t("Refer to your provider's documentation for the correct claim path.")}
+      </p>
+      <p>
+        <strong>{t('Format')}:</strong>{' '}
+        {t('Use an array of path segments (e.g., ["groups"], ["roles"], ["realm_access", "roles"]).')}
+      </p>
+      <p>
+        <strong>{t('Common examples')}:</strong> {t('["groups"], ["roles"], ["authorities"]')}
+      </p>
+    </div>
+  );
+};
+
+export const RoleSeparatorHelperText = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <p>
+        {t(
+          'Separator for org:role format (default: ":"). Roles containing the separator are split into organization-scoped roles. Roles without separator are global and apply to all organizations. Example: "org1:admin" becomes org-scoped role "admin" for organization "org1", while "admin" becomes a global role.',
+        )}
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {
+  Alert,
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
+
+import { AuthProvider } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAppContext } from '../../../hooks/useAppContext';
+import { RESOURCE, VERB } from '../../../types/rbac';
+import { isDynamicAuthProvider } from '../../../types/extraTypes';
+import { getErrorMessage } from '../../../utils/error';
+import PageWithPermissions from '../../common/PageWithPermissions';
+import { usePermissionsContext } from '../../common/PermissionsContext';
+
+import CreateAuthProviderForm from './CreateAuthProviderForm';
+
+const CreateAuthProvider = ({ authProviderId }: { authProviderId: string | undefined }) => {
+  const { t } = useTranslation();
+  const { get } = useFetch();
+  const [error, setError] = React.useState<string>();
+  const [isLoading, setIsLoading] = React.useState(!!authProviderId);
+  const [authProviderDetails, setAuthProviderDetails] = React.useState<AuthProvider>();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    const fetchAuthProvider = async () => {
+      setIsLoading(true);
+      try {
+        const provider = await get<AuthProvider>(`authproviders/${authProviderId}`);
+        // API should not return non-dynamic providers, but we add the check for safety
+        if (!isDynamicAuthProvider(provider)) {
+          throw new Error('Authentication providers of type ' + provider.spec.providerType + ' cannot be modified');
+        }
+        setAuthProviderDetails(provider);
+      } catch (e) {
+        setError(getErrorMessage(e));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (authProviderId) {
+      void fetchAuthProvider();
+    }
+  }, [get, authProviderId]);
+
+  let content: React.ReactNode;
+  if (error) {
+    content = (
+      <Alert isInline variant="danger" title={t('An error occurred')}>
+        <div>
+          {t('Failed to retrieve authentication provider details')}: {error}
+        </div>
+      </Alert>
+    );
+  } else if (isLoading) {
+    content = (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  } else {
+    content = (
+      <CreateAuthProviderForm
+        authProvider={authProviderDetails}
+        onClose={() => navigate(ROUTE.AUTH_PROVIDERS)}
+        onSuccess={(authProvider) =>
+          navigate({ route: ROUTE.AUTH_PROVIDER_DETAILS, postfix: authProvider.metadata.name })
+        }
+      />
+    );
+  }
+
+  let title: string;
+  if (!!authProviderDetails) {
+    title = t('Edit authentication provider');
+  } else {
+    title = t('Add authentication provider');
+  }
+
+  return (
+    <>
+      <PageSection variant="light" type="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={ROUTE.AUTH_PROVIDERS}>{t('Authentication providers')}</Link>
+          </BreadcrumbItem>
+          {authProviderId && (
+            <BreadcrumbItem>
+              <Link to={{ route: ROUTE.AUTH_PROVIDER_DETAILS, postfix: authProviderId }}>{authProviderId}</Link>
+            </BreadcrumbItem>
+          )}
+          <BreadcrumbItem isActive>{title}</BreadcrumbItem>
+        </Breadcrumb>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="3xl">
+          {title}
+        </Title>
+        <TextContent>
+          <Text component={TextVariants.small}>
+            {t("Set up how users will sign in and which organization they'll be assigned to.")}
+          </Text>
+        </TextContent>
+      </PageSection>
+      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pt-0">
+        {content}
+      </PageSection>
+    </>
+  );
+};
+
+const createAuthProviderPermissions = [
+  { kind: RESOURCE.AUTH_PROVIDER, verb: VERB.CREATE },
+  { kind: RESOURCE.AUTH_PROVIDER, verb: VERB.PATCH },
+];
+
+const CreateAuthProviderWithPermissions = () => {
+  const {
+    router: { useParams },
+  } = useAppContext();
+  const { authProviderId } = useParams<{ authProviderId: string }>();
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [createAllowed, patchAllowed] = checkPermissions(createAuthProviderPermissions);
+  return (
+    <PageWithPermissions allowed={authProviderId ? patchAllowed : createAllowed} loading={loading}>
+      <CreateAuthProvider authProviderId={authProviderId} />
+    </PageWithPermissions>
+  );
+};
+
+export default CreateAuthProviderWithPermissions;