LandingPage/ImagesTable/Wizard: Remove all insights global calls

This commit replaces all calls to the insights.chrome global with calls
to the useChrome() hook (or the useGetEnvironment() custom hook that
wraps useChrome()).
This commit is contained in:
lucasgarfield 2023-04-26 16:40:54 +02:00 committed by Lucas Garfield
parent ef1d077c2e
commit 7bca4c7438
10 changed files with 55 additions and 98 deletions

View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal'; import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
import { useStore } from 'react-redux'; import { useStore } from 'react-redux';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';

View file

@ -302,7 +302,7 @@ const getPackageDescription = async (
}; };
// map the compose request object to the expected form state // map the compose request object to the expected form state
const requestToState = (composeRequest, distroInfo, isBeta) => { const requestToState = (composeRequest, distroInfo, isBeta, isProd) => {
if (composeRequest) { if (composeRequest) {
const imageRequest = composeRequest.image_requests[0]; const imageRequest = composeRequest.image_requests[0];
const uploadRequest = imageRequest.upload_request; const uploadRequest = imageRequest.upload_request;
@ -461,7 +461,7 @@ const requestToState = (composeRequest, distroInfo, isBeta) => {
formState['subscription-activation-key'] = subscription['activation-key']; formState['subscription-activation-key'] = subscription['activation-key'];
formState['subscription-organization-id'] = subscription.organization; formState['subscription-organization-id'] = subscription.organization;
if (insights.chrome.isProd()) { if (isProd) {
formState['subscription-server-url'] = 'subscription.rhsm.redhat.com'; formState['subscription-server-url'] = 'subscription.rhsm.redhat.com';
formState['subscription-base-url'] = 'https://cdn.redhat.com/'; formState['subscription-base-url'] = 'https://cdn.redhat.com/';
} else { } else {
@ -544,11 +544,16 @@ const CreateImageWizard = () => {
// This will occur if 'Recreate image' is clicked // This will occur if 'Recreate image' is clicked
const initialStep = compose?.request ? 'review' : undefined; const initialStep = compose?.request ? 'review' : undefined;
const { isBeta } = useGetEnvironment(); const { isBeta, isProd } = useGetEnvironment();
const awsTarget = isBeta() ? awsTargetBeta : awsTargetStable; const awsTarget = isBeta() ? awsTargetBeta : awsTargetStable;
const msAzureTarget = isBeta() ? msAzureTargetBeta : msAzureTargetStable; const msAzureTarget = isBeta() ? msAzureTargetBeta : msAzureTargetStable;
let initialState = requestToState(composeRequest, distroInfo, isBeta()); let initialState = requestToState(
composeRequest,
distroInfo,
isBeta(),
isProd()
);
const stepHistory = formStepHistory(composeRequest, isBeta()); const stepHistory = formStepHistory(composeRequest, isBeta());
initialState initialState

View file

@ -13,8 +13,10 @@ import {
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useGetActivationKeysQuery } from '../../../store/apiSlice'; import { useGetActivationKeysQuery } from '../../../store/apiSlice';
import { useGetEnvironment } from '../../../Utilities/useGetEnvironment';
const ActivationKeys = ({ label, isRequired, ...props }) => { const ActivationKeys = ({ label, isRequired, ...props }) => {
const { isProd } = useGetEnvironment();
const { change, getState } = useFormApi(); const { change, getState } = useFormApi();
const { input } = useFieldApi(props); const { input } = useFieldApi(props);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -31,7 +33,7 @@ const ActivationKeys = ({ label, isRequired, ...props }) => {
} = useGetActivationKeysQuery(); } = useGetActivationKeysQuery();
useEffect(() => { useEffect(() => {
if (insights.chrome.isProd()) { if (isProd()) {
change('subscription-server-url', 'subscription.rhsm.redhat.com'); change('subscription-server-url', 'subscription.rhsm.redhat.com');
change('subscription-base-url', 'https://cdn.redhat.com/'); change('subscription-base-url', 'https://cdn.redhat.com/');
} else { } else {

View file

@ -7,6 +7,7 @@ import {
TextContent, TextContent,
TextVariants, TextVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
import { import {
ContentList, ContentList,
@ -24,6 +25,7 @@ import {
import isRhel from '../../../Utilities/isRhel'; import isRhel from '../../../Utilities/isRhel';
const ReviewStep = () => { const ReviewStep = () => {
const { auth } = useChrome();
const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false); const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false);
const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false); const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false);
const [isExpandedFSC, setIsExpandedFSC] = useState(false); const [isExpandedFSC, setIsExpandedFSC] = useState(false);
@ -36,7 +38,7 @@ const ReviewStep = () => {
const registerSystem = getState()?.values?.['register-system']; const registerSystem = getState()?.values?.['register-system'];
if (registerSystem?.startsWith('register-now')) { if (registerSystem?.startsWith('register-now')) {
(async () => { (async () => {
const userData = await insights?.chrome?.auth?.getUser(); const userData = await auth?.getUser();
const id = userData?.identity?.internal?.org_id; const id = userData?.identity?.internal?.org_id;
change('subscription-organization-id', id); change('subscription-organization-id', id);
})(); })();

View file

@ -11,6 +11,7 @@ import {
Title, Title,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons'; import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
import StepTemplate from './stepTemplate'; import StepTemplate from './stepTemplate';
@ -18,10 +19,11 @@ import CustomButtons from '../formComponents/CustomButtons';
const PopoverActivation = () => { const PopoverActivation = () => {
const [orgId, setOrgId] = useState(null); const [orgId, setOrgId] = useState(null);
const { auth } = useChrome();
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const userData = await insights?.chrome?.auth?.getUser(); const userData = await auth?.getUser();
const id = userData?.identity?.internal?.org_id; const id = userData?.identity?.internal?.org_id;
setOrgId(id); setOrgId(id);
})(); })();

View file

@ -1,10 +1,10 @@
import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
export const useGetEnvironment = () => { export const useGetEnvironment = () => {
const { isBeta, getEnvironment } = useChrome(); const { isBeta, isProd, getEnvironment } = useChrome();
// Expose beta features in the ephemeral environment // Expose beta features in the ephemeral environment
if (isBeta() || getEnvironment() === 'qa') { if (isBeta() || getEnvironment() === 'qa') {
return { isBeta: () => true }; return { isBeta: () => true, isProd: isProd };
} }
return { isBeta: () => false }; return { isBeta: () => false, isProd: isProd };
}; };

View file

@ -12,6 +12,17 @@ import { renderWithReduxRouter } from '../../testUtils';
jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
useChrome: () => ({ useChrome: () => ({
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
isBeta: () => true, isBeta: () => true,
isProd: () => true, isProd: () => true,
getEnvironment: () => 'prod', getEnvironment: () => 'prod',
@ -41,33 +52,12 @@ describe('Step Upload to Azure', () => {
jest jest
.spyOn(api, 'getRepositories') .spyOn(api, 'getRepositories')
.mockImplementation(() => Promise.resolve(mockRepositoryResults)); .mockImplementation(() => Promise.resolve(mockRepositoryResults));
global.insights = {
chrome: {
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
},
};
}); });
afterEach(() => { afterEach(() => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
// restore global mock
afterAll(() => {
global.insights = undefined;
});
const user = userEvent.setup(); const user = userEvent.setup();
const setUp = async () => { const setUp = async () => {
renderWithReduxRouter('imagewizard', {}); renderWithReduxRouter('imagewizard', {});

View file

@ -32,6 +32,17 @@ const mockComposes = {
jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
useChrome: () => ({ useChrome: () => ({
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
isBeta: () => true, isBeta: () => true,
isProd: () => true, isProd: () => true,
getEnvironment: () => 'prod', getEnvironment: () => 'prod',
@ -159,29 +170,9 @@ const searchForChosenPackages = async (searchbox, searchTerm) => {
} }
}; };
// mock the insights dependency
beforeAll(() => { beforeAll(() => {
// scrollTo is not defined in jsdom // scrollTo is not defined in jsdom
window.HTMLElement.prototype.scrollTo = function () {}; window.HTMLElement.prototype.scrollTo = function () {};
global.insights = {
chrome: {
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
isProd: () => {
return true;
},
},
};
}); });
afterEach(() => { afterEach(() => {
@ -189,11 +180,6 @@ afterEach(() => {
router = undefined; router = undefined;
}); });
// restore global mock
afterAll(() => {
global.insights = undefined;
});
describe('Create Image Wizard', () => { describe('Create Image Wizard', () => {
test('renders component', () => { test('renders component', () => {
renderWithReduxRouter('imagewizard', {}); renderWithReduxRouter('imagewizard', {});

View file

@ -33,6 +33,17 @@ jest
jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
useChrome: () => ({ useChrome: () => ({
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
isBeta: () => false, isBeta: () => false,
isProd: () => true, isProd: () => true,
getEnvironment: () => 'prod', getEnvironment: () => 'prod',
@ -124,35 +135,9 @@ const searchForChosenPackages = async (searchbox, searchTerm) => {
} }
}; };
// mock the insights dependency
beforeAll(() => { beforeAll(() => {
// scrollTo is not defined in jsdom // scrollTo is not defined in jsdom
window.HTMLElement.prototype.scrollTo = function () {}; window.HTMLElement.prototype.scrollTo = function () {};
global.insights = {
chrome: {
auth: {
getUser: () => {
return {
identity: {
internal: {
org_id: 5,
},
},
};
},
},
isBeta: () => {
return false;
},
isProd: () => {
return true;
},
getEnvironment: () => {
return 'prod';
},
},
};
}); });
afterEach(() => { afterEach(() => {
@ -160,11 +145,6 @@ afterEach(() => {
router = undefined; router = undefined;
}); });
// restore global mock
afterAll(() => {
global.insights = undefined;
});
describe('Create Image Wizard', () => { describe('Create Image Wizard', () => {
test('renders component', () => { test('renders component', () => {
renderWithReduxRouter('imagewizard', {}); renderWithReduxRouter('imagewizard', {});

View file

@ -18,16 +18,6 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
}), }),
})); }));
beforeAll(() => {
global.insights = {
chrome: {
isProd: () => {
return true;
},
},
};
});
describe('Landing Page', () => { describe('Landing Page', () => {
test('renders page heading', async () => { test('renders page heading', async () => {
renderWithReduxRouter('', {}); renderWithReduxRouter('', {});