From 2bf3d709a5b3feeac2728dbda3290b516c1625a8 Mon Sep 17 00:00:00 2001 From: Alejandro Visiedo Date: Sun, 1 Oct 2023 16:13:10 +0200 Subject: [PATCH 1/5] HMS-2696 fix: align default page with mock-ups Update the default content page to be aligned with the current state of the mocks-ups. Signed-off-by: Alejandro Visiedo --- src/Routes/DefaultPage/DefaultPage.scss | 4 --- src/Routes/DefaultPage/DefaultPage.tsx | 41 ++++++++++++++++--------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/Routes/DefaultPage/DefaultPage.scss b/src/Routes/DefaultPage/DefaultPage.scss index 5624387..acd9576 100644 --- a/src/Routes/DefaultPage/DefaultPage.scss +++ b/src/Routes/DefaultPage/DefaultPage.scss @@ -1,5 +1 @@ @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables'; - -.empty-state-body-content { - margin-bottom: $ins-margin; -} diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx index bb41404..a818229 100644 --- a/src/Routes/DefaultPage/DefaultPage.tsx +++ b/src/Routes/DefaultPage/DefaultPage.tsx @@ -51,6 +51,8 @@ const Header = () => { }; const EmptyContent = () => { + // FIXME Update this link in the future + const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893'; const navigate = useNavigate(); const handleOpenWizard = () => { @@ -62,21 +64,34 @@ const EmptyContent = () => {
- - - No domains + <RegistryIcon className="pf-u-color-200" size="xl" /> + <Title headingLevel="h2" size="lg" className="pf-u-pt-sm"> + No directory and domain services registered - - To specify which existing access controls can be -
leveraged for hosts launched through the console, you -
must first register your domain(s). As part of that -
process you will be required to SSO into your server(s) -
and install packages via CLI. + + Use access controls from your existing IdM hosts in your cloud +
environment*. To get started, register a service. + + + + + + - - + + *Directory and domain services are currently available only for Red Hat IdM and IPA deployments. @@ -205,10 +220,6 @@ const DefaultPage = () => { const [perPage] = useState(10); const [offset, setOffset] = useState(0); - useEffect(() => { - insights?.chrome?.appAction?.('default-page'); - }, []); - console.log('INFO:DefaultPage render'); useEffect(() => { From ed10581191b9051bc3e64bcc9576f4d860cd2548 Mon Sep 17 00:00:00 2001 From: Alejandro Visiedo Date: Sun, 1 Oct 2023 16:46:17 +0200 Subject: [PATCH 2/5] HMS-2667 fix: align wizard page 1 Align the preparation wizard page with what is defined in the mock-ups. Signed-off-by: Alejandro Visiedo --- src/AppContext.tsx | 42 +++- src/AppEntry.tsx | 31 ++- .../PagePreparation/PagePreparation.scss | 8 - .../PagePreparation/PagePreparation.tsx | 194 ++++++++++-------- src/Routes/WizardPage/WizardPage.tsx | 115 ++++++++--- 5 files changed, 268 insertions(+), 122 deletions(-) diff --git a/src/AppContext.tsx b/src/AppContext.tsx index ed5c41b..0d0a559 100644 --- a/src/AppContext.tsx +++ b/src/AppContext.tsx @@ -1,20 +1,50 @@ import { createContext } from 'react'; import { Domain } from './Api'; +/** + * It represents the application context so common events and properties + * are shared for many components, making their values accessible. + * @public + */ export interface IAppContext { + /** Represent the current list of domains to be displayed in the listDomains view. */ domains: Domain[]; + /** Callback to set the value of `domains`. */ setDomains: (domains: Domain[]) => void; - // wizardDomain?: Domain; - // setWizardDomain: (domain?: Domain) => void; + /** Encapsulates the context related with the wizard. */ + wizard: { + /** Retrieve the current token, required to register a domain. */ + getToken: () => string; + /** Set the value of the token. */ + setToken: (value: string) => void; + /** Get the ephemeral domain state that manage the wizard. */ + getDomain: () => Domain; + /** Set the ephemeral domain information. */ + setDomain: (value: Domain) => void; + }; } +/** + * Represent the application context. + * @public + */ export const AppContext = createContext({ domains: [], setDomains: (domains: Domain[]) => { throw new Error('Function "setDomains" not implemented: domains=' + domains); }, - // wizardDomain: undefined, - // setWizardDomain: (domain?: Domain) => { - // throw new Error('Function "setWizardDomain" not implemented: domain=' + domain); - // }, + wizard: { + getToken: (): string => { + return ''; + }, + setToken: (value: string) => { + throw new Error('Function "setToken" not implemented: value=' + value); + }, + getDomain: (): Domain => { + return {} as Domain; + }, + setDomain: (value: Domain) => { + throw new Error('Function "setDomain" not implemented: value=' + value); + }, + }, }); diff --git a/src/AppEntry.tsx b/src/AppEntry.tsx index 8bf2bf4..4fe8379 100644 --- a/src/AppEntry.tsx +++ b/src/AppEntry.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import { Provider } from 'react-redux'; import { init } from './store'; @@ -9,14 +9,41 @@ import { AppContext } from './AppContext'; import { Domain } from './Api'; const AppEntry = () => { + const appContext = useContext(AppContext); const [domains, setDomains] = useState([]); + const [wizardToken, setWizardToken] = useState(''); + const [wizardDomain, setWizardDomain] = useState({} as Domain); const cbSetDomains = (domains: Domain[]) => { + appContext.domains = domains; setDomains(domains); }; + const cbGetWizardToken = (): string => { + return wizardToken; + }; + const cbSetWizardToken = (value: string) => { + setWizardToken(value); + }; + const cbGetWizardDomain = (): Domain => { + return wizardDomain; + }; + const cbSetWizardDomain = (value: Domain) => { + setWizardDomain(value); + }; return ( - + diff --git a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.scss b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.scss index 219c002..acd9576 100644 --- a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.scss +++ b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.scss @@ -1,9 +1 @@ @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables'; - -.domain-type-select { - width: 50%; -} - -.domain-item-margin-left { - margin-left: 16px; -} diff --git a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx index 511024a..d340d19 100644 --- a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx +++ b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx @@ -1,26 +1,81 @@ -import React from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import { Button, ClipboardCopy, Form, FormGroup, Icon, Select, SelectOption, Stack, TextContent } from '@patternfly/react-core'; +import { Button, ClipboardCopy, Form, FormGroup, Icon, Select, SelectOption, TextContent, Title } from '@patternfly/react-core'; import './PagePreparation.scss'; +import { DomainType, ResourcesApiFactory } from '../../../../Api'; +import { AppContext, IAppContext } from '../../../../AppContext'; -const PagePreparation: React.FC = () => { - // TODO Update links - const firewallConfigurationLink = - 'https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/configuring_and_managing_networking/using-and-configuring-firewalld_configuring-and-managing-networking'; - const cloudProviderConfigurationLink = - 'https://access.redhat.com/documentation/es-es/red_hat_subscription_management/2023/html-single/red_hat_cloud_access_reference_guide/index'; - const networkConfigurationLink = 'https://www.redhat.com/sysadmin/network-interface-linux'; - const installServerPackagesLink = 'https://freeipa.org/page/Quick_Start_Guide'; +/** Represent the properties for PagePreparation component. */ +interface PagePreparationProps { + token?: string; + onToken?: (token: string, domain_id: string, expiration: number) => void; +} + +/** + * This page provide information and links to prepare the rhel-idm + * servers before the user could proceed to the registration process. + * @param props provide the token value and the onToken event to + * notify when it is created. + * @returns Return the view to inform the user how to prepare for + * the domain registration. + * @public + * @see {@link PagePreparationProps} to know about the properties. + * @see {@link WizardPage} to know about the parent component. + */ +const PagePreparation = (props: PagePreparationProps) => { + // FIXME Update the target link when it is known + const installServerPackagesLink = 'https://duckduckgo.com/?q=freeipa+prerequisites'; + // FIXME Update the target link when it is known + const prerequisitesLink = 'https://www.google.com?q=rhel-idm+pre-requisites'; // States - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const appContext = useContext(AppContext); + + const base_url = '/api/idmsvc/v1'; + const resources_api = ResourcesApiFactory(undefined, base_url, undefined); + + const token = appContext.wizard.getToken(); + const domain = appContext.wizard.getDomain(); + const domain_id = domain.domain_id ? domain.domain_id : ''; + + /** + * side effect to retrieve a token in the background. + * TODO When more than one type of domain, this callback will + * invoke from 'onRegisterDomainTypeSelect' event. + */ + useEffect(() => { + if (token != '' && domain_id != '') { + return; + } + // NOTE await and async cannot be used directly because EffectCallback cannot be a Promise + resources_api + .createDomainToken({ domain_type: 'rhel-idm' }, undefined, undefined) + .then((value) => { + appContext.wizard.setToken(value.data.domain_token); + const domain_id = value.data.domain_id; + const domain_name = 'My domain'; + const domain_type = value.data.domain_type; + const token = value.data.domain_token; + const expiration = value.data.expiration; + appContext.wizard.setDomain({ + domain_id: domain_id, + domain_name: domain_name, + domain_type: domain_type, + }); + props.onToken?.(token, domain_id, expiration); + }) + .catch((reason) => { + // FIXME handle the error here + console.log('error creating the token by createDomainToken: ' + reason); + }); + }, [token, domain_id]); - // hooks const onRegisterDomainTypeSelect = () => { - // TODO Not implemented - console.debug('onRegisterDomainTypeSelect in WizardPage'); + // TODO Not implemented, currently only support rhel-idm + console.debug('PagePreparation.onRegisterDomainTypeSelect in WizardPage'); return; }; @@ -30,29 +85,29 @@ const PagePreparation: React.FC = () => { const domainOptions = [ { - value: 'rhel-idm', - title: 'Red Hat Enterprise Linux IdM/IPA', + value: 'rhel-idm' as DomainType, + title: 'RHEL IdM (IPA)', }, ]; return ( - + <> + Preparation for your directory and domain service
{ - console.debug('onSubmit WizardPage' + String(value)); + console.debug('TODO onSubmit WizardPage' + String(value)); }} > - - - Only Red Hat Linux IdM/IPA are currently supported. + {' '} + Only RHEL IdM (IPA) are currently supported. } > @@ -63,7 +118,7 @@ const PagePreparation: React.FC = () => { onSelect={onRegisterDomainTypeSelect} // onOpenChange={(isOpen) => setIsOpen(isOpen)} onToggle={onToggleClick} - className="domain-type-select" + className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl" > {domainOptions.map((option) => ( @@ -72,57 +127,10 @@ const PagePreparation: React.FC = () => { ))} - - - There are prerequisites that must be completed to create and use security for Red Hat Linux IdM/IPA. If any prerequisites are already in - place, please skip to the next step: - - -
- -
- -
- - 4. Verify wether or not the package is present on your server(st) with this command: - - dnf list installed ipa-hcc-server - - - If the package is not present on your server(s), follow these steps:{' '} + +
    +
  1. + Complete the{' '} +
    2. +
  2. + Verify whether or not the package is present on your server(s) with this command: - dnf copr enable copr.devel.redhat.com/cheimes/ipa-hcc && dnf install ipa-hcc-server + dnf list installed ipa-hcc-server - The package must be installed on at least one IPA server. For redundency, the package should be installed on two or more IPA servers, - possibly all IPA servers. - - + + If the package is not present on your server(s), follow these{' '} + + + dnf copr enable copr.devel.redhat.com/cheimes/ipa-hcc && dnf install ipa-hcc-server + + The package must be installed on at least one IPA server. For redundency, the package should be installed on two or more IPA servers, + possibly all IPA servers. + +
    3. +
-
+ ); }; diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx index a8edb05..7699ed1 100644 --- a/src/Routes/WizardPage/WizardPage.tsx +++ b/src/Routes/WizardPage/WizardPage.tsx @@ -1,13 +1,20 @@ -import React, { useEffect, useState } from 'react'; +/** + * This library implement the WizardPage. + * + * The goal is provide the steps to register and add + * a new domain service. + */ +import React, { useContext, useState } from 'react'; import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; -import { Button, Page, PageSection, PageSectionTypes, PageSectionVariants, Wizard } from '@patternfly/react-core'; +import { Button, Page, PageSection, PageSectionTypes, PageSectionVariants, Wizard, WizardStep } from '@patternfly/react-core'; import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader'; import './WizardPage.scss'; import { useNavigate } from 'react-router-dom'; -import { Domain } from '../../Api/api'; +import { Domain, ResourcesApiFactory } from '../../Api/api'; +import { AppContext } from '../../AppContext'; // Lazy load for the wizard pages const PagePreparation = React.lazy(() => import('./Components/PagePreparation/PagePreparation')); @@ -33,57 +40,119 @@ const initialDomain: Domain = { /** * Wizard page to register a new domain into the service. + * @see {@link PagePreparation} about the preparation page. + * @see {@link PageServiceRegistration} about the registration page. + * @see {@link PageServiceDetails} about the details page. + * @see {@link PageReview} about the review page. */ -const WizardPage: React.FC = () => { +const WizardPage = () => { + const base_url = '/api/idmsvc/v1'; + const resources_api = ResourcesApiFactory(undefined, base_url, undefined); + const appContext = useContext(AppContext); + const domain = appContext.wizard.getDomain(); const navigate = useNavigate(); - // TODO Update the initial state into the context so that - // state can be read/write from the different pages - // into the wizard process. - const [data] = useState(initialDomain); - - useEffect(() => { - insights?.chrome?.appAction?.('default-page'); - }, []); - // FIXME Update the URL with the location for docs const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893'; - // Event when Close button is clicked + /** Event triggered when Close button is clicked. */ const onCloseClick = () => { - // TODO Not implemented - // What happens on Cancel? (see documentation) + // FIXME A few things pending: + // - Mocal confirmation + // - Confirm => + // - if not registered, dismiss wizard + // - else => DELETE /domains/:domain_id + // - Cancel or close model => Do not dismiss wizard navigate('/domains'); }; + /** Event triggered when Back button is clicked. */ + const onPreviousPage = ( + _newStep: { id?: string | number; name: React.ReactNode }, + _prevStep: { prevId?: string | number; prevName: React.ReactNode } + ) => { + console.log('onPreviousPage fired'); + return; + }; + + /** Event triggered when a specific page is clicked. */ + const onGoToStep = ( + _newStep: { id?: string | number; name: React.ReactNode }, + _prevStep: { prevId?: string | number; prevName: React.ReactNode } + ) => { + console.log('onGoToStep fired'); + return; + }; + + /** Event triggered when the Next button is clicked. */ + const onNextPage = async ({ id }: WizardStep) => { + // FIXME Delete log + console.log('onNextPage fired for id=' + id); + if (id === undefined) { + return; + } + if (typeof id === 'string') { + const [, orderIndex] = id.split('-'); + id = parseInt(orderIndex); + } + }; + + const initCanJumpPage1 = true; + const initCanJumpPage2 = initCanJumpPage1 && domain.domain_id != '' && appContext.wizard.getToken() != ''; + const initCanJumpPage3 = initCanJumpPage2; + const initCanJumpPage4 = initCanJumpPage3 && domain.title !== undefined && domain.title.length > 0; + + const [canJumpPage1] = useState(initCanJumpPage1); + const [canJumpPage2, setCanJumpPage2] = useState(initCanJumpPage2); + const [canJumpPage3, setCanJumpPage3] = useState(initCanJumpPage3); + const [canJumpPage4, setCanJumpPage4] = useState(initCanJumpPage4); + + const onToken = (token: string, domain_id: string, expiration: number) => { + console.log('WizardPage.OnToken fired: token=' + token + '; domain_id=' + domain_id + '; expiration=' + expiration); + if (token != '') { + setCanJumpPage2(true); + } else { + setCanJumpPage2(false); + } + }; + + /** Configure the wizard pages. */ const steps = [ { // This page only display the pre-requisites + id: 1, name: 'Preparation', - component: , + component: , + canJumpTo: canJumpPage1, }, { + id: 2, name: 'Service registration', // FIXME Pass here the 'registering.domain' field from the context // FIXME Pass here the 'registering.token' field from the context - component: , + component: , + canJumpTo: canJumpPage2, }, { + id: 3, name: 'Service details', // FIXME Pass here the 'registering.domain' field from the context - component: , + component: , + canJumpTo: canJumpPage3, }, { + id: 4, name: 'Review', // FIXME Pass here the 'registering.domain' field from the context - component: , + component: , + canJumpTo: canJumpPage4, }, ]; const title = 'Register directory and domain service'; return ( - + <> @@ -98,7 +167,7 @@ const WizardPage: React.FC = () => { iconPosition="right" href={linkLearnMoreAbout} > - Learn more about the directory and domain services. + Learn more about the directory and domain services{' '}

@@ -106,7 +175,7 @@ const WizardPage: React.FC = () => { - + ); }; From fe76d127fb4593b61c1649a71a9d18f6f752a3af Mon Sep 17 00:00:00 2001 From: Alejandro Visiedo Date: Thu, 5 Oct 2023 05:14:09 +0200 Subject: [PATCH 3/5] HMS-2667 fix: add li and top padding Move into a third point for the ordered list to collect there the step to install the package if it were not installed. Signed-off-by: Alejandro Visiedo --- .../WizardPage/Components/PagePreparation/PagePreparation.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx index d340d19..a296657 100644 --- a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx +++ b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx @@ -148,6 +148,8 @@ const PagePreparation = (props: PagePreparationProps) => { dnf list installed ipa-hcc-server + +
  • If the package is not present on your server(s), follow these{' '} + + )} + {props.state == 'waiting' && <>} + {props.state == 'timed-out' && ( + <> + + + )} + {props.state == 'not-found' && ( + <> + + + )} + {props.state == 'completed' && ( + <> + + + )} + + ); +}; + +/* VerifyRegistry component */ + +interface VerifyRegistryProps { + state: VerifyState; + uuid: string; + onChange: (newState: VerifyState, domain?: Domain) => void; +} + +const VerifyRegistry = (props: VerifyRegistryProps) => { + const [isPolling, setIsPolling] = useState(true); + + const base_url = '/api/idmsvc/v1'; + const resources_api = ResourcesApiFactory(undefined, base_url, undefined); + const timeout = 3 * 1000; // Seconds + + /** TODO Extract this effect in a hook to simplify this code */ + useEffect(() => { + let intervalId: NodeJS.Timeout | null = null; + let elapsedTime = 0; + let newState: VerifyState = props.state; + let domain: Domain | undefined = undefined; + const stopPolling = (state: VerifyState, domain?: Domain) => { + if (intervalId) { + clearInterval(intervalId); + } + intervalId = null; + setIsPolling(false); + if (state === 'completed') { + props.onChange(state, domain); + } else { + props.onChange(state); + } + }; + if (!isPolling) { + return; + } + const fetchData = async () => { + try { + const response = await resources_api.readDomain(props.uuid, undefined, undefined); + newState = 'completed'; + domain = response.data; + newState = 'completed'; + } catch (error) { + const axiosError = error as AxiosError; + switch (axiosError.code) { + case AxiosError.ECONNABORTED: + case AxiosError.ERR_BAD_OPTION: + case AxiosError.ERR_BAD_OPTION_VALUE: + case AxiosError.ERR_CANCELED: + newState = 'waiting'; + break; + case AxiosError.ERR_DEPRECATED: + case AxiosError.ERR_FR_TOO_MANY_REDIRECTS: + case AxiosError.ERR_NETWORK: + case AxiosError.ETIMEDOUT: + newState = 'timed-out'; + break; + case AxiosError.ERR_BAD_REQUEST: + case AxiosError.ERR_BAD_RESPONSE: + default: + newState = 'waiting'; + break; + } + } + + if (newState !== undefined && newState !== props.state) { + switch (newState) { + case 'timed-out': + case 'waiting': + props.onChange(newState); + // setState(newState); + break; + default: + if (elapsedTime >= timeout) { + newState = 'timed-out'; + stopPolling(newState); + } + break; + case 'completed': + stopPolling(newState, domain); + break; + } + } + elapsedTime += 1000; // Increase elapsed time by 1 second + if (elapsedTime > timeout) { + newState = 'timed-out'; + stopPolling(newState); + } + }; + + fetchData(); + intervalId = setInterval(fetchData, 1000); + + return () => { + if (intervalId) { + clearInterval(intervalId); + } + }; + }, [isPolling]); + + const onRetry = () => { + props.onChange('initial'); + // setState('initial'); + setIsPolling(true); + }; + + return ( + + + + + + + + + + + + + + + + + ); +}; + +// VerifyRegistry.defaultProps = defaultVerifyRegistryProps; + +export default VerifyRegistry; From fe9551ecd2f8f434e548842f1c6a8635297cb866 Mon Sep 17 00:00:00 2001 From: Alejandro Visiedo Date: Sun, 1 Oct 2023 17:47:14 +0200 Subject: [PATCH 5/5] HMS-2590 fix: align wizard page 2 and 3 Align the appearance for the pages 2 and 3, add the VerifyRegistry component to the page 2, and update generated api code. Signed-off-by: Alejandro Visiedo --- api | 2 +- src/Api/api.ts | 212 +++++++++--------- src/Routes/DefaultPage/DefaultPage.tsx | 9 +- .../PageServiceDetails/PageServiceDetails.tsx | 109 ++++++--- .../PageServiceRegistration.tsx | 127 +++++++---- src/Routes/WizardPage/WizardPage.tsx | 71 +++++- 6 files changed, 341 insertions(+), 189 deletions(-) diff --git a/api b/api index ac0c464..bd8f888 160000 --- a/api +++ b/api @@ -1 +1 @@ -Subproject commit ac0c464a6e650084f0d0f7bb73db6f47474f9b65 +Subproject commit bd8f8881dea3c2368002426b84130072e8f7a506 diff --git a/src/Api/api.ts b/src/Api/api.ts index e7f1441..fd04316 100644 --- a/src/Api/api.ts +++ b/src/Api/api.ts @@ -970,56 +970,6 @@ export const ActionsApiAxiosParamCreator = function (configuration?: Configurati localVarRequestOptions.headers = { ...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers }; localVarRequestOptions.data = serializeDataIfNeeded(updateDomainAgentRequest, localVarRequestOptions, configuration); - return { - url: toPathString(localVarUrlObj), - options: localVarRequestOptions, - }; - }, - /** - * Update the rhel-idm domain information. - * @summary Update domain information by user. - * @param {string} uuid The uuid that identify the domain. - * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. - * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. - * @param {*} [options] Override http request option. - * @throws {RequiredError} - */ - updateDomainUser: async ( - uuid: string, - updateDomainUserRequest: UpdateDomainUserRequest, - xRhInsightsRequestId?: string, - options: AxiosRequestConfig = {} - ): Promise => { - // verify required parameter 'uuid' is not null or undefined - assertParamExists('updateDomainUser', 'uuid', uuid); - // verify required parameter 'updateDomainUserRequest' is not null or undefined - assertParamExists('updateDomainUser', 'updateDomainUserRequest', updateDomainUserRequest); - const localVarPath = `/domains/{uuid}`.replace(`{${'uuid'}}`, encodeURIComponent(String(uuid))); - // use dummy base URL string because the URL constructor only accepts absolute URLs. - const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL); - let baseOptions; - if (configuration) { - baseOptions = configuration.baseOptions; - } - - const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options }; - const localVarHeaderParameter = {} as any; - const localVarQueryParameter = {} as any; - - // authentication x-rh-identity required - await setApiKeyToObject(localVarHeaderParameter, 'X-Rh-Identity', configuration); - - if (xRhInsightsRequestId != null) { - localVarHeaderParameter['X-Rh-Insights-Request-Id'] = String(xRhInsightsRequestId); - } - - localVarHeaderParameter['Content-Type'] = 'application/json'; - - setSearchParams(localVarUrlObj, localVarQueryParameter); - let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {}; - localVarRequestOptions.headers = { ...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers }; - localVarRequestOptions.data = serializeDataIfNeeded(updateDomainUserRequest, localVarRequestOptions, configuration); - return { url: toPathString(localVarUrlObj), options: localVarRequestOptions, @@ -1081,24 +1031,6 @@ export const ActionsApiFp = function (configuration?: Configuration) { ); return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); }, - /** - * Update the rhel-idm domain information. - * @summary Update domain information by user. - * @param {string} uuid The uuid that identify the domain. - * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. - * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. - * @param {*} [options] Override http request option. - * @throws {RequiredError} - */ - async updateDomainUser( - uuid: string, - updateDomainUserRequest: UpdateDomainUserRequest, - xRhInsightsRequestId?: string, - options?: AxiosRequestConfig - ): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { - const localVarAxiosArgs = await localVarAxiosParamCreator.updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options); - return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); - }, }; }; @@ -1149,23 +1081,6 @@ export const ActionsApiFactory = function (configuration?: Configuration, basePa .updateDomainAgent(uuid, xRhIdmVersion, updateDomainAgentRequest, xRhInsightsRequestId, options) .then((request) => request(axios, basePath)); }, - /** - * Update the rhel-idm domain information. - * @summary Update domain information by user. - * @param {string} uuid The uuid that identify the domain. - * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. - * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. - * @param {*} [options] Override http request option. - * @throws {RequiredError} - */ - updateDomainUser( - uuid: string, - updateDomainUserRequest: UpdateDomainUserRequest, - xRhInsightsRequestId?: string, - options?: any - ): AxiosPromise { - return localVarFp.updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options).then((request) => request(axios, basePath)); - }, }; }; @@ -1215,27 +1130,6 @@ export class ActionsApi extends BaseAPI { .updateDomainAgent(uuid, xRhIdmVersion, updateDomainAgentRequest, xRhInsightsRequestId, options) .then((request) => request(this.axios, this.basePath)); } - - /** - * Update the rhel-idm domain information. - * @summary Update domain information by user. - * @param {string} uuid The uuid that identify the domain. - * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. - * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. - * @param {*} [options] Override http request option. - * @throws {RequiredError} - * @memberof ActionsApi - */ - public updateDomainUser( - uuid: string, - updateDomainUserRequest: UpdateDomainUserRequest, - xRhInsightsRequestId?: string, - options?: AxiosRequestConfig - ) { - return ActionsApiFp(this.configuration) - .updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options) - .then((request) => request(this.axios, this.basePath)); - } } /** @@ -1510,6 +1404,56 @@ export const ResourcesApiAxiosParamCreator = function (configuration?: Configura localVarRequestOptions.headers = { ...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers }; localVarRequestOptions.data = serializeDataIfNeeded(registerDomainRequest, localVarRequestOptions, configuration); + return { + url: toPathString(localVarUrlObj), + options: localVarRequestOptions, + }; + }, + /** + * Update the rhel-idm domain information. + * @summary Update domain information by user. + * @param {string} uuid The uuid that identify the domain. + * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. + * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + updateDomainUser: async ( + uuid: string, + updateDomainUserRequest: UpdateDomainUserRequest, + xRhInsightsRequestId?: string, + options: AxiosRequestConfig = {} + ): Promise => { + // verify required parameter 'uuid' is not null or undefined + assertParamExists('updateDomainUser', 'uuid', uuid); + // verify required parameter 'updateDomainUserRequest' is not null or undefined + assertParamExists('updateDomainUser', 'updateDomainUserRequest', updateDomainUserRequest); + const localVarPath = `/domains/{uuid}`.replace(`{${'uuid'}}`, encodeURIComponent(String(uuid))); + // use dummy base URL string because the URL constructor only accepts absolute URLs. + const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL); + let baseOptions; + if (configuration) { + baseOptions = configuration.baseOptions; + } + + const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options }; + const localVarHeaderParameter = {} as any; + const localVarQueryParameter = {} as any; + + // authentication x-rh-identity required + await setApiKeyToObject(localVarHeaderParameter, 'X-Rh-Identity', configuration); + + if (xRhInsightsRequestId != null) { + localVarHeaderParameter['X-Rh-Insights-Request-Id'] = String(xRhInsightsRequestId); + } + + localVarHeaderParameter['Content-Type'] = 'application/json'; + + setSearchParams(localVarUrlObj, localVarQueryParameter); + let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {}; + localVarRequestOptions.headers = { ...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers }; + localVarRequestOptions.data = serializeDataIfNeeded(updateDomainUserRequest, localVarRequestOptions, configuration); + return { url: toPathString(localVarUrlObj), options: localVarRequestOptions, @@ -1631,6 +1575,24 @@ export const ResourcesApiFp = function (configuration?: Configuration) { ); return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); }, + /** + * Update the rhel-idm domain information. + * @summary Update domain information by user. + * @param {string} uuid The uuid that identify the domain. + * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. + * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + async updateDomainUser( + uuid: string, + updateDomainUserRequest: UpdateDomainUserRequest, + xRhInsightsRequestId?: string, + options?: AxiosRequestConfig + ): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { + const localVarAxiosArgs = await localVarAxiosParamCreator.updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options); + return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); + }, }; }; @@ -1717,6 +1679,23 @@ export const ResourcesApiFactory = function (configuration?: Configuration, base .registerDomain(xRhIdmRegistrationToken, xRhIdmVersion, registerDomainRequest, xRhInsightsRequestId, options) .then((request) => request(axios, basePath)); }, + /** + * Update the rhel-idm domain information. + * @summary Update domain information by user. + * @param {string} uuid The uuid that identify the domain. + * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. + * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + updateDomainUser( + uuid: string, + updateDomainUserRequest: UpdateDomainUserRequest, + xRhInsightsRequestId?: string, + options?: any + ): AxiosPromise { + return localVarFp.updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options).then((request) => request(axios, basePath)); + }, }; }; @@ -1824,4 +1803,25 @@ export class ResourcesApi extends BaseAPI { .registerDomain(xRhIdmRegistrationToken, xRhIdmVersion, registerDomainRequest, xRhInsightsRequestId, options) .then((request) => request(this.axios, this.basePath)); } + + /** + * Update the rhel-idm domain information. + * @summary Update domain information by user. + * @param {string} uuid The uuid that identify the domain. + * @param {UpdateDomainUserRequest} updateDomainUserRequest Information for an IPA domain so it is updated from the ipa-hcc agent. + * @param {string} [xRhInsightsRequestId] Request id for distributed tracing. + * @param {*} [options] Override http request option. + * @throws {RequiredError} + * @memberof ResourcesApi + */ + public updateDomainUser( + uuid: string, + updateDomainUserRequest: UpdateDomainUserRequest, + xRhInsightsRequestId?: string, + options?: AxiosRequestConfig + ) { + return ResourcesApiFp(this.configuration) + .updateDomainUser(uuid, updateDomainUserRequest, xRhInsightsRequestId, options) + .then((request) => request(this.axios, this.basePath)); + } } diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx index a818229..a124899 100644 --- a/src/Routes/DefaultPage/DefaultPage.tsx +++ b/src/Routes/DefaultPage/DefaultPage.tsx @@ -27,7 +27,7 @@ import './DefaultPage.scss'; import Section from '@redhat-cloud-services/frontend-components/Section'; import { Domain, ResourcesApiFactory } from '../../Api/api'; import { DomainList } from '../../Components/DomainList/DomainList'; -import { AppContext } from '../../AppContext'; +import { AppContext, IAppContext } from '../../AppContext'; // const SampleComponent = lazy(() => import('../../Components/SampleComponent/sample-component')); @@ -54,8 +54,12 @@ const EmptyContent = () => { // FIXME Update this link in the future const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893'; const navigate = useNavigate(); + const appContext = useContext(AppContext); const handleOpenWizard = () => { + appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain); + appContext.wizard.setToken(''); + appContext.wizard.setRegisteredStatus('initial'); navigate('/domains/wizard', { replace: true }); }; @@ -149,6 +153,9 @@ const ListContent = () => { }, [page, perPage, offset]); const handleOpenWizard = () => { + appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain); + appContext.wizard.setRegisteredStatus('initial'); + appContext.wizard.setToken(''); navigate('/domains/wizard', { replace: true }); }; diff --git a/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx b/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx index 3b9e8cf..23a39da 100644 --- a/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx +++ b/src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx @@ -1,18 +1,68 @@ import React, { useState } from 'react'; -import { Form, FormGroup, TextArea, Title, Tooltip } from '@patternfly/react-core'; +import { Form, FormGroup, Icon, TextArea, Title, Tooltip } from '@patternfly/react-core'; import { TextInput } from '@patternfly/react-core'; -import { Domain } from '../../../../Api/api'; -import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; import './PageServiceDetails.scss'; import { Switch } from '@patternfly/react-core'; -const PageServiceDetails: React.FC<{ data: Domain }> = (props) => { - const [data, setData] = useState(props.data); - const [isAutoEnrollmentEnabled, setIsAutoEnrollmentEnabled] = React.useState(true); +/** + * Represent the properties accepted by the PageServiceDetails + * component. + * @see {@link PageServiceDetails} + */ +interface PageServiceDetailsProps { + /** The title that represent the domain. */ + title?: string; + /** The long description for the domain. */ + description?: string; + /** Flag to enable / disable the auto enrollment feature. */ + autoEnrollmentEnabled?: boolean; + + /** Event fired when the title change. */ + onChangeTitle?: (value: string) => void; + /** Event fired when the description change. */ + onChangeDescription?: (value: string) => void; + /** Event fired when the switch for auto-enrollment change. */ + onChangeAutoEnrollment?: (value: boolean) => void; +} + +/** + * It provides fields to the user to customize the values such as + * the title, description and if the domain will be avialable for + * auto-enrollment. + * @param props the properties received from the parent component. + * @returns return the view for the Service Details wizard page. + * @public + * @see {@link PageServiceDetailsProps} about the properties. + * @see {@link WizardPage} to know about the parent component. + */ +const PageServiceDetails = (props: PageServiceDetailsProps) => { + const [title, setTitle] = useState(props.title ? props.title : ''); + const [description, setDescription] = useState(props.description ? props.description : ''); + const [isAutoEnrollmentEnabled, setIsAutoEnrollmentEnabled] = React.useState( + props.autoEnrollmentEnabled ? props.autoEnrollmentEnabled : false + ); const onChangeAutoEnrollment = (checked: boolean) => { setIsAutoEnrollmentEnabled(checked); + if (props.onChangeAutoEnrollment) { + props.onChangeAutoEnrollment(checked); + } + }; + + const onChangeTitle = (value: string, event: React.FormEvent) => { + setTitle(value); + if (props.onChangeTitle) { + props.onChangeTitle(value); + } + }; + + const onChangeDescription = (value: string, event: React.ChangeEvent) => { + setDescription(value); + if (props.onChangeDescription) { + props.onChangeDescription(value); + } }; const autoEnrollmentTooltipContent = isAutoEnrollmentEnabled @@ -20,15 +70,11 @@ const PageServiceDetails: React.FC<{ data: Domain }> = (props) => { : 'Disabling the option leaves the service registration intact, but does not make it available for the "Domain join on launch" feature within Image Builder. It can be enabled later in the "Register Directory and Domain Service" view.'; return ( - -
    { - console.debug('onSubmit WizardPage' + String(value)); - }} - > + <> + e.preventDefault()}> Service Details - + + className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl" + value={description} + onChange={onChangeDescription} + /> - Domain join on launch + Domain join on launch{' '} + + + + + } > - - - +
    -     + ); }; diff --git a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx index 34e640a..231580d 100644 --- a/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx +++ b/src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx @@ -1,59 +1,96 @@ -import React from 'react'; -// import { useDispatch } from 'react-redux'; -import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; -import { Alert, Button, ClipboardCopy, Form, FormGroup, TextContent } from '@patternfly/react-core'; +import React, { useState } from 'react'; +import { Alert, Button, ClipboardCopy, Flex, FlexItem, Form, TextContent, Title } from '@patternfly/react-core'; import './PageServiceRegistration.scss'; -import { Domain } from '../../../../Api/api'; +import VerifyRegistry, { VerifyState } from '../VerifyRegistry/VerifyRegistry'; +import { Domain } from '../../../../Api'; +/** + * Represents the properties accepted by the @{link PageServiceRegistration} component. + * @see @{link VerifyState} about the different states. + */ interface PageServiceRegistrationProp { - data?: Domain; - token?: string; + /** The uuid for the requested token. */ + uuid: string; + /** The token requested for the operation. */ + token: string; + /** Event fired when the registration state changes. */ + onVerify?: (value: VerifyState, data?: Domain) => void; } -const PageServiceRegistration: React.FC = (props) => { - // FIXME Delete this - const demoToken = 'F4ZWgmhUxcw.d2iqKLHa8281CM_1aknGLsBRFpwfoy3YkrTbLBIuEkM'; - const ipa_hcc_register_cmd = 'ipa-hcc register ' + demoToken; +/** + * Represent the page that provide the registration command and check + * when the registration happened from the user. + * @param props provide the uuid and token for the registration process. + * @returns the view for the page updated according the registration + * information. + * @see {@link PageServiceRegistrationProp} about the accepted properties. + * @see {@link WizardPage} about the parent component. + * @public + */ +const PageServiceRegistration = (props: PageServiceRegistrationProp) => { + // FIXME Update the URL with the location for docs + // const installServerPackagesLink = 'https://freeipa.org/page/Quick_Start_Guide'; + const [state, setState] = useState('initial'); + + // FIXME Clean-up when sure it is not needed + // const openInNewWindow = (url: string) => { + // window.open(url, '_blank'); + // }; + + // FIXME Clean-up when sure it is not needed + // const onInstallServerPackagesClick = () => { + // openInNewWindow(installServerPackagesLink); + // }; + + const ipa_hcc_register_cmd = 'ipa-hcc register ' + props.token; const alertTitle = 'Register your directory and domain service'; + // FIXME Update the URL with the location for docs - const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893'; + const linkLearnMoreAbout = 'https://www.google.es/search?q=freeipa+registering+a+domain+service'; + + const onChangeVerifyRegistry = (newState: VerifyState, domain?: Domain) => { + setState(newState); + if (props.onVerify) { + props.onVerify(newState, domain); + } + }; + + console.log('PageServiceRegistration: uuid=' + props.uuid + '; token=' + props.token); return ( - - - Completing this step registers your directory and domain service, and cannot be undone from the wizard.{' '} - {/* FIXME Q What is the better way to fix the top padding between the link and the text? */} -
    - -
    -     -
    { - console.debug('onSubmit WizardPage' + String(value)); - }} - > - -
      -
    1. - - To register your Red Hat IdM/IPA server with the Red Hat Hybrid Cloud Console, run the following command in your RHEL IdM (IPA) - server's terminal. - - - {ipa_hcc_register_cmd} - -
      2. -
    2. - Once the process have been completed, run a verification test. -
      3. -
    -     + <> + Register your directory and domain service + e.preventDefault()}> + + Completing this step registers your directory and domain service, and cannot be undone from the wizard.{' '} +
    + +
    +     +
      +
    1. + + To register your Red Hat IdM/IPA server with the Red Hat Hybrid Cloud Console, run the following command in your RHEL IdM (IPA) + server's terminal. + + + {ipa_hcc_register_cmd} + +
      2. +
    2. + Once the processes have been completed, run a verification test. +
      3. +
    - {/* TODO Add here the new VerifyRegistration component */} -     + + + + + + ); }; diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx index 7699ed1..781f3f8 100644 --- a/src/Routes/WizardPage/WizardPage.tsx +++ b/src/Routes/WizardPage/WizardPage.tsx @@ -15,6 +15,7 @@ import './WizardPage.scss'; import { useNavigate } from 'react-router-dom'; import { Domain, ResourcesApiFactory } from '../../Api/api'; import { AppContext } from '../../AppContext'; +import { VerifyState } from './Components/VerifyRegistry/VerifyRegistry'; // Lazy load for the wizard pages const PagePreparation = React.lazy(() => import('./Components/PagePreparation/PagePreparation')); @@ -95,11 +96,25 @@ const WizardPage = () => { const [, orderIndex] = id.split('-'); id = parseInt(orderIndex); } + if (id === 2) { + // FIXME Clean-up when the token is created into the page 1 + // try { + // const response = await resources_api.createDomainToken({ domain_type: 'rhel-idm' }, undefined, undefined); + // const newData = response.data; + // appContext.wizard.setToken(newData.domain_token); + // appContext.wizard.setUUID(newData.domain_id); + // } catch (error) { + // // TODO Add error hanlder + // console.log('error noNextPage: ' + error); + // appContext.wizard.setToken(''); + // appContext.wizard.setUUID(''); + // } + } }; const initCanJumpPage1 = true; const initCanJumpPage2 = initCanJumpPage1 && domain.domain_id != '' && appContext.wizard.getToken() != ''; - const initCanJumpPage3 = initCanJumpPage2; + const initCanJumpPage3 = initCanJumpPage2 && appContext.wizard.getRegisteredStatus() === 'completed'; const initCanJumpPage4 = initCanJumpPage3 && domain.title !== undefined && domain.title.length > 0; const [canJumpPage1] = useState(initCanJumpPage1); @@ -116,6 +131,35 @@ const WizardPage = () => { } }; + const onVerify = (value: VerifyState, data?: Domain) => { + appContext.wizard.setRegisteredStatus(value); + if (value === 'completed') { + if (data) { + appContext.wizard.setDomain(data); + } + setCanJumpPage3(true); + } else { + setCanJumpPage3(false); + } + }; + + const onChangeTitle = (value: string) => { + appContext.wizard.setDomain({ ...domain, title: value }); + if (value.length > 0) { + setCanJumpPage4(true); + } else { + setCanJumpPage4(false); + } + }; + + const onChangeDescription = (value: string) => { + appContext.wizard.setDomain({ ...domain, description: value }); + }; + + const onChangeAutoEnrollment = (value: boolean) => { + appContext.wizard.setDomain({ ...domain, auto_enrollment_enabled: value }); + }; + /** Configure the wizard pages. */ const steps = [ { @@ -128,16 +172,23 @@ const WizardPage = () => { { id: 2, name: 'Service registration', - // FIXME Pass here the 'registering.domain' field from the context - // FIXME Pass here the 'registering.token' field from the context - component: , + component: , canJumpTo: canJumpPage2, }, { id: 3, name: 'Service details', // FIXME Pass here the 'registering.domain' field from the context - component: , + component: ( + + ), canJumpTo: canJumpPage3, }, { @@ -172,7 +223,15 @@ const WizardPage = () => {

    - +