particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Move PopoverActivation and ManageKeysButton

Browse source 
This moves `PopoverActivation` and `ManageKeysButton` outside from `ActivationKeysList` to their own separate components.
This commit is contained in:
regexowl 2025-03-07 11:55:19 +01:00 • committed by Klara Simickova
parent 9d55d76ac9
commit a34d5895d9
4 changed files with 88 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
View file

@ -4,25 +4,20 @@ import {
Alert,
FormGroup,
Spinner,
Button,
Text,
TextContent,
Popover,
} from '@patternfly/react-core';
import {
Select,
SelectOption,
SelectVariant,
} from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
import {
ACTIVATION_KEYS_URL,
CDN_PROD_URL,
CDN_STAGE_URL,
} from '../../../../constants';
import ManageKeysButton from './components/ManageKeysButton';
import PopoverActivation from './components/PopoverActivation';
import { CDN_PROD_URL, CDN_STAGE_URL } from '../../../../constants';
import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
import {
useListActivationKeysQuery,
@ -38,67 +33,6 @@ import {
import { useGetEnvironment } from '../../../../Utilities/useGetEnvironment';
import { generateRandomId } from '../../utilities/generateRandomId';
export const PopoverActivation = () => {
const [orgId, setOrgId] = useState<string | undefined>(undefined);
const { auth } = useChrome();
useEffect(() => {
(async () => {
const userData = await auth?.getUser();
const id = userData?.identity?.internal?.org_id;
setOrgId(id);
})();
});
return (
<Popover
hasAutoWidth
maxWidth="35rem"
bodyContent={
<TextContent>
<Text>
Activation keys enable you to register a system with appropriate
subscriptions, system purpose, and repositories attached.
</Text>
<Text>
If using an activation key with command line registration, you must
provide your organization&apos;s ID.
</Text>
{orgId ? (
<Text>Your organization&apos;s ID is {orgId}</Text>
) : (
<Spinner size="md" />
)}
</TextContent>
}
>
<Button
variant="plain"
aria-label="Activation key popover"
aria-describedby="subscription-activation-key"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>
</Popover>
);
};
const ManageKeysButton = () => {
return (
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={ACTIVATION_KEYS_URL}
>
Activation keys page
</Button>
);
};
const ActivationKeysList = () => {
const dispatch = useAppDispatch();

24
src/Components/CreateImageWizard/steps/Registration/components/ManageKeysButton.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import { Button } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { ACTIVATION_KEYS_URL } from '../../../../../constants';
const ManageKeysButton = () => {
return (
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={ACTIVATION_KEYS_URL}
>
Activation keys page
</Button>
);
};
export default ManageKeysButton;

59
src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx Normal file
View file

@ -0,0 +1,59 @@
import React, { useEffect, useState } from 'react';
import {
Button,
Popover,
Spinner,
Text,
TextContent,
} from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
const PopoverActivation = () => {
const { auth } = useChrome();
const [orgId, setOrgId] = useState<string | undefined>(undefined);
useEffect(() => {
(async () => {
const userData = await auth?.getUser();
const id = userData?.identity?.internal?.org_id;
setOrgId(id);
})();
});
return (
<Popover
hasAutoWidth
maxWidth="35rem"
bodyContent={
<TextContent>
<Text>
Activation keys enable you to register a system with appropriate
subscriptions, system purpose, and repositories attached.
</Text>
<Text>
If using an activation key with command line registration, you must
provide your organization&apos;s ID.
</Text>
{orgId ? (
<Text>Your organization&apos;s ID is {orgId}</Text>
) : (
<Spinner size="md" />
)}
</TextContent>
}
>
<Button
variant="plain"
aria-label="Activation key popover"
aria-describedby="subscription-activation-key"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>
</Popover>
);
};
export default PopoverActivation;

2
src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
View file

@ -89,7 +89,7 @@ import {
} from '../FileSystem/FileSystemTable';
import { MajorReleasesLifecyclesChart } from '../ImageOutput/ReleaseLifecycle';
import OscapProfileInformation from '../Oscap/components/OscapProfileInformation';
import { PopoverActivation } from '../Registration/ActivationKeysList';
import PopoverActivation from '../Registration/components/PopoverActivation';
const ExpirationWarning = () => {
return (