@flightctl/ui-components 0.7.1 → 0.8.0-rc1

package/src/components/Fleet/CreateFleet/utils.ts

@@ -39,18 +39,27 @@ import { getDisruptionBudgetValues, getRolloutPolicyValues, getUpdatePolicyValue
 import { FleetFormValues, UpdatePolicyForm } from '../../../types/deviceSpec';
 
 export const getValidationSchema = (t: TFunction) => {
-  return Yup.object<FleetFormValues>({
-    name: validKubernetesDnsSubdomain(t, { isRequired: true }),
-    osImage: validOsImage(t, { isFleet: true }),
-    fleetLabels: validLabelsSchema(t),
-    labels: validLabelsSchema(t),
-    configTemplates: validConfigTemplatesSchema(t),
-    applications: validApplicationsSchema(t),
-    systemdUnits: systemdUnitListValidationSchema(t),
-    rolloutPolicy: validFleetRolloutPolicySchema(t),
-    disruptionBudget: validFleetDisruptionBudgetSchema(t),
-    updatePolicy: validUpdatePolicySchema(t),
-  });
+  return Yup.lazy((values: FleetFormValues) =>
+    Yup.object<FleetFormValues>({
+      name: validKubernetesDnsSubdomain(t, { isRequired: true }),
+      osImage: validOsImage(t, { isFleet: true }),
+      fleetLabels: validLabelsSchema(t),
+      labels: validLabelsSchema(t),
+      configTemplates: validConfigTemplatesSchema(t),
+      applications: validApplicationsSchema(t),
+      systemdUnits: systemdUnitListValidationSchema(t),
+      rolloutPolicy:
+        !values.useBasicUpdateConfig && values.rolloutPolicy?.isAdvanced
+          ? validFleetRolloutPolicySchema(t)
+          : Yup.object(),
+      disruptionBudget:
+        !values.useBasicUpdateConfig && values.disruptionBudget?.isAdvanced
+          ? validFleetDisruptionBudgetSchema(t)
+          : Yup.object(),
+      updatePolicy:
+        !values.useBasicUpdateConfig && values.updatePolicy?.isAdvanced ? validUpdatePolicySchema(t) : Yup.object(),
+    }),
+  );
 };
 
 export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValues) => {
@@ -149,7 +158,10 @@ export const getFleetPatches = (currentFleet: Fleet, updatedFleet: FleetFormValu
   const updatePolicyPatches = getUpdatePolicyPatches(
     '/spec/template/spec/updatePolicy',
     currentFleet.spec.template.spec.updatePolicy,
-    updatedFleet.updatePolicy as Required<UpdatePolicyForm>,
+    {
+      ...updatedFleet.updatePolicy,
+      isAdvanced: !updatedFleet.useBasicUpdateConfig && updatedFleet.updatePolicy.isAdvanced,
+    } as Required<UpdatePolicyForm>,
   );
   allPatches = allPatches.concat(updatePolicyPatches);
   return allPatches;
@@ -194,19 +206,23 @@ export const getFleetResource = (values: FleetFormValues): Fleet => {
   if (values.registerMicroShift) {
     fleet.spec.template.spec.config?.push(ACMCrdConfig, ACMImportConfig, MicroshiftRegistrationHook);
   }
-  if (values.rolloutPolicy.isAdvanced || values.disruptionBudget.isAdvanced) {
-    fleet.spec.rolloutPolicy = getRolloutPolicyData(values);
-  }
-  if (values.updatePolicy.isAdvanced) {
-    fleet.spec.template.spec.updatePolicy = updatePolicyFormToApi(values.updatePolicy as Required<UpdatePolicyForm>);
+  if (!values.useBasicUpdateConfig) {
+    if (values.rolloutPolicy.isAdvanced || values.disruptionBudget.isAdvanced) {
+      fleet.spec.rolloutPolicy = getRolloutPolicyData(values);
+    }
+    if (values.updatePolicy.isAdvanced) {
+      fleet.spec.template.spec.updatePolicy = updatePolicyFormToApi(values.updatePolicy as Required<UpdatePolicyForm>);
+    }
   }
-
   return fleet;
 };
 
 export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
   if (fleet) {
     const registerMicroShift = hasMicroshiftRegistrationConfig(fleet.spec.template.spec);
+    const rolloutPolicy = getRolloutPolicyValues(fleet.spec);
+    const disruptionBudget = getDisruptionBudgetValues(fleet.spec);
+    const updatePolicy = getUpdatePolicyValues(fleet.spec.template?.spec?.updatePolicy);
     return {
       name: fleet.metadata.name || '',
       labels: Object.keys(fleet.spec.selector?.matchLabels || {}).map((key) => ({
@@ -225,9 +241,10 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
         exists: true,
       })),
       registerMicroShift,
-      rolloutPolicy: getRolloutPolicyValues(fleet.spec),
-      disruptionBudget: getDisruptionBudgetValues(fleet.spec),
-      updatePolicy: getUpdatePolicyValues(fleet.spec.template?.spec?.updatePolicy),
+      rolloutPolicy,
+      disruptionBudget,
+      updatePolicy,
+      useBasicUpdateConfig: !rolloutPolicy.isAdvanced && !disruptionBudget.isAdvanced && !updatePolicy.isAdvanced,
     };
   }
 
@@ -243,5 +260,6 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
     rolloutPolicy: getRolloutPolicyValues(undefined),
     disruptionBudget: getDisruptionBudgetValues(undefined),
     updatePolicy: getUpdatePolicyValues(undefined),
+    useBasicUpdateConfig: true,
   };
 };

package/src/components/Fleet/DeleteFleetModal/DeleteFleetModal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
 import { Trans } from 'react-i18next';
+import { Alert, Button, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useFetch } from '../../../hooks/useFetch';
@@ -23,14 +24,34 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
 
   return (
     <Modal
-      title={t('Delete fleet ?')}
       isOpen
       onClose={() => {
         onClose();
       }}
       variant="small"
-      titleIconVariant="warning"
-      actions={[
+    >
+      <ModalHeader title={t('Delete fleet?')} titleIconVariant="warning" />
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Trans t={t}>
+              <strong>{fleetId}</strong> will be deleted permanently. If the device selector of a remaining fleet
+              matches a device in <strong>{fleetId}</strong>, the device will be moved to the new fleet. If there&apos;s
+              no matching fleet for a device, it will be unlinked from any fleet.
+            </Trans>
+          </StackItem>
+          <StackItem>{t('Are you sure you want to delete?')}</StackItem>
+          {error && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('An error occurred')}>
+                <div>{error.text}</div>
+                {error.details && <div>{t('Details: {{errorDetails}}', { errorDetails: error.details })}</div>}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="confirm"
           variant="danger"
@@ -49,7 +70,7 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
           }}
         >
           {t('Delete fleet')}
-        </Button>,
+        </Button>
         <Button
           key="cancel"
           variant="link"
@@ -59,29 +80,8 @@ const DeleteFleetModal = ({ fleetId, onClose }: { fleetId: string; onClose: (has
           isDisabled={isDeleting}
         >
           {t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <StackItem>
-          <Trans t={t}>
-            Are you sure you want to delete fleet <strong>{fleetId}</strong>?
-          </Trans>
-        </StackItem>
-        <StackItem>
-          {t(
-            'Devices bound to this fleet may join another fleet matching their labels, otherwise they will remain unlinked from any fleet.',
-          )}
-        </StackItem>
-        {error && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('An error occurred')}>
-              <div>{error.text}</div>
-              {error.details && <div>{t('Details: {{errorDetails}}', { errorDetails: error.details })}</div>}
-            </Alert>
-          </StackItem>
-        )}
-      </Stack>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/Fleet/FleetDetails/FleetDetailsContent.tsx

@@ -11,7 +11,7 @@ import {
   GridItem,
 } from '@patternfly/react-core';
 
-import { Fleet } from '@flightctl/types';
+import { Fleet, ResourceKind } from '@flightctl/types';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import LabelsView from '../../common/LabelsView';
 import { getDateDisplay } from '../../../utils/dates';
@@ -22,6 +22,7 @@ import FleetOwnerLink from './FleetOwnerLink';
 import FleetDevicesCharts from './FleetDevicesCharts';
 import FleetStatus from '../FleetStatus';
 import FleetDevicesCount from './FleetDevicesCount';
+import EventsCard from '../../Events/EventsCard';
 
 const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
   const { t } = useTranslation();
@@ -31,7 +32,7 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
 
   return (
     <Grid hasGutter>
-      <GridItem md={12}>
+      <GridItem md={9}>
         <Card>
           <CardTitle>{t('Details')}</CardTitle>
           <CardBody>
@@ -81,18 +82,18 @@ const FleetDetailsContent = ({ fleet }: { fleet: Fleet }) => {
             </FlightControlDescriptionList>
           </CardBody>
         </Card>
-      </GridItem>
-      {devicesSummary && (
-        <GridItem md={12}>
-          <Card>
+        {devicesSummary && (
+          <Card className="pf-v5-u-mt-md">
             <CardTitle>{t('Fleet devices')}</CardTitle>
-
             <CardBody>
               <FleetDevicesCharts fleetId={fleetId} devicesSummary={devicesSummary} />
             </CardBody>
           </Card>
-        </GridItem>
-      )}
+        )}
+      </GridItem>
+      <GridItem md={3}>
+        <EventsCard kind={ResourceKind.FLEET} objId={fleetId} />
+      </GridItem>
     </Grid>
   );
 };

package/src/components/Fleet/FleetDetails/{FleetDetails.tsx → FleetDetailsPage.tsx}

@@ -1,25 +1,28 @@
 import React from 'react';
-import { DropdownItem, DropdownList } from '@patternfly/react-core';
+import { DropdownItem, DropdownList, Nav, NavList } from '@patternfly/react-core';
 import { Fleet } from '@flightctl/types';
 
+import { RESOURCE, VERB } from '../../../types/rbac';
+import PageWithPermissions from '../../common/PageWithPermissions';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import DetailsPage from '../../DetailsPage/DetailsPage';
-import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
-import FleetDetailsContent from './FleetDetailsContent';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
+import { useAccessReview } from '../../../hooks/useAccessReview';
 import { useAppContext } from '../../../hooks/useAppContext';
+import NavItem from '../../NavItem/NavItem';
+import DetailsPage from '../../DetailsPage/DetailsPage';
+import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
-import { useAccessReview } from '../../../hooks/useAccessReview';
-import { RESOURCE, VERB } from '../../../types/rbac';
-import PageWithPermissions from '../../common/PageWithPermissions';
+import FleetDetailsContent from './FleetDetailsContent';
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
 
-const FleetDetails = () => {
+const FleetDetailPage = () => {
   const { t } = useTranslation();
 
   const {
-    router: { useParams },
+    router: { useParams, Routes, Route, Navigate },
   } = useAppContext();
+
   const { fleetId } = useParams() as { fleetId: string };
   const [fleet, isLoading, error, refetch] = useFetchPeriodically<Required<Fleet>>({
     endpoint: `fleets/${fleetId}?addDevicesSummary=true`,
@@ -32,6 +35,7 @@ const FleetDetails = () => {
   const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
 
   const isManaged = !!fleet?.metadata?.owner;
+  const hasActions = canDelete || (canEdit && !isManaged) || isManaged;
 
   return (
     <DetailsPage
@@ -41,25 +45,29 @@ const FleetDetails = () => {
       resourceLink={ROUTE.FLEETS}
       resourceType="Fleets"
       resourceTypeLabel={t('Fleets')}
+      nav={
+        <Nav variant="tertiary">
+          <NavList>
+            <NavItem to="details">{t('Details')}</NavItem>
+            <NavItem to="yaml">{t('YAML')}</NavItem>
+          </NavList>
+        </Nav>
+      }
       actions={
-        (canDelete || canEdit) && (
+        hasActions && (
           <DetailsPageActions>
             <DropdownList>
-              {canEdit && (
-                <DropdownItem
-                  isAriaDisabled={isManaged}
-                  tooltipProps={
-                    isManaged
-                      ? {
-                          content: t('Fleets managed by a resource sync cannot be edited'),
-                        }
-                      : undefined
-                  }
-                  onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}
-                >
-                  {t('Edit fleet')}
+              {isManaged && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}>
+                  {t('View fleet configurations')}
+                </DropdownItem>
+              )}
+              {canEdit && !isManaged && (
+                <DropdownItem onClick={() => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetId })}>
+                  {t('Edit fleet configurations')}
                 </DropdownItem>
               )}
+
               {canDelete && (
                 <DropdownItem
                   title={t('Delete fleet')}
@@ -87,7 +95,14 @@ const FleetDetails = () => {
     >
       {fleet && (
         <>
-          <FleetDetailsContent fleet={fleet} />
+          <Routes>
+            <Route index element={<Navigate to="details" replace />} />
+            <Route path="details" element={<FleetDetailsContent fleet={fleet} />} />
+            <Route
+              path="yaml"
+              element={<YamlEditor filename={fleet.metadata.name || 'fleet'} apiObj={fleet} refetch={refetch} />}
+            />
+          </Routes>
           {isDeleteModalOpen && (
             <DeleteFleetModal
               fleetId={fleetId}
@@ -110,7 +125,7 @@ const FleetDetailsWithPermissions = () => {
   const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.GET);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
-      <FleetDetails />
+      <FleetDetailPage />
     </PageWithPermissions>
   );
 };

package/src/components/Fleet/FleetRow.tsx

@@ -26,17 +26,16 @@ const useFleetActions = (fleetName: string, isManaged: boolean, canEdit: boolean
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  if (isManaged || !canEdit) {
-    actions.push({
-      title: t("View fleet's configuration"),
-      onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
-    });
-  } else {
-    actions.push({
-      title: t('Edit fleet'),
-      onClick: () => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetName }),
-    });
-  }
+  actions.push({
+    title: t('View fleet details'),
+    onClick: () => navigate({ route: ROUTE.FLEET_DETAILS, postfix: fleetName }),
+  });
+
+  // If users can't edit, the wizard will be in read-only mode
+  actions.push({
+    title: isManaged || !canEdit ? t('View fleet configurations') : t('Edit fleet configurations'),
+    onClick: () => navigate({ route: ROUTE.FLEET_EDIT, postfix: fleetName }),
+  });
   return actions;
 };
 

package/src/components/Masthead/UserPreferencesModal.tsx

@@ -1,22 +1,12 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import {
-  Button,
-  FormGroup,
-  MenuToggle,
-  MenuToggleElement,
-  Modal,
-  Select,
-  SelectOption,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, FormGroup, MenuToggle, MenuToggleElement, Select, SelectOption } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
 
 import { Theme } from '../../hooks/useThemePreferences';
 import { useTranslation } from '../../hooks/useTranslation';
-import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
-import FlightCtlForm from '../form/FlightCtlForm';
 import { UserPreferencesContext } from './UserPreferencesProvider';
+import FlightCtlForm from '../form/FlightCtlForm';
 
 const getThemeLabels = (t: TFunction): { [key in Theme]: string } => ({
   system: t('System default'),
@@ -30,54 +20,51 @@ type UserPreferencesModalProps = {
 
 const UserPreferencesModal: React.FC<UserPreferencesModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
-  const { theme, setTheme } = React.useContext(UserPreferencesContext);
+  const { userTheme, setUserTheme } = React.useContext(UserPreferencesContext);
 
   const themeLabels = getThemeLabels(t);
 
   const [themeExpanded, setThemeExpanded] = React.useState(false);
   return (
-    <Modal title={t('User preferences')} isOpen variant="small" onClose={onClose}>
-      <Stack hasGutter>
-        <StackItem>
-          <FlightCtlForm>
-            <FormGroup label={t('Theme')}>
-              <Select
-                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    style={{ width: '100%' }}
-                    onClick={() => setThemeExpanded(true)}
-                    isExpanded={themeExpanded}
-                  >
-                    {themeLabels[theme]}
-                  </MenuToggle>
-                )}
-                selected={theme}
-                onSelect={(_, value) => {
-                  setTheme(value as Theme);
-                  setThemeExpanded(false);
-                }}
-                aria-label="theme"
-                isOpen={themeExpanded}
-                onOpenChange={setThemeExpanded}
-              >
-                {Object.keys(themeLabels).map((theme) => (
-                  <SelectOption key={theme} value={theme}>
-                    {themeLabels[theme]}
-                  </SelectOption>
-                ))}
-              </Select>
-            </FormGroup>
-          </FlightCtlForm>
-        </StackItem>
-        <StackItem>
-          <FlightCtlActionGroup>
-            <Button variant="secondary" onClick={onClose}>
-              {t('Close')}
-            </Button>
-          </FlightCtlActionGroup>
-        </StackItem>
-      </Stack>
+    <Modal isOpen variant="small" onClose={onClose}>
+      <ModalHeader title={t('User preferences')} />
+      <ModalBody>
+        <FlightCtlForm>
+          <FormGroup label={t('Theme')}>
+            <Select
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  style={{ width: '100%' }}
+                  onClick={() => setThemeExpanded(true)}
+                  isExpanded={themeExpanded}
+                >
+                  {themeLabels[userTheme]}
+                </MenuToggle>
+              )}
+              selected={userTheme}
+              onSelect={(_, value) => {
+                setUserTheme(value as Theme);
+                setThemeExpanded(false);
+              }}
+              aria-label="theme"
+              isOpen={themeExpanded}
+              onOpenChange={setThemeExpanded}
+            >
+              {Object.keys(themeLabels).map((theme) => (
+                <SelectOption key={theme} value={theme}>
+                  {themeLabels[theme]}
+                </SelectOption>
+              ))}
+            </Select>
+          </FormGroup>
+        </FlightCtlForm>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant="secondary" onClick={onClose}>
+          {t('Close')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/Masthead/UserPreferencesProvider.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { Theme, useThemePreferences } from '../../hooks/useThemePreferences';
+import { ResolvedTheme, Theme, useThemePreferences } from '../../hooks/useThemePreferences';
 
-export const UserPreferencesContext = React.createContext<{
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-}>({
-  theme: 'system',
-  setTheme: () => {},
+type ThemeContext = {
+  userTheme: Theme; // Theme setting chosen by the user
+  resolvedTheme: ResolvedTheme; // Resolved theme based on user theme and system settings
+  setUserTheme: (theme: Theme) => void;
+};
+
+export const UserPreferencesContext = React.createContext<ThemeContext>({
+  userTheme: 'system',
+  resolvedTheme: 'dark',
+  setUserTheme: () => {},
 });
 
 export type UserPreferencesProviderProps = {
@@ -14,13 +18,14 @@ export type UserPreferencesProviderProps = {
 };
 
 export const UserPreferencesProvider: React.FC<UserPreferencesProviderProps> = ({ children }) => {
-  const { theme, setTheme } = useThemePreferences();
+  const { userTheme, resolvedTheme, setUserTheme } = useThemePreferences();
 
   return (
     <UserPreferencesContext.Provider
       value={{
-        theme,
-        setTheme,
+        userTheme,
+        resolvedTheme,
+        setUserTheme,
       }}
     >
       {children}

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -7,10 +7,11 @@ import {
   FormGroup,
   FormSection,
   Grid,
-  Modal,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import { Trans } from 'react-i18next';
@@ -32,7 +33,6 @@ import {
 } from './utils';
 import { RepoSpecType, Repository, ResourceSync } from '@flightctl/types';
 import { getErrorMessage } from '../../../utils/error';
-import { DEMO_REPOSITORY_URL } from '../../../links';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import LabelWithHelperText, { FormGroupWithHelperText } from '../../common/WithHelperText';
 import NameField from '../../form/NameField';
@@ -42,6 +42,7 @@ import RadioField from '../../form/RadioField';
 import TextField from '../../form/TextField';
 import FlightCtlForm from '../../form/FlightCtlForm';
 import { getDnsSubdomainValidations } from '../../form/validations';
+import { DEMO_REPOSITORY_URL } from '../../../hooks/useAppLinks';
 import { useAccessReview } from '../../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../../types/rbac';
 
@@ -199,12 +200,13 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
         </SplitItem>
       </Split>
       {showConfirmChangeType && (
-        <Modal
-          title={'Change repository type?'}
-          titleIconVariant="warning"
-          variant="small"
-          isOpen
-          actions={[
+        <Modal variant="small" isOpen>
+          <ModalHeader title={'Change repository type?'} titleIconVariant="warning" />
+          <ModalBody>
+            {t('Switching the repository type will cause some data to be lost.')}{' '}
+            {t('Are you sure you want to change the repository type?')}
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="change"
               variant={ButtonVariant.primary}
@@ -214,7 +216,7 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
               }}
             >
               {t('Change')}
-            </Button>,
+            </Button>
             <Button
               key="cancel"
               variant="link"
@@ -223,11 +225,8 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
               }}
             >
               {t('Cancel')}
-            </Button>,
-          ]}
-        >
-          {t('Switching the repository type will cause some data to be lost.')}
-          {t('Are you sure you want to change the repository type?')}
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </>
@@ -261,7 +260,7 @@ export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
   );
 };
 
-type CreateRepositoryFormContentProps = React.PropsWithChildren<Record<never, never>> &
+type CreateRepositoryFormContentProps = React.PropsWithChildren &
   Pick<CreateRepositoryFormProps, 'onClose'> & {
     isEdit: boolean;
     isReadOnly: boolean;

package/src/components/Repository/CreateRepository/utils.ts

@@ -17,7 +17,6 @@ import { API_VERSION } from '../../../constants';
 import { getErrorMessage } from '../../../utils/error';
 import { appendJSONPatch } from '../../../utils/patch';
 import { MAX_TARGET_REVISION_LENGTH, maxLengthString, validKubernetesDnsSubdomain } from '../../form/validations';
-import { DEMO_REPOSITORY_URL } from '../../../links';
 
 const MAX_PATH_LENGTH = 2048;
 const gitRepoUrlRegex = new RegExp(
@@ -25,7 +24,7 @@ const gitRepoUrlRegex = new RegExp(
 );
 const httpRepoUrlRegex = /^(http|https)/;
 const pathRegex = /\/.+/;
-const jwtTokenRegexp = /^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.?[A-Za-z0-9-_.+/=]*$/;
+const jwtTokenRegexp = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
 
 export const isHttpRepoSpec = (repoSpec: RepositorySpec): repoSpec is HttpRepoSpec =>
   !!(repoSpec['httpConfig'] || (repoSpec as HttpRepoSpec).validationSuffix);
@@ -441,7 +440,7 @@ export const repositorySchema =
             .matches(
               gitRepoUrlRegex,
               t('Enter a valid repository URL. Example: {{ demoRepositoryUrl }}', {
-                demoRepositoryUrl: DEMO_REPOSITORY_URL,
+                demoRepositoryUrl: 'https://github.com/flightctl/flightctl-demos',
               }),
             )
             .defined(t('Repository URL is required')),