FooBar
,
+ };
+
+ setIsReady(true);
+ return () => {
+ removeScalprum();
+ };
+ }, []);
+
+ if (!isReady) {
+ return null;
+ }
+
+ return (
+
+ navigate
+
+
@@ -81,15 +85,6 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
-
-
-
-
-
-
-
-
-
;
const TabWrapper = (props: TabWrapper) => {
+ const isPreview = useAtomValue(isPreviewAtom);
const tabRef = useRef(null);
const hoverTimer = useRef(undefined);
const stopHoverEffect = () => {
@@ -35,7 +42,7 @@ const TabWrapper = (props: TabWrapper) => {
const timeout = setTimeout(() => {
// should be available only in preview
// use refs to supply the required tab events
- isBeta() && tabRef.current?.click();
+ isPreview && tabRef.current?.click();
}, 300);
hoverTimer.current = timeout;
};
@@ -74,25 +81,37 @@ const AllServicesTabs = ({
onToggle={onToggle}
toggleText={activeTabTitle}
role="region"
- className="pf-v5-u-p-md pf-v5-u-pr-0"
+ className="pf-v5-u-p-md pf-v5-u-pr-0 pf-v5-u-pl-0-on-md"
ouiaId={'all-services-tabs'}
>
- {
- handleTabClick?.(e, FAVORITE_TAB_ID);
- }}
- eventKey={FAVORITE_TAB_ID}
- title={
-
- Favorites
-
-
-
- }
- />
+
+ Platform
+
+
+ Solutions{' '}
+
+ View all
+
+
+ {
+ handleTabClick?.(e, FAVORITE_TAB_ID);
+ }}
+ eventKey={FAVORITE_TAB_ID}
+ title={
+
+ Favorites
+
+
+
+ }
+ />
{/* The tabs children type is busted and does not accept array. Hence the fragment wrapper */}
{linkSections.map((section, index) => (
onTabClick(section, index)}
+ className="pf-v5-u-pl-sm"
/>
))}
diff --git a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx
new file mode 100644
index 000000000..d8d96b7a8
--- /dev/null
+++ b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ChromeLink from '../ChromeLink';
+
+const PlatformServiceslinks = () => {
+ return (
+ <>
+
+ Red Hat Ansible Automation Platform
+
+
+ Red Hat Enterprise Linux
+
+
+ Red Hat OpenShift
+
+
+ );
+};
+export default PlatformServiceslinks;
diff --git a/src/components/AppFilter/useAppFilter.ts b/src/components/AppFilter/useAppFilter.ts
index 75defc33e..149b2c9d1 100644
--- a/src/components/AppFilter/useAppFilter.ts
+++ b/src/components/AppFilter/useAppFilter.ts
@@ -1,12 +1,11 @@
import axios from 'axios';
import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
import { BundleNavigation, ChromeModule, NavItem } from '../../@types/types';
-import { ReduxState } from '../../redux/store';
-import { getChromeStaticPathname, isBeta, isProd } from '../../utils/common';
+import { getChromeStaticPathname } from '../../utils/common';
import { evaluateVisibility } from '../../utils/isNavItemVisible';
import { useAtomValue } from 'jotai';
import { chromeModulesAtom } from '../../state/atoms/chromeModuleAtom';
+import { navigationAtom } from '../../state/atoms/navigationAtom';
export type AppFilterBucket = {
id: string;
@@ -14,20 +13,7 @@ export type AppFilterBucket = {
links: NavItem[];
};
-const previewBundles = [''];
-
-export const requiredBundles = [
- 'application-services',
- 'openshift',
- 'insights',
- 'edge',
- 'ansible',
- 'settings',
- 'iam',
- 'quay',
- 'subscriptions',
- ...(!isProd() ? previewBundles : isBeta() ? previewBundles : []),
-].filter(Boolean);
+export const requiredBundles = ['application-services', 'openshift', 'insights', 'edge', 'ansible', 'settings', 'iam', 'quay', 'subscriptions'];
export const itLessBundles = ['openshift', 'insights', 'settings', 'iam'];
@@ -92,7 +78,6 @@ type AppFilterState = {
};
const useAppFilter = () => {
- const isBetaEnv = isBeta();
const [state, setState] = useState({
isLoaded: false,
isLoading: false,
@@ -111,7 +96,7 @@ const useAppFilter = () => {
},
},
});
- const existingSchemas = useSelector(({ chrome: { navigation } }: ReduxState) => navigation);
+ const existingSchemas = useAtomValue(navigationAtom);
const modules = useAtomValue(chromeModulesAtom);
const handleBundleData = async ({ data: { id, navItems, title } }: { data: BundleNavigation }) => {
@@ -193,7 +178,9 @@ const useAppFilter = () => {
axios
.get(`${getChromeStaticPathname('navigation')}/${fragment}-navigation.json?ts=${Date.now()}`)
// fallback static CSC for EE env
- .catch(() => axios.get(`${isBetaEnv ? '/beta' : ''}/config/chrome/${fragment}-navigation.json?ts=${Date.now()}`))
+ .catch(() => {
+ return axios.get(`$/config/chrome/${fragment}-navigation.json?ts=${Date.now()}`);
+ })
.then(handleBundleData)
.then(() => Object.values(existingSchemas).map((data) => handleBundleData({ data } as { data: BundleNavigation })))
.catch((err) => {
diff --git a/src/components/AppPlaceholder/index.tsx b/src/components/AppPlaceholder/index.tsx
index b861df013..80edeeea6 100644
--- a/src/components/AppPlaceholder/index.tsx
+++ b/src/components/AppPlaceholder/index.tsx
@@ -4,13 +4,14 @@ import { Page, PageSidebar, PageSidebarBody } from '@patternfly/react-core/dist/
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import ChromeLink from '../ChromeLink';
-import Footer, { FooterProps } from '../Footer/Footer';
+import ChromeFooter from '../Footer/Footer';
import Logo from '../Header/Logo';
import NavLoader from '../Navigation/Loader';
import { getUrl } from '../../hooks/useBundle';
+import LoadingFallback from '../../utils/loading-fallback';
// Component that is displayed as a placeholder before auth init is finished
-const AppPlaceholder = (props: FooterProps) => {
+const AppPlaceholder = () => {
const hideNavLoader = [undefined, '', 'landing', 'allservices', 'favoritedservices'].includes(getUrl('bundle'));
return (
@@ -36,7 +37,8 @@ const AppPlaceholder = (props: FooterProps) => {
}
>
diff --git a/src/components/BetaSwitcher/BetaInfoModal.tsx b/src/components/BetaSwitcher/BetaInfoModal.tsx
new file mode 100644
index 000000000..dba2fe422
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaInfoModal.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal';
+import WrenchIcon from '@patternfly/react-icons/dist/dynamic/icons/wrench-icon';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+
+const BetaInfoModal = ({ onAccept, isOpen, toggleOpen }: { toggleOpen: (isOpen: boolean) => void; isOpen: boolean; onAccept: () => void }) => {
+ const Header = () => (
+
+ Preview{' '}
+ <Label>
+ <WrenchIcon />
+ </Label>
+
+ );
+ return (
+ toggleOpen(false)}
+ variant={ModalVariant.small}
+ header={
+
+ You can enable Preview mode to try out upcoming features that are in technology preview.{' '}
+
+ Learn more
+
+ .
+
+
+
+ );
+};
+
+export default BetaInfoModal;
diff --git a/src/components/BetaSwitcher/BetaSwitcher.scss b/src/components/BetaSwitcher/BetaSwitcher.scss
new file mode 100644
index 000000000..5f77b34d9
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcher.scss
@@ -0,0 +1,7 @@
+.chr-c-beta-switcher {
+ background-color: var(--pf-v5-global--BackgroundColor--dark-400);
+ transition: background-color 0.3s;
+ &.active {
+ background-color: var(--pf-v5-global--palette--blue-200);
+ }
+}
diff --git a/src/components/BetaSwitcher/BetaSwitcher.tsx b/src/components/BetaSwitcher/BetaSwitcher.tsx
new file mode 100644
index 000000000..1257f90f4
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcher.tsx
@@ -0,0 +1,141 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import classNames from 'classnames';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
+import { Switch } from '@patternfly/react-core/dist/dynamic/components/Switch';
+import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
+import WrenchIcon from '@patternfly/react-icons/dist/dynamic/icons/wrench-icon';
+import { Popover } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { Split, SplitItem } from '@patternfly/react-core/dist/dynamic/layouts/Split';
+import {
+ hidePreviewBannerAtom,
+ isPreviewAtom,
+ previewModalOpenAtom,
+ setPreviewSeenAtom,
+ togglePreviewWithCheckAtom,
+} from '../../state/atoms/releaseAtom';
+import BetaInfoModal from './BetaInfoModal';
+import { userConfigAtom } from '../../state/atoms/userConfigAtom';
+import BetaSwitcherDropdown from './BetaSwitcherDropdown';
+
+import './BetaSwitcher.scss';
+
+const BetaPopover = ({ children, isFirstTime }: PropsWithChildren<{ isFirstTime: boolean }>) => {
+ const [isVisible, setIsVisible] = React.useState(isFirstTime);
+ useEffect(() => {
+ let timeout: NodeJS.Timeout;
+ if (isFirstTime) {
+ setIsVisible(true);
+ timeout = setTimeout(() => {
+ setIsVisible(false);
+ }, 5000);
+ }
+ return () => {
+ if (timeout) {
+ clearTimeout(timeout);
+ setIsVisible(false);
+ }
+ };
+ }, [isFirstTime]);
+ return (
+ setIsVisible(false)}
+ headerContent="Welcome to preview"
+ bodyContent={
+
+ Look for items with this icon
+
+ to quickly identify preview features.
+
+ }
+ >
+ <>{children}
+
+ );
+};
+
+const BetaSwitcher = () => {
+ const bannerRef = useRef(null);
+ const [hideBanner, setHideBanner] = useAtom(hidePreviewBannerAtom);
+ const [isPreview, setIsPreview] = useAtom(isPreviewAtom);
+ const togglePreviewWithCheck = useSetAtom(togglePreviewWithCheckAtom);
+ const setUserPreviewSeen = useSetAtom(setPreviewSeenAtom);
+ const [isBetaModalOpen, setIsBetaModalOpen] = useAtom(previewModalOpenAtom);
+ const {
+ data: { uiPreviewSeen },
+ } = useAtomValue(userConfigAtom);
+ useEffect(() => {
+ const chromeRenderElement = document.getElementById('chrome-app-render-root');
+ // adjust the height of the chrome render element to fit the banner and not show extra scrollbar
+ if (!hideBanner && bannerRef.current && chromeRenderElement) {
+ const { height } = bannerRef.current.getBoundingClientRect();
+ chromeRenderElement.style.height = `calc(100vh - ${height}px)`;
+ } else if (hideBanner && chromeRenderElement) {
+ chromeRenderElement.style.removeProperty('height');
+ }
+ if (isPreview) {
+ // preview should always reset the banner visibility
+ setHideBanner(false);
+ }
+ }, [isPreview, hideBanner]);
+
+ const handleBetaAccept = () => {
+ setIsBetaModalOpen(false);
+ setIsPreview(true);
+ setUserPreviewSeen();
+ };
+
+ if (hideBanner) {
+ return null;
+ }
+
+ return (
+
+ You can enable "Preview" from the Settings menu
+ );
+
+ return (
+ setIsOpen(isOpen)}
+ toggle={(toggleRef: React.Ref) => (
+
+
+ )}
+ shouldFocusToggleOnSelect
+ >
+
+ {
+ hidePreview(true);
+ setIsOpen(false);
+ }}
+ description={description}
+ key="hide-preview-banner"
+ >
+ Hide "Preview" banner
+
+
+
+ );
+};
+
+export default BetaSwitcherDropdown;
diff --git a/src/components/BetaSwitcher/index.ts b/src/components/BetaSwitcher/index.ts
new file mode 100644
index 000000000..1497d220b
--- /dev/null
+++ b/src/components/BetaSwitcher/index.ts
@@ -0,0 +1 @@
+export { default } from './BetaSwitcher';
diff --git a/src/components/ChromeLink/ChromeLink.test.js b/src/components/ChromeLink/ChromeLink.test.js
index 1909c0668..daae5bba6 100644
--- a/src/components/ChromeLink/ChromeLink.test.js
+++ b/src/components/ChromeLink/ChromeLink.test.js
@@ -6,7 +6,6 @@ import createMockStore from 'redux-mock-store';
import { MemoryRouter } from 'react-router-dom';
import ChromeLink from './ChromeLink';
import NavContext from '../Navigation/navContext';
-import { APP_NAV_CLICK } from '../../redux/action-types';
const LinkContext = ({
store,
@@ -48,86 +47,6 @@ describe('ChromeLink', () => {
expect(getAllByTestId('router-link')).toHaveLength(1);
});
- test('should dispatch appNavClick with correct actionId for top level route', () => {
- const store = mockStore({
- chrome: {
- moduleRoutes: [],
- activeModule: 'testModule',
- modules: {
- testModule: {},
- },
- },
- });
- const {
- container: { firstElementChild: buttton },
- } = render(
-
- Test module link
-
- );
-
- act(() => {
- fireEvent.click(buttton);
- });
-
- expect(store.getActions()).toEqual([
- {
- type: APP_NAV_CLICK,
- payload: {
- id: '/',
- event: {
- id: '/',
- navId: '/',
- href: '/insights/foo',
- type: 'click',
- target: expect.any(Element),
- },
- },
- },
- ]);
- });
-
- test('should dispatch appNavClick with correct actionId for nested route', () => {
- const store = mockStore({
- chrome: {
- moduleRoutes: [],
- activeModule: 'testModule',
- modules: {
- testModule: {},
- },
- },
- });
- const {
- container: { firstElementChild: buttton },
- } = render(
-
-
- Test module link
-
-
- );
-
- act(() => {
- fireEvent.click(buttton);
- });
-
- expect(store.getActions()).toEqual([
- {
- type: APP_NAV_CLICK,
- payload: {
- id: 'bar',
- event: {
- id: 'bar',
- navId: 'bar',
- href: '/insights/foo/bar',
- type: 'click',
- target: expect.any(Element),
- },
- },
- },
- ]);
- });
-
test('should not trigger onLinkClick callback', () => {
const onLinkClickSpy = jest.fn();
const store = mockStore({
diff --git a/src/components/ChromeLink/ChromeLink.tsx b/src/components/ChromeLink/ChromeLink.tsx
index 1ef4845b5..d955cae50 100644
--- a/src/components/ChromeLink/ChromeLink.tsx
+++ b/src/components/ChromeLink/ChromeLink.tsx
@@ -1,14 +1,13 @@
import React, { memo, useContext, useMemo, useRef } from 'react';
import { NavLink } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
import { preloadModule } from '@scalprum/core';
-import { appNavClick } from '../../redux/actions';
import NavContext, { OnLinkClick } from '../Navigation/navContext';
import { NavDOMEvent } from '../../@types/types';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
import { moduleRoutesAtom } from '../../state/atoms/chromeModuleAtom';
+import { triggerNavListenersAtom } from '../../state/atoms/activeAppAtom';
interface RefreshLinkProps extends React.HTMLAttributes {
isExternal?: boolean;
@@ -32,6 +31,7 @@ const LinkWrapper: React.FC = memo(
({ href = '', isBeta, onLinkClick, className, currAppId, appId, children, tabIndex, ...props }) => {
const linkRef = useRef(null);
const moduleRoutes = useAtomValue(moduleRoutesAtom);
+ const triggerNavListener = useSetAtom(triggerNavListenersAtom);
const moduleEntry = useMemo(() => moduleRoutes?.find((route) => href?.includes(route.path)), [href, appId]);
const preloadTimeout = useRef();
let actionId = href.split('/').slice(2).join('/');
@@ -57,7 +57,6 @@ const LinkWrapper: React.FC = memo(
*/
type: 'click',
};
- const dispatch = useDispatch();
const onClick = (event: React.MouseEvent) => {
if (event.ctrlKey || event.shiftKey) {
return false;
@@ -72,7 +71,7 @@ const LinkWrapper: React.FC = memo(
* Add reference to the DOM link element
*/
domEvent.target = linkRef.current;
- dispatch(appNavClick({ id: actionId }, domEvent));
+ triggerNavListener({ navId: actionId, domEvent });
};
// turns /settings/rbac/roles -> settings_rbac_roles
diff --git a/src/components/ChromeRoute/ChromeRoute.tsx b/src/components/ChromeRoute/ChromeRoute.tsx
index 8117eec43..2396ab78f 100644
--- a/src/components/ChromeRoute/ChromeRoute.tsx
+++ b/src/components/ChromeRoute/ChromeRoute.tsx
@@ -1,19 +1,19 @@
import { ScalprumComponent } from '@scalprum/react-core';
-import React, { memo, useContext, useEffect } from 'react';
+import React, { memo, useContext, useEffect, useState } from 'react';
import LoadingFallback from '../../utils/loading-fallback';
import { batch, useDispatch } from 'react-redux';
import { toggleGlobalFilter } from '../../redux/actions';
import ErrorComponent from '../ErrorComponents/DefaultErrorComponent';
-import { getPendoConf } from '../../analytics';
import classNames from 'classnames';
import { HelpTopicContext } from '@patternfly/quickstarts';
import GatewayErrorComponent from '../ErrorComponents/GatewayErrorComponent';
-import { DeepRequired } from 'utility-types';
-import { ChromeUser } from '@redhat-cloud-services/types';
-import ChromeAuthContext from '../../auth/ChromeAuthContext';
import { useAtomValue, useSetAtom } from 'jotai';
import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
import { gatewayErrorAtom } from '../../state/atoms/gatewayErrorAtom';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { NavItemPermission } from '../../@types/types';
+import { evaluateVisibility } from '../../utils/isNavItemVisible';
+import NotFoundRoute from '../NotFoundRoute';
export type ChromeRouteProps = {
scope: string;
@@ -22,42 +22,52 @@ export type ChromeRouteProps = {
exact?: boolean;
scopeClass?: string;
props?: any;
+ permissions?: NavItemPermission[];
};
// eslint-disable-next-line react/display-name
const ChromeRoute = memo(
- ({ scope, module, scopeClass, path, props }: ChromeRouteProps) => {
+ ({ scope, module, scopeClass, path, props, permissions }: ChromeRouteProps) => {
+ const isPreview = useAtomValue(isPreviewAtom);
const dispatch = useDispatch();
const { setActiveHelpTopicByName } = useContext(HelpTopicContext);
- const { user } = useContext(ChromeAuthContext);
const gatewayError = useAtomValue(gatewayErrorAtom);
+ const [isHidden, setIsHidden] = useState(null);
const setActiveModule = useSetAtom(activeModuleAtom);
+ async function checkPermissions(permissions: NavItemPermission[]) {
+ try {
+ const withResult = await Promise.all(permissions.map((permission) => evaluateVisibility({ permissions: permission })));
+ setIsHidden(withResult.some((result) => result.isHidden));
+ } catch (error) {
+ console.error('Error while checking route permissions', error);
+ // if there is an error, hide the route
+ // better missing page than runtime error that brings down entire chrome
+ setIsHidden(true);
+ }
+ }
+
+ useEffect(() => {
+ if (Array.isArray(permissions)) {
+ checkPermissions(permissions);
+ }
+ }, [permissions]);
+
useEffect(() => {
batch(() => {
// Only trigger update on a first application render before any active module has been selected
// should be triggered only once per session
setActiveModule(scope);
});
- /**
- * update pendo metadata on application change
- */
- if (window.pendo) {
- try {
- window.pendo.updateOptions(getPendoConf(user as DeepRequired));
- } catch (error) {
- console.error('Unable to update pendo options');
- console.error(error);
- }
- }
-
/**
* TODO: Discuss default close feature of topics
* Topics drawer has no close button, therefore there might be an issue with opened topics after user changes route and does not clear the active topic trough the now non existing elements.
*/
setActiveHelpTopicByName && setActiveHelpTopicByName('');
+ // reset visibility function
+ setIsHidden(null);
return () => {
/**
* Reset global filter when switching application
@@ -69,11 +79,21 @@ const ChromeRoute = memo(
if (gatewayError) {
return ([]);
const [searchValue, setSearchValue] = useState('');
- const [selectedAccountNumber, setSelectedAccountNumber] = useState(user.identity.account_number);
+ const [selectedAccountNumber, setSelectedAccountNumber] = useState(accountNumber);
const onSelect = () => {
setIsOpen((prev) => !prev);
};
@@ -80,10 +80,10 @@ const ContextSwitcher = ({ user, className }: ContextSwitcherProps) => {
};
const resetAccountRequest = () => {
- if (user?.identity?.account_number === selectedAccountNumber) {
+ if (accountNumber === selectedAccountNumber) {
return;
}
- setSelectedAccountNumber(user?.identity?.account_number);
+ setSelectedAccountNumber(accountNumber);
Cookies.remove(CROSS_ACCESS_ACCOUNT_NUMBER);
Cookies.remove(CROSS_ACCESS_ORG_ID);
localStorage.removeItem(ACTIVE_REMOTE_REQUEST);
@@ -93,7 +93,7 @@ const ContextSwitcher = ({ user, className }: ContextSwitcherProps) => {
useEffect(() => {
let mounted = true;
// only inernal users have the TAM features enabled
- if (user?.identity?.user?.is_internal) {
+ if (isInternal) {
const initialAccount = localStorage.getItem(ACTIVE_REMOTE_REQUEST);
if (initialAccount) {
try {
@@ -121,7 +121,7 @@ const ContextSwitcher = ({ user, className }: ContextSwitcherProps) => {
}
return [...acc, curr];
}, [])
- .filter(({ target_account }) => target_account !== user.identity.account_number)
+ .filter(({ target_account }) => target_account !== accountNumber)
);
}
});
@@ -151,12 +151,12 @@ const ContextSwitcher = ({ user, className }: ContextSwitcherProps) => {
searchInputPlaceholder={intl.formatMessage(messages.searchAccount)}
isFullHeight
>
- {user && user?.identity?.account_number?.includes(searchValue) ? (
+ {accountNumber?.includes(searchValue) ? (
- {user?.identity?.account_number}
- {user?.identity?.account_number === `${selectedAccountNumber}` && (
+ {accountNumber}
+ {accountNumber === `${selectedAccountNumber}` && (
diff --git a/src/components/CrossRequestNotifier/CrossRequestNotifier.tsx b/src/components/CrossRequestNotifier/CrossRequestNotifier.tsx
index 34f5a3a21..ec670e41f 100644
--- a/src/components/CrossRequestNotifier/CrossRequestNotifier.tsx
+++ b/src/components/CrossRequestNotifier/CrossRequestNotifier.tsx
@@ -12,8 +12,8 @@ const ACCOUNT_TIMEOUT_ID = 'account_timeout';
const CrossRequestNotifier = () => {
const [, forceRender] = useReducer((state) => state + 1, 0);
- const [{ data }, markRead] = useAccessRequestNotifier();
- const crossAccountNotifications = data.filter(({ seen }) => !seen);
+ const [{ accessRequestData }, markRead] = useAccessRequestNotifier();
+ const crossAccountNotifications = accessRequestData.filter(({ seen }) => !seen);
const intl = useIntl();
@@ -37,7 +37,7 @@ const CrossRequestNotifier = () => {
autoDismiss: false,
});
- const DescriptionComponent = ({ id, markRead }: { id: string; markRead: (id: string) => void }) => (
+ const DescriptionComponent = ({ id, markRead }: { id: string | number; markRead: (id: string | number) => void }) => (
markRead(id)}>
{intl.formatMessage(messages.viewRequest)}
diff --git a/src/components/Debugger/DebuggerModal.tsx b/src/components/Debugger/DebuggerModal.tsx
index 22eb012ce..59cb88453 100644
--- a/src/components/Debugger/DebuggerModal.tsx
+++ b/src/components/Debugger/DebuggerModal.tsx
@@ -4,26 +4,22 @@ import { Modal, ModalVariant } from '@patternfly/react-core/dist/dynamic/compone
import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
import { BugIcon } from '@patternfly/react-icons/dist/dynamic/icons/bug-icon';
import { ChromeUser } from '@redhat-cloud-services/types';
-import { useDispatch, useSelector } from 'react-redux';
import { DeepRequired } from 'utility-types';
-
-import { toggleDebuggerModal } from '../../redux/actions';
-import { ReduxState } from '../../redux/store';
import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
import { Select, SelectList, SelectOption } from '@patternfly/react-core/dist/dynamic/components/Select';
import DebuggerTable from './DebuggerTable';
import './Debugger.scss';
+import { useAtom } from 'jotai';
+import { isDebuggerModalOpenAtom } from '../../state/atoms/debuggerModalatom';
export type DebuggerModalProps = {
user: DeepRequired;
};
const DebuggerModal = ({ user }: DebuggerModalProps) => {
- const isOpen = useSelector(({ chrome: { isDebuggerModalOpen } }) => isDebuggerModalOpen);
- const dispatch = useDispatch();
- const setIsModalOpen = (isOpen: boolean) => dispatch(toggleDebuggerModal(isOpen));
+ const [isOpen, setIsModalOpen] = useAtom(isDebuggerModalOpenAtom);
const [isDropdownOpen, setIsOpen] = React.useState(false);
const [selected, setSelected] = React.useState('Entitlements');
const menuRef = React.useRef(null);
diff --git a/src/components/ErrorComponents/AccountOnHoldError.tsx b/src/components/ErrorComponents/AccountOnHoldError.tsx
new file mode 100644
index 000000000..fdb9ae239
--- /dev/null
+++ b/src/components/ErrorComponents/AccountOnHoldError.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { AxiosError } from 'axios';
+import NotAuthorized from '@redhat-cloud-services/frontend-components/NotAuthorized';
+
+const ON_HOLD_MARK = 'Insights authorization failed - ERROR_EXPORT_CONTROL:';
+
+export const checkAccountOnHold = (error: any) => {
+ return error?.response?.data?.errors?.[0]?.detail.includes(ON_HOLD_MARK);
+};
+
+const AccountOnHoldError = ({ error }: { error: AxiosError<{ errors: { detail: string }[] }> }) => {
+ const data = error.response?.data.errors[0].detail;
+ const description = ;
+ return ;
};
const DefaultErrorComponent = (props: DefaultErrorComponentProps) => {
@@ -66,7 +67,7 @@ const DefaultErrorComponent = (props: DefaultErrorComponentProps) => {
}, [props.error, activeModule]);
// second level of error capture if xhr/fetch interceptor fails
- const gatewayError = get3scaleError(props.error as any);
+ const gatewayError = get3scaleError(props.error as any, props.signIn);
if (gatewayError) {
return ;
},
ErrorBoundaryState
> {
@@ -22,6 +26,16 @@ class ErrorBoundary extends React.Component<
return { hasError: true };
}
+ handleInvalidAuthState(): void {
+ const repairedUrl = new URL(window.location.href);
+ // remove invalid SSO state and force re authentication
+ repairedUrl.hash = '';
+ // remove possibly broken local storage state from client
+ localStorage.clear();
+ // hard page reload
+ window.location.href = repairedUrl.toString();
+ }
+
componentDidCatch(error: any, errorInfo: any) {
console.error('Chrome encountered an error!', error);
this.setState((prev) => ({
@@ -29,11 +43,18 @@ class ErrorBoundary extends React.Component<
error,
errorInfo,
}));
+
+ if (typeof error.message === 'string' && error.message === INVALID_AUTH_STATE_ERROR) {
+ this.handleInvalidAuthState();
+ }
}
render() {
if (this.state.hasError) {
- return
- 
-
-
-
-
- No favorited services
-
-
- Add a service to your favorites to get started here.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ No favorited services
+
+
+ Add a service to your favorites to get started here.
+
+
+
+
+
+
+
+
);
diff --git a/src/components/FeatureFlags/FeatureFlagsProvider.tsx b/src/components/FeatureFlags/FeatureFlagsProvider.tsx
index f51a3f2a6..d4e30cbe2 100644
--- a/src/components/FeatureFlags/FeatureFlagsProvider.tsx
+++ b/src/components/FeatureFlags/FeatureFlagsProvider.tsx
@@ -3,8 +3,10 @@ import { FlagProvider, IFlagProvider, UnleashClient } from '@unleash/proxy-clien
import { DeepRequired } from 'utility-types';
import { captureException } from '@sentry/react';
import * as Sentry from '@sentry/react';
+import { useAtomValue } from 'jotai';
import ChromeAuthContext, { ChromeAuthContextValue } from '../../auth/ChromeAuthContext';
-import { isBeta } from '../../utils/common';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { UNLEASH_ERROR_KEY, getUnleashClient, setUnleashClient } from './unleashClient';
const config: IFlagProvider['config'] = {
url: `${document.location.origin}/api/featureflags/v0`,
@@ -51,43 +53,34 @@ const config: IFlagProvider['config'] = {
},
};
-export const UNLEASH_ERROR_KEY = 'chrome:feature-flags:error';
-
-/**
- * Clear error localstorage flag before initialization
- */
-localStorage.setItem(UNLEASH_ERROR_KEY, 'false');
-
-export let unleashClient: UnleashClient;
-export const getFeatureFlagsError = () => localStorage.getItem(UNLEASH_ERROR_KEY) === 'true';
-
const FeatureFlagsProvider: React.FC = ({ children }) => {
const { user } = useContext(ChromeAuthContext) as DeepRequired;
- unleashClient = useMemo(
- () =>
- new UnleashClient({
- ...config,
- context: {
- // TODO: instead of the isBeta, use the internal chrome state
- // the unleash context is not generic, look for issue/PR in the unleash repo or create one
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- 'platform.chrome.ui.preview': isBeta(),
- userId: user?.identity.internal?.account_id,
- orgId: user?.identity.internal?.org_id,
- ...(user
- ? {
- properties: {
- account_number: user?.identity.account_number,
- email: user?.identity.user.email,
- },
- }
- : {}),
- },
- }),
- []
- );
- return {children} ;
+ const isPreview = useAtomValue(isPreviewAtom);
+ useMemo(() => {
+ const client = new UnleashClient({
+ ...config,
+ context: {
+ // the unleash context is not generic, look for issue/PR in the unleash repo or create one
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ 'platform.chrome.ui.preview': isPreview,
+ userId: user?.identity.internal?.account_id,
+ orgId: user?.identity.internal?.org_id,
+ accountNumber: user?.identity.account_number,
+ ...(user
+ ? {
+ properties: {
+ account_number: user?.identity.account_number,
+ email: user?.identity.user.email,
+ },
+ }
+ : {}),
+ },
+ });
+ setUnleashClient(client);
+ return client;
+ }, []);
+ return {children} ;
};
export default FeatureFlagsProvider;
diff --git a/src/components/FeatureFlags/unleashClient.ts b/src/components/FeatureFlags/unleashClient.ts
new file mode 100644
index 000000000..e8b347599
--- /dev/null
+++ b/src/components/FeatureFlags/unleashClient.ts
@@ -0,0 +1,27 @@
+import { UnleashClient } from '@unleash/proxy-client-react';
+
+let unleashClient: UnleashClient;
+
+export const UNLEASH_ERROR_KEY = 'chrome:feature-flags:error';
+
+/**
+ * Clear error localstorage flag before initialization
+ */
+localStorage.setItem(UNLEASH_ERROR_KEY, 'false');
+
+export const getFeatureFlagsError = () => localStorage.getItem(UNLEASH_ERROR_KEY) === 'true';
+
+export function getUnleashClient() {
+ if (!unleashClient) {
+ throw new Error('UnleashClient not initialized!');
+ }
+ return unleashClient;
+}
+
+export function setUnleashClient(client: UnleashClient) {
+ unleashClient = client;
+}
+
+export function unleashClientExists() {
+ return !!unleashClient;
+}
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 937514b6d..e72128706 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,4 +1,5 @@
import React, { memo, useContext, useState } from 'react';
+import { useAtom, useAtomValue } from 'jotai';
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
import { Card, CardBody, CardTitle } from '@patternfly/react-core/dist/dynamic/components/Card';
import { FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
@@ -11,13 +12,11 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/exte
import OutlinedCommentsIcon from '@patternfly/react-icons/dist/dynamic/icons/outlined-comments-icon';
import { DeepRequired } from 'utility-types';
import { ChromeUser } from '@redhat-cloud-services/types';
-import { useDispatch, useSelector } from 'react-redux';
import { useIntl } from 'react-intl';
+import { isFeedbackModalOpenAtom, usePendoFeedbackAtom } from '../../state/atoms/feedbackModalAtom';
import feedbackIllo from '../../../static/images/feedback_illo.svg';
import FeedbackForm from './FeedbackForm';
-import { toggleFeedbackModal } from '../../redux/actions';
-import { ReduxState } from '../../redux/store';
import FeedbackSuccess from './FeedbackSuccess';
import messages from '../../locales/Messages';
import FeedbackError from './FeedbackError';
@@ -27,6 +26,8 @@ import { createSupportCase } from '../../utils/createCase';
import './Feedback.scss';
import ChromeAuthContext from '../../auth/ChromeAuthContext';
import { useSegment } from '../../analytics/useSegment';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import useSupportCaseData from '../../hooks/useSupportCaseData';
const FEEDBACK_OPEN_EVENT = 'chrome.feedback.open';
@@ -42,9 +43,8 @@ export type FeedbackPages =
const FeedbackModal = memo(() => {
const intl = useIntl();
- const usePendoFeedback = useSelector(({ chrome: { usePendoFeedback } }) => usePendoFeedback);
- const isOpen = useSelector(({ chrome: { isFeedbackModalOpen } }) => isFeedbackModalOpen);
- const dispatch = useDispatch();
+ const [isModalOpen, setIsModalOpen] = useAtom(isFeedbackModalOpenAtom);
+ const usePendoFeedback = useAtomValue(usePendoFeedbackAtom);
const [modalPage, setModalPage] = useState('feedbackHome');
const { getEnvironment } = useContext(InternalChromeContext);
const chromeAuth = useContext(ChromeAuthContext);
@@ -52,10 +52,12 @@ const FeedbackModal = memo(() => {
const user = chromeAuth.user as DeepRequired;
const env = getEnvironment();
const isAvailable = env === 'prod' || env === 'stage';
- const setIsModalOpen = (isOpen: boolean) => dispatch(toggleFeedbackModal(isOpen));
const handleCloseModal = () => {
- setIsModalOpen(false), setModalPage('feedbackHome');
+ setIsModalOpen(false);
+ setModalPage('feedbackHome');
};
+ const isPreview = useAtomValue(isPreviewAtom);
+ const supportCaseData = useSupportCaseData();
const ModalDescription = ({ modalPage }: { modalPage: FeedbackPages }) => {
switch (modalPage) {
@@ -75,7 +77,12 @@ const FeedbackModal = memo(() => {
{intl.formatMessage(messages.reportABug)}
{intl.formatMessage(messages.describeBugUrgentCases)}
- createSupportCase(user.identity, chromeAuth.token)}>
+ createSupportCase(user.identity, chromeAuth.token, isPreview, { supportCaseData })}
+ >
{intl.formatMessage(messages.openSupportCase)}
+
>;
- cookieElement: Element | null;
-};
+import './Footer.scss';
-const Footer = ({ setCookieElement, cookieElement }: FooterProps) => {
- const cookieRef = useRef(null);
+const CookieConsentElement = () => {
+ // the consent element can be initialized only once, but we render multiple instance of the footer based on the UI state
+ // we have to carry the element around the DOM so it does not disappear when the footer is re-initialized
+ const consentRef = useRef(null);
+ const consentElement = useMemo(() => {
+ return document.getElementById('teconsent');
+ }, []);
useEffect(() => {
- if (cookieRef.current) {
- if (cookieElement) {
- cookieRef.current.replaceWith(cookieElement);
- } else {
- setCookieElement(cookieRef.current);
- }
+ if (consentRef.current && consentElement) {
+ consentRef.current.appendChild(consentElement);
}
- }, [cookieRef.current]);
- const [isModalOpen, setIsModalOpen] = useState(false);
+ }, [consentElement]);
+
+ return ;
+};
+const ChromeFooter = () => {
return (
-
-
-
-
-
-
-
-
-
- ©2023 Red Hat, Inc.
-
-
-
- setIsModalOpen(true)}>
- Browser Support
-
-
- Privacy Policy
-
-
- Terms of Use
-
-
- All Policies and Guidelines
-
-
-
-
-
-
- setIsModalOpen(false)}>
-
-
- Red Hat captures and regularly reviews statistical data from our actual web visitors and registered users, rather than generic industry
- data, to identify the browsers we need to support in alignment with our customers’ needs. Additionally, to safeguard customer data, only
- browsers which receive security updates from the browser manufacturer are considered for support. We have implemented this policy to
- ensure that we can provide an excellent experience to a wide user base.
-
- Cookies and Javascript
-
- To successfully interact with our websites and services, your browser must meet the following feature requirements:
-
-
- The browser must be configured to accept cookies
- The browser must be configured to execute JavaScript
-
- Specific browser support
-
- We validate against and fully support our customers' use of the past two major releases of the following browsers:
-
-
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Microsoft Edge
-
-
-
+
+
);
};
-export default Footer;
+export default ChromeFooter;
diff --git a/src/components/GlobalFilter/GroupFilterInputGroup.tsx b/src/components/GlobalFilter/GroupFilterInputGroup.tsx
index 733bb8023..9b8ecdefb 100644
--- a/src/components/GlobalFilter/GroupFilterInputGroup.tsx
+++ b/src/components/GlobalFilter/GroupFilterInputGroup.tsx
@@ -53,7 +53,7 @@ const GroupFilterInputGroup: React.FunctionComponent
}>
= ({ loaded, schema }) => {
+ const isPreview = useAtomValue(isPreviewAtom);
const [showBetaModal, setShowBetaModal] = useState(false);
const deferedOnClickArgs = useRef<[React.MouseEvent | undefined, string | undefined, string | undefined]>([
undefined,
@@ -27,7 +29,7 @@ const Navigation: React.FC = ({ loaded, schema }) => {
const breadcrumbsDisabled = !useFlag('platform.chrome.bredcrumbs.enabled');
const onLinkClick = (origEvent: React.MouseEvent, href: string) => {
- if (!showBetaModal && !isBeta()) {
+ if (!showBetaModal && !isPreview) {
origEvent.preventDefault();
deferedOnClickArgs.current = [origEvent, href, origEvent?.currentTarget?.text];
setShowBetaModal(true);
@@ -68,7 +70,7 @@ const Navigation: React.FC = ({ loaded, schema }) => {
{
- if (!isBeta()) {
+ if (!isPreview) {
const [origEvent, href] = deferedOnClickArgs.current;
const isMetaKey = event.ctrlKey || event.metaKey || origEvent?.ctrlKey || origEvent?.metaKey;
const url = `${document.baseURI}beta${href}`;
diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.test.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.test.tsx
deleted file mode 100644
index 298e38db5..000000000
--- a/src/components/NotificationsDrawer/DrawerPanelContent.test.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React from 'react';
-import { act, fireEvent, render, waitFor } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import configureMockStore, { MockStore } from 'redux-mock-store';
-import DrawerPanel from './DrawerPanelContent';
-import { BrowserRouter } from 'react-router-dom';
-import { markAllNotificationsAsRead, markAllNotificationsAsUnread, markNotificationAsRead, markNotificationAsUnread } from '../../redux/actions';
-import { readTestData, testData } from './notificationDrawerUtils';
-
-const mockStore = configureMockStore();
-
-const stateWithNotifications = {
- chrome: {
- notifications: {
- data: testData,
- isExpanded: true,
- count: 3,
- },
- },
-};
-
-const stateWithoutNotifications = {
- chrome: {
- notifications: {
- data: [],
- isExpanded: true,
- count: 0,
- },
- },
-};
-
-const stateWithReadNotifications = {
- chrome: {
- notifications: {
- data: readTestData,
- isExpanded: true,
- count: 2,
- },
- },
-};
-
-const renderComponent = (store: MockStore) => {
- return render(
-
-
-
-
-
-
- );
-};
-
-describe('Drawer panel functionality', () => {
- test('Renders the drawer panel empty successfully. ', () => {
- const store = mockStore(stateWithoutNotifications);
-
- const renderedResult = renderComponent(store);
- expect(renderedResult.getByText('Notifications')).toBeInTheDocument();
- });
-
- test('Renders notification drawer with notifications successfully', () => {
- const store = mockStore(stateWithNotifications);
-
- const renderedResult = renderComponent(store);
- expect(renderedResult.getByText('Test Notification 1')).toBeInTheDocument();
- });
-
- test('Marking notification as read successfully', async () => {
- const store = mockStore(stateWithNotifications);
-
- const renderedResult = renderComponent(store);
-
- const checkbox = renderedResult.getAllByRole('checkbox');
-
- await act(async () => {
- fireEvent.click(checkbox[0]);
- });
-
- const actions = store.getActions();
-
- await waitFor(() => {
- expect(actions).toContainEqual(markNotificationAsRead('1'));
- });
- });
-
- test('Mark notification as unread successfully', async () => {
- const store = mockStore(stateWithReadNotifications);
-
- const renderedResult = renderComponent(store);
-
- const checkbox = renderedResult.getAllByRole('checkbox');
-
- await act(async () => {
- fireEvent.click(checkbox[0]);
- });
-
- const actions = store.getActions();
-
- await waitFor(() => {
- expect(actions).toContainEqual(markNotificationAsUnread('1'));
- });
- });
-
- test('Mark all notifications as read successfully', async () => {
- const store = mockStore(stateWithNotifications);
-
- const renderedResult = renderComponent(store);
-
- const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
-
- await act(async () => {
- fireEvent.click(actionMenuButton);
- });
-
- const actionDropdownItems = await renderedResult.getAllByRole('menuitem');
-
- await act(async () => {
- fireEvent.click(actionDropdownItems[1]);
- });
-
- const actions = store.getActions();
-
- await waitFor(() => {
- expect(actions).toContainEqual(markAllNotificationsAsRead());
- });
- });
-
- test('Mark all notifications as unread successfully', async () => {
- const store = mockStore(stateWithReadNotifications);
-
- const renderedResult = renderComponent(store);
-
- const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
-
- await act(async () => {
- fireEvent.click(actionMenuButton);
- });
-
- const actionDropdownItems = await renderedResult.getAllByRole('menuitem');
-
- act(() => {
- fireEvent.click(actionDropdownItems[2]);
- });
-
- const actions = store.getActions();
-
- await waitFor(() => {
- expect(actions).toContainEqual(markAllNotificationsAsUnread());
- });
- });
-
- test('Select filter successfully', async () => {
- const store = mockStore(stateWithNotifications);
-
- const renderedResult = renderComponent(store);
-
- const filterMenuButton = renderedResult.getByRole('button', { name: /Notifications filter/i });
-
- await act(async () => {
- fireEvent.click(filterMenuButton);
- });
-
- const filterMenuItems = await renderedResult.getAllByRole('menuitem');
-
- await act(async () => {
- fireEvent.click(filterMenuItems[2]);
- });
-
- const filteredNotification = await renderedResult.getAllByRole('listitem');
-
- await waitFor(() => {
- expect(filteredNotification.length === 1);
- });
- });
-});
diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
index 2d16e900a..cbdb88471 100644
--- a/src/components/NotificationsDrawer/DrawerPanelContent.tsx
+++ b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { PopoverPosition } from '@patternfly/react-core/dist/dynamic/components/Popover';
import { Badge } from '@patternfly/react-core/dist/dynamic/components/Badge';
import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
@@ -14,18 +15,39 @@ import {
} from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
-import { useDispatch, useSelector } from 'react-redux';
import FilterIcon from '@patternfly/react-icons/dist/dynamic/icons/filter-icon';
import BellSlashIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-slash-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
import orderBy from 'lodash/orderBy';
import { Link, useNavigate } from 'react-router-dom';
-import { NotificationData, ReduxState } from '../../redux/store';
import NotificationItem from './NotificationItem';
-import { markAllNotificationsAsRead, markAllNotificationsAsUnread, toggleNotificationsDrawer } from '../../redux/actions';
-import { filterConfig } from './notificationDrawerUtils';
import ChromeAuthContext from '../../auth/ChromeAuthContext';
import InternalChromeContext from '../../utils/internalChromeContext';
+import {
+ NotificationData,
+ notificationDrawerDataAtom,
+ notificationDrawerExpandedAtom,
+ notificationDrawerFilterAtom,
+ notificationDrawerSelectedAtom,
+ updateNotificationReadAtom,
+ updateNotificationSelectedAtom,
+ updateNotificationsSelectedAtom,
+} from '../../state/atoms/notificationDrawerAtom';
+import BulkSelect from '@redhat-cloud-services/frontend-components/BulkSelect';
+import axios from 'axios';
+import { Stack, StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+
+interface Bundle {
+ id: string;
+ name: string;
+ displayName: string;
+ children: Bundle[];
+}
+
+interface FilterConfigItem {
+ title: string;
+ value: string;
+}
export type DrawerPanelProps = {
innerRef: React.Ref;
@@ -39,23 +61,44 @@ const EmptyNotifications = ({ isOrgAdmin, onLinkClick }: { onLinkClick: () => vo
{isOrgAdmin ? (
-
- Try
-
- checking your notification preferences
-
- and managing the
-
- notification configuration
-
- for your organization.
-
+
+
+ There are currently no notifications for you.
+
+
+
+ Try
+
+ checking your notification preferences
+
+ and managing the
+
+ notification configuration
+
+ for your organization.
+
+
+
) : (
<>
-
- Configure notification settings
-
- .Contact your organization administrator.
+
+
+ There are currently no notifications for you.
+
+
+
+ Check your Notification Preferences
+
+
+
+
+ View the Event log to see all fired events
+
+
+
+ Contact your organization administrator
+
+
)}
@@ -65,15 +108,19 @@ const EmptyNotifications = ({ isOrgAdmin, onLinkClick }: { onLinkClick: () => vo
const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
- const [activeFilters, setActiveFilters] = useState([]);
- const [filteredNotifications, setFilteredNotifications] = useState([]);
+ const [activeFilters, setActiveFilters] = useAtom(notificationDrawerFilterAtom);
+ const toggleDrawer = useSetAtom(notificationDrawerExpandedAtom);
const navigate = useNavigate();
- const dispatch = useDispatch();
- const notifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data || []);
+ const notifications = useAtomValue(notificationDrawerDataAtom);
+ const selectedNotifications = useAtomValue(notificationDrawerSelectedAtom);
+ const updateSelectedNotification = useSetAtom(updateNotificationSelectedAtom);
const auth = useContext(ChromeAuthContext);
const isOrgAdmin = auth?.user?.identity?.user?.is_org_admin;
const { getUserPermissions } = useContext(InternalChromeContext);
const [hasNotificationsPermissions, setHasNotificationsPermissions] = useState(false);
+ const updateNotificationRead = useSetAtom(updateNotificationReadAtom);
+ const updateAllNotificationsSelected = useSetAtom(updateNotificationsSelectedAtom);
+ const [filterConfig, setFilterConfig] = useState([]);
useEffect(() => {
let mounted = true;
@@ -89,34 +136,65 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
);
}
};
+ const fetchFilterConfig = async () => {
+ try {
+ const response = await axios.get('/api/notifications/v1/notifications/facets/bundles');
+ if (mounted) {
+ setFilterConfig(
+ response.data.map((bundle: Bundle) => ({
+ title: bundle.displayName,
+ value: bundle.name,
+ }))
+ );
+ }
+ } catch (error) {
+ console.error('Failed to fetch filter configuration:', error);
+ }
+ };
fetchPermissions();
+ fetchFilterConfig();
return () => {
mounted = false;
};
}, []);
- useEffect(() => {
- const modifiedNotifications = (activeFilters || []).reduce(
- (acc: NotificationData[], chosenFilter: string) => [...acc, ...notifications.filter(({ source }) => source === chosenFilter)],
- []
- );
-
- setFilteredNotifications(modifiedNotifications);
- }, [activeFilters]);
+ const filteredNotifications = useMemo(
+ () =>
+ (activeFilters || []).reduce(
+ (acc: NotificationData[], chosenFilter: string) => [...acc, ...notifications.filter(({ bundle }) => bundle === chosenFilter)],
+ []
+ ),
+ [activeFilters]
+ );
const onNotificationsDrawerClose = () => {
setActiveFilters([]);
- dispatch(toggleNotificationsDrawer());
+ toggleDrawer(false);
+ };
+
+ const onUpdateSelectedStatus = (read: boolean) => {
+ axios
+ .put('/api/notifications/v1/notifications/drawer/read', {
+ notification_ids: selectedNotifications.map((notification) => notification.id),
+ read_status: read,
+ })
+ .then(() => {
+ selectedNotifications.forEach((notification) => updateNotificationRead(notification.id, read));
+ setIsDropdownOpen(false);
+ updateAllNotificationsSelected(false);
+ })
+ .catch((e) => {
+ console.error('failed to update notification read status', e);
+ });
};
- const onMarkAllAsRead = () => {
- dispatch(markAllNotificationsAsRead());
- setIsDropdownOpen(false);
+ const selectAllNotifications = (selected: boolean) => {
+ updateAllNotificationsSelected(selected);
};
- const onMarkAllAsUnread = () => {
- dispatch(markAllNotificationsAsUnread());
- setIsDropdownOpen(false);
+ const selectVisibleNotifications = () => {
+ const visibleNotifications = activeFilters.length > 0 ? filteredNotifications : notifications;
+ visibleNotifications.forEach((notification) => updateSelectedNotification(notification.id, true));
};
const onFilterSelect = (chosenFilter: string) => {
@@ -132,11 +210,23 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
const dropdownItems = [
- Mark visible as read
+ {
+ onUpdateSelectedStatus(true);
+ }}
+ isDisabled={notifications.length === 0}
+ >
+ Mark selected as read
,
-
- Mark visible as unread
+ {
+ onUpdateSelectedStatus(false);
+ }}
+ isDisabled={notifications.length === 0}
+ >
+ Mark selected as unread
,
selectAllNotifications(false) },
+ {
+ title: `Select visible (${activeFilters.length > 0 ? filteredNotifications.length : notifications.length})`,
+ key: 'select-visible',
+ onClick: selectVisibleNotifications,
+ },
+ { title: `Select all (${notifications.length})`, key: 'select-all', onClick: () => selectAllNotifications(true) },
+ ]}
+ count={notifications.filter(({ selected }) => selected).length}
+ checked={notifications.length > 0 && notifications.every(({ selected }) => selected)}
+ />
) => (
= ({ notification, onNavigateTo }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const dispatch = useDispatch();
+ const updateNotificationSelected = useSetAtom(updateNotificationSelectedAtom);
+ const updateNotificationRead = useSetAtom(updateNotificationReadAtom);
const onCheckboxToggle = () => {
- dispatch(!notification.read ? markNotificationAsRead(notification.id) : markNotificationAsUnread(notification.id));
- setIsDropdownOpen(false);
+ updateNotificationSelected(notification.id, !notification.selected);
+ };
+
+ const onMarkAsRead = () => {
+ axios
+ .put('/api/notifications/v1/notifications/drawer/read', {
+ notification_ids: [notification.id],
+ read_status: !notification.read,
+ })
+ .then(() => {
+ updateNotificationRead(notification.id, !notification.read);
+ setIsDropdownOpen(false);
+ })
+ .catch((e) => {
+ console.error('failed to update notification read status', e);
+ });
};
const notificationDropdownItems = [
- {`Mark as ${!notification.read ? 'read' : 'unread'}`} ,
- onNavigateTo('settings/notifications/configure-events')}>
+ {`Mark as ${!notification.read ? 'read' : 'unread'}`} ,
+ onNavigateTo(`/settings/notifications/configure-events?bundle=${notification.bundle}&tab=configuration`)}
+ >
Manage this event
,
];
@@ -40,7 +60,7 @@ const NotificationItem: React.FC = ({ notification, onNav
- ) => (
= ({ notification, onNav
- {notification.description}
+
+ {notification.description}
+
diff --git a/src/components/NotificationsDrawer/notificationDrawerUtils.ts b/src/components/NotificationsDrawer/notificationDrawerUtils.ts
index 9f0fc96e8..5aa3a3974 100644
--- a/src/components/NotificationsDrawer/notificationDrawerUtils.ts
+++ b/src/components/NotificationsDrawer/notificationDrawerUtils.ts
@@ -1,10 +1,3 @@
-export const filterConfig = [
- { title: 'Console', value: 'console' },
- { title: 'OpenShift', value: 'openshift' },
- { title: 'Red Hat Enterprise Linux', value: 'rhel' },
- { title: 'Ansible Automation Platform', value: 'ansible' },
-];
-
export const testData = [
{
id: '1',
diff --git a/src/components/QuickStart/useQuickstartsStates.stage.test.js b/src/components/QuickStart/useQuickstartsStates.stage.test.js
index 7c9d2e846..272092313 100644
--- a/src/components/QuickStart/useQuickstartsStates.stage.test.js
+++ b/src/components/QuickStart/useQuickstartsStates.stage.test.js
@@ -69,7 +69,7 @@ describe('useQuickstartsStates stage', () => {
const wrapper = ({ children }) => {children} ;
let result;
await act(async () => {
- const { result: resultInternal } = renderHook(() => useQuickstartsStates(), { wrapper });
+ const { result: resultInternal } = renderHook(() => useQuickstartsStates('123'), { wrapper });
result = resultInternal;
});
@@ -96,7 +96,7 @@ describe('useQuickstartsStates stage', () => {
const wrapper = ({ children }) => {children} ;
let result;
await act(async () => {
- const { result: resultInternal } = renderHook(() => useQuickstartsStates(), { wrapper });
+ const { result: resultInternal } = renderHook(() => useQuickstartsStates('123'), { wrapper });
result = resultInternal;
});
diff --git a/src/components/QuickStart/useQuickstartsStates.ts b/src/components/QuickStart/useQuickstartsStates.ts
index 3377bacba..34af3d5c0 100644
--- a/src/components/QuickStart/useQuickstartsStates.ts
+++ b/src/components/QuickStart/useQuickstartsStates.ts
@@ -1,39 +1,43 @@
import axios from 'axios';
-import { useContext, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useCallback, useEffect, useMemo, useState } from 'react';
import { QuickStart, QuickStartState } from '@patternfly/quickstarts';
-import { populateQuickstartsCatalog } from '../../redux/actions';
-import ChromeAuthContext from '../../auth/ChromeAuthContext';
+import { useSetAtom } from 'jotai';
+import { populateQuickstartsAppAtom } from '../../state/atoms/quickstartsAtom';
+
+const useQuickstartsStates = (accountId?: string) => {
+ const populateQuickstarts = useSetAtom(populateQuickstartsAppAtom);
-const useQuickstartsStates = () => {
- const dispatch = useDispatch();
- const auth = useContext(ChromeAuthContext);
- const accountId = auth.user.identity?.internal?.account_id;
const [allQuickStartStates, setAllQuickStartStatesInternal] = useState<{ [key: string | number]: QuickStartState }>({});
const [activeQuickStartID, setActiveQuickStartIDInternal] = useState('');
- function setAllQuickStartStates(value: QuickStartState | ((states: typeof allQuickStartStates) => QuickStartState)) {
- const valueToStore = typeof value === 'function' ? value(allQuickStartStates) : value;
- const activeState = valueToStore[activeQuickStartID];
+ const setAllQuickStartStates = useCallback(
+ (value: QuickStartState | ((states: typeof allQuickStartStates) => QuickStartState)) => {
+ const valueToStore = typeof value === 'function' ? value(allQuickStartStates) : value;
+ const activeState = valueToStore[activeQuickStartID];
- if (typeof activeState === 'object') {
- axios
- .post('/api/quickstarts/v1/progress', {
- quickstartName: activeQuickStartID,
- accountId: parseInt(accountId!),
- progress: activeState,
- })
- .catch((err) => {
- console.error(`Unable to persis quickstart progress! ${activeQuickStartID}`, err);
- });
- }
- setAllQuickStartStatesInternal(value as unknown as typeof allQuickStartStates);
- }
+ if (typeof activeState === 'object') {
+ axios
+ .post('/api/quickstarts/v1/progress', {
+ quickstartName: activeQuickStartID,
+ accountId: parseInt(accountId!),
+ progress: activeState,
+ })
+ .catch((err) => {
+ console.error(`Unable to persis quickstart progress! ${activeQuickStartID}`, err);
+ });
+ }
+ setAllQuickStartStatesInternal(value as unknown as typeof allQuickStartStates);
+ },
+ [setAllQuickStartStatesInternal, activeQuickStartID, accountId]
+ );
- function setActiveQuickStartID(id: string) {
- id !== '' && typeof id !== 'function' ? document.body.classList.add('quickstarts-open') : document.body.classList.remove('quickstarts-open');
- setActiveQuickStartIDInternal(id);
- }
+ const setActiveQuickStartID = useCallback(
+ (id: string) => {
+ id !== '' && typeof id !== 'function' ? document.body.classList.add('quickstarts-open') : document.body.classList.remove('quickstarts-open');
+ setActiveQuickStartIDInternal(id);
+ },
+ [setActiveQuickStartIDInternal]
+ );
useEffect(() => {
if (accountId) {
@@ -59,27 +63,28 @@ const useQuickstartsStates = () => {
}
}, [accountId]);
- async function activateQuickstart(name: string) {
- try {
- const {
- data: { data },
- } = await axios.get<{ data: { content: QuickStart }[] }>('/api/quickstarts/v1/quickstarts', {
- params: {
- name,
- },
- });
- dispatch(
- populateQuickstartsCatalog(
- 'default',
- data.map(({ content }) => content)
- )
- );
+ const activateQuickstart = useCallback(
+ async (name: string) => {
+ try {
+ const {
+ data: { data },
+ } = await axios.get<{ data: { content: QuickStart }[] }>('/api/quickstarts/v1/quickstarts', {
+ params: {
+ name,
+ },
+ });
+ populateQuickstarts({
+ app: 'default',
+ quickstarts: data.map(({ content }) => content),
+ });
- setActiveQuickStartID(name);
- } catch (error) {
- console.error('Unable to active quickstarts called: ', name, error);
- }
- }
+ setActiveQuickStartID(name);
+ } catch (error) {
+ console.error('Unable to active quickstarts called: ', name, error);
+ }
+ },
+ [populateQuickstarts, setActiveQuickStartID]
+ );
useEffect(() => {
// this hook is above the router node this the window location usage
@@ -91,13 +96,19 @@ const useQuickstartsStates = () => {
}
}, []);
- return {
- activateQuickstart,
- allQuickStartStates,
- setAllQuickStartStates,
- activeQuickStartID,
- setActiveQuickStartID,
- };
+ // make sure the API is not created on every render
+ const quickstartState = useMemo(
+ () => ({
+ activateQuickstart,
+ allQuickStartStates,
+ setAllQuickStartStates,
+ activeQuickStartID,
+ setActiveQuickStartID,
+ }),
+ [activateQuickstart, allQuickStartStates, setAllQuickStartStates, activeQuickStartID, setActiveQuickStartID]
+ );
+
+ return quickstartState;
};
export default useQuickstartsStates;
diff --git a/src/components/QuickstartsCatalogRoute/QuickstartsCatalogRoute.tsx b/src/components/QuickstartsCatalogRoute/QuickstartsCatalogRoute.tsx
index 83cc57642..8a51292c7 100644
--- a/src/components/QuickstartsCatalogRoute/QuickstartsCatalogRoute.tsx
+++ b/src/components/QuickstartsCatalogRoute/QuickstartsCatalogRoute.tsx
@@ -1,21 +1,15 @@
import React from 'react';
-import { useSelector } from 'react-redux';
import QuickStartCatalog from '../QuickStart/QuickStartCatalog';
import { useIntl } from 'react-intl';
import messages from '../../locales/Messages';
-import { ReduxState } from '../../redux/store';
import { getUrl } from '../../hooks/useBundle';
+import { useAtom } from 'jotai';
+import { quickstartsDisabledAtom } from '../../state/atoms/quickstartsAtom';
const QuickstartCatalogRoute = () => {
const intl = useIntl();
const bundle = getUrl('bundle');
- const disabled = useSelector(
- ({
- chrome: {
- quickstarts: { disabled },
- },
- }: ReduxState) => disabled
- );
+ const disabled = useAtom(quickstartsDisabledAtom);
if (disabled) {
return (
diff --git a/src/components/RootApp/RootApp.tsx b/src/components/RootApp/RootApp.tsx
index 6ada6b464..eee153f94 100644
--- a/src/components/RootApp/RootApp.tsx
+++ b/src/components/RootApp/RootApp.tsx
@@ -1,53 +1,42 @@
-import React, { Suspense, lazy, memo, useContext, useEffect } from 'react';
+import React, { Suspense, lazy, memo, useContext, useEffect, useMemo } from 'react';
import { unstable_HistoryRouter as HistoryRouter, HistoryRouterProps } from 'react-router-dom';
import { HelpTopicContainer, QuickStart, QuickStartContainer, QuickStartContainerProps } from '@patternfly/quickstarts';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
import chromeHistory from '../../utils/chromeHistory';
import { FeatureFlagsProvider } from '../FeatureFlags';
import ScalprumRoot from './ScalprumRoot';
-import { useDispatch, useSelector } from 'react-redux';
-import { addQuickstart as addQuickstartAction, clearQuickstarts, populateQuickstartsCatalog } from '../../redux/actions';
import { LazyQuickStartCatalog } from '../QuickStart/LazyQuickStartCatalog';
import useQuickstartsStates from '../QuickStart/useQuickstartsStates';
import useHelpTopicState from '../QuickStart/useHelpTopicState';
import validateQuickstart from '../QuickStart/quickstartValidation';
import SegmentProvider from '../../analytics/SegmentProvider';
-import { ReduxState } from '../../redux/store';
-import { ITLess, chunkLoadErrorRefreshKey, getRouterBasename } from '../../utils/common';
+import { ITLess, chunkLoadErrorRefreshKey } from '../../utils/common';
import useUserSSOScopes from '../../hooks/useUserSSOScopes';
import { DeepRequired } from 'utility-types';
import ReactDOM from 'react-dom';
-import { FooterProps } from '../Footer/Footer';
import ChromeAuthContext, { ChromeAuthContextValue } from '../../auth/ChromeAuthContext';
import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
import { scalprumConfigAtom } from '../../state/atoms/scalprumConfigAtom';
+import { isDebuggerEnabledAtom } from '../../state/atoms/debuggerModalatom';
+import { addQuickstartToAppAtom, clearQuickstartsAtom, populateQuickstartsAppAtom, quickstartsAtom } from '../../state/atoms/quickstartsAtom';
const NotEntitledModal = lazy(() => import('../NotEntitledModal'));
const Debugger = lazy(() => import('../Debugger'));
-export type RootAppProps = FooterProps;
-
-const RootApp = memo((props: RootAppProps) => {
+const RootApp = memo(({ accountId }: { accountId?: string }) => {
const config = useAtomValue(scalprumConfigAtom);
- const { activateQuickstart, allQuickStartStates, setAllQuickStartStates, activeQuickStartID, setActiveQuickStartID } = useQuickstartsStates();
+ const { activateQuickstart, allQuickStartStates, setAllQuickStartStates, activeQuickStartID, setActiveQuickStartID } =
+ useQuickstartsStates(accountId);
const { helpTopics, addHelpTopics, disableTopics, enableTopics } = useHelpTopicState();
- const dispatch = useDispatch();
const activeModule = useAtomValue(activeModuleAtom);
- const quickStarts = useSelector(
- ({
- chrome: {
- quickstarts: { quickstarts },
- },
- }: ReduxState) => Object.values(quickstarts).flat()
- );
- const { user } = useContext(ChromeAuthContext) as DeepRequired;
- const isDebuggerEnabled = useSelector(({ chrome: { isDebuggerEnabled } }) => isDebuggerEnabled);
-
- // verify use loged in scopes
- useUserSSOScopes();
+ const quickstartsData = useAtomValue(quickstartsAtom);
+ const quickStarts = useMemo(() => Object.values(quickstartsData).flat(), [quickstartsData]);
+ const clearQuickstarts = useSetAtom(clearQuickstartsAtom);
+ const populateQuickstarts = useSetAtom(populateQuickstartsAppAtom);
+ const addQuickstartToApp = useSetAtom(addQuickstartToAppAtom);
useEffect(() => {
- dispatch(clearQuickstarts(activeQuickStartID));
+ clearQuickstarts(activeQuickStartID);
if (activeModule) {
let timeout: NodeJS.Timeout;
const moduleStorageKey = `${chunkLoadErrorRefreshKey}-${activeModule}`;
@@ -77,11 +66,15 @@ const RootApp = memo((props: RootAppProps) => {
* @param {array} qs Array of quick starts
*/
const updateQuickStarts = (key: string, qs: QuickStart[]) => {
- dispatch(populateQuickstartsCatalog(key, qs));
+ populateQuickstarts({ app: key, quickstarts: qs });
};
const addQuickstart = (key: string, qs: QuickStart): boolean => {
- return validateQuickstart(key, qs) ? !!dispatch(addQuickstartAction(key, qs)) : false;
+ if (validateQuickstart(key, qs)) {
+ addQuickstartToApp({ app: key, quickstart: qs });
+ return true;
+ }
+ return false;
};
const quickStartProps: QuickStartContainerProps = {
@@ -110,20 +103,19 @@ const RootApp = memo((props: RootAppProps) => {
Catalog: LazyQuickStartCatalog,
updateQuickStarts,
};
+
return (
-
+
{/*
-
- {user?.identity?.account_number && !ITLess() && isDebuggerEnabled && ReactDOM.createPortal(
+
-
@@ -134,4 +126,20 @@ const RootApp = memo((props: RootAppProps) => {
RootApp.displayName = 'MemoizedRootApp';
-export default RootApp;
+const AuthRoot = () => {
+ const { user, login } = useContext(ChromeAuthContext) as DeepRequired;
+ const isDebuggerEnabled = useAtomValue(isDebuggerEnabledAtom);
+
+ // verify use loged in scopes
+ useUserSSOScopes(login);
+ return (
+ <>
+
+ {user?.identity?.account_number && !ITLess() && isDebuggerEnabled && ReactDOM.createPortal(
+
-
-
-
-
-
+
+
+
+
+
+
+
+
);
getByLabelText = internalGetByLabelText;
});
@@ -237,7 +248,7 @@ describe('ScalprumRoot', () => {
},
});
- const { container } = render(
+ const { container } = await render(
@@ -280,7 +291,7 @@ describe('ScalprumRoot', () => {
},
});
- const { container } = render(
+ const { container } = await render(
diff --git a/src/components/RootApp/ScalprumRoot.tsx b/src/components/RootApp/ScalprumRoot.tsx
index 3ded2a6e1..764d2b5ff 100644
--- a/src/components/RootApp/ScalprumRoot.tsx
+++ b/src/components/RootApp/ScalprumRoot.tsx
@@ -1,20 +1,18 @@
import React, { Suspense, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
import axios from 'axios';
import { ScalprumProvider, ScalprumProviderProps } from '@scalprum/react-core';
-import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
+import { shallowEqual, useSelector, useStore } from 'react-redux';
import { Route, Routes } from 'react-router-dom';
import { HelpTopic, HelpTopicContext } from '@patternfly/quickstarts';
-import isEqual from 'lodash/isEqual';
import { AppsConfig } from '@scalprum/core';
import { ChromeAPI, EnableTopicsArgs } from '@redhat-cloud-services/types';
import { ChromeProvider } from '@redhat-cloud-services/chrome';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
import chromeHistory from '../../utils/chromeHistory';
import DefaultLayout from '../../layouts/DefaultLayout';
import AllServices from '../../layouts/AllServices';
import FavoritedServices from '../../layouts/FavoritedServices';
-import SatelliteToken from '../../layouts/SatelliteToken';
import historyListener from '../../utils/historyListener';
import SegmentContext from '../../analytics/SegmentContext';
import LoadingFallback from '../../utils/loading-fallback';
@@ -23,18 +21,23 @@ import { FlagTagsFilter, HelpTopicsAPI, QuickstartsApi } from '../../@types/type
import { createChromeContext } from '../../chrome/create-chrome';
import Navigation from '../Navigation';
import useHelpTopicManager from '../QuickStart/useHelpTopicManager';
-import Footer, { FooterProps } from '../Footer/Footer';
+import ChromeFooter from '../Footer/Footer';
import updateSharedScope from '../../chrome/update-shared-scope';
import useBundleVisitDetection from '../../hooks/useBundleVisitDetection';
import chromeApiWrapper from './chromeApiWrapper';
-import { ITLess, isBeta } from '../../utils/common';
+import { ITLess, getSevenDaysAgo } from '../../utils/common';
import InternalChromeContext from '../../utils/internalChromeContext';
import useChromeServiceEvents from '../../hooks/useChromeServiceEvents';
-import { populateNotifications } from '../../redux/actions';
import useTrackPendoUsage from '../../hooks/useTrackPendoUsage';
import ChromeAuthContext from '../../auth/ChromeAuthContext';
import { onRegisterModuleWriteAtom } from '../../state/atoms/chromeModuleAtom';
import useTabName from '../../hooks/useTabName';
+import { NotificationData, notificationDrawerDataAtom } from '../../state/atoms/notificationDrawerAtom';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { addNavListenerAtom, deleteNavListenerAtom } from '../../state/atoms/activeAppAtom';
+import BetaSwitcher from '../BetaSwitcher';
+import useHandlePendoScopeUpdate from '../../hooks/useHandlePendoScopeUpdate';
+import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
const ProductSelection = lazy(() => import('../Stratosphere/ProductSelection'));
@@ -43,218 +46,234 @@ const useGlobalFilter = (callback: (selectedTags?: FlagTagsFilter) => any) => {
return callback(selectedTags);
};
-export type ScalprumRootProps = FooterProps & {
+const ScalprumRoot = memo(
+ () => {
+ return (
+
+
+
+
+
+
+
+ );
+ // no props, no need to ever render based on parent changes
+ },
+ () => true
+);
+
+ScalprumRoot.displayName = 'MemoizedScalprumRoot';
+
+export type ChromeApiRootProps = {
config: AppsConfig;
helpTopicsAPI: HelpTopicsAPI;
quickstartsAPI: QuickstartsApi;
};
-const ScalprumRoot = memo(
- ({ config, helpTopicsAPI, quickstartsAPI, cookieElement, setCookieElement, ...props }: ScalprumRootProps) => {
- const { setFilteredHelpTopics } = useContext(HelpTopicContext);
- const dispatch = useDispatch();
- const internalFilteredTopics = useRef([]);
- const { analytics } = useContext(SegmentContext);
- const chromeAuth = useContext(ChromeAuthContext);
- const registerModule = useSetAtom(onRegisterModuleWriteAtom);
+const ChromeApiRoot = ({ config, helpTopicsAPI, quickstartsAPI }: ChromeApiRootProps) => {
+ const chromeAuth = useContext(ChromeAuthContext);
+ const mutableChromeApi = useRef();
+ const isPreview = useAtomValue(isPreviewAtom);
+ const addNavListener = useSetAtom(addNavListenerAtom);
+ const deleteNavListener = useSetAtom(deleteNavListenerAtom);
+ const { setFilteredHelpTopics } = useContext(HelpTopicContext);
+ const internalFilteredTopics = useRef([]);
+ const { analytics } = useContext(SegmentContext);
+ const registerModule = useSetAtom(onRegisterModuleWriteAtom);
+ const store = useStore();
+ const activeModule = useAtomValue(activeModuleAtom);
- const store = useStore();
- const mutableChromeApi = useRef();
+ // initialize WS event handling
+ const addWsEventListener = useChromeServiceEvents();
- // initialize WS event handling
- useChromeServiceEvents();
- // track pendo usage
- useTrackPendoUsage();
- // setting default tab title
- useTabName();
+ // track bundle visits
+ useBundleVisitDetection(chromeAuth.user?.identity?.internal?.org_id);
- async function getNotifications() {
- try {
- const notifications = await axios.get('/api/notifications/v1/notifications/drawer');
- dispatch(populateNotifications(notifications.data?.data || []));
- } catch (error) {
- console.error('Unable to get Notifications ', error);
- }
- }
+ // track pendo usage
+ useTrackPendoUsage();
+ // update pendo data on scope change
+ useHandlePendoScopeUpdate(chromeAuth.user, activeModule);
+ // setting default tab title
+ useTabName();
- const { setActiveTopic } = useHelpTopicManager(helpTopicsAPI);
+ const populateNotifications = useSetAtom(notificationDrawerDataAtom);
- function isStringArray(arr: EnableTopicsArgs): arr is string[] {
- return typeof arr[0] === 'string';
- }
- async function enableTopics(...names: EnableTopicsArgs) {
- let internalNames: string[] = [];
- let shouldAppend = false;
- if (isStringArray(names)) {
- internalNames = names;
- } else {
- internalNames = names[0].names;
- shouldAppend = !!names[0].append;
- }
- return helpTopicsAPI.enableTopics(...internalNames).then((res) => {
- internalFilteredTopics.current = shouldAppend
- ? [...internalFilteredTopics.current, ...res.filter((topic) => !internalFilteredTopics.current.find(({ name }) => name === topic.name))]
- : res;
- setFilteredHelpTopics?.(internalFilteredTopics.current);
- return res;
+ async function getNotifications() {
+ try {
+ const { data } = await axios.get<{ data: NotificationData[] }>(`/api/notifications/v1/notifications/drawer`, {
+ params: {
+ limit: 50,
+ sort_by: 'read:asc',
+ startDate: getSevenDaysAgo(),
+ },
});
+ populateNotifications(data?.data || []);
+ } catch (error) {
+ console.error('Unable to get Notifications ', error);
}
+ }
- function disableTopics(...topicsNames: string[]) {
- helpTopicsAPI.disableTopics(...topicsNames);
- internalFilteredTopics.current = internalFilteredTopics.current.filter((topic) => !topicsNames.includes(topic.name));
- setFilteredHelpTopics?.(internalFilteredTopics.current);
- }
+ useEffect(() => {
+ // prepare webpack module sharing scope overrides
+ updateSharedScope();
+ // get notifications drawer api
+ getNotifications();
+ const unregister = chromeHistory.listen(historyListener);
+ return () => {
+ if (typeof unregister === 'function') {
+ return unregister();
+ }
+ };
+ }, []);
+
+ const setPageMetadata = useCallback((pageOptions: any) => {
+ window._segment = {
+ ...window._segment,
+ pageOptions,
+ };
+ }, []);
+
+ const { setActiveTopic } = useHelpTopicManager(helpTopicsAPI);
- // track bundle visits
- useBundleVisitDetection();
+ function isStringArray(arr: EnableTopicsArgs): arr is string[] {
+ return typeof arr[0] === 'string';
+ }
+ async function enableTopics(...names: EnableTopicsArgs) {
+ let internalNames: string[] = [];
+ let shouldAppend = false;
+ if (isStringArray(names)) {
+ internalNames = names;
+ } else {
+ internalNames = names[0].names;
+ shouldAppend = !!names[0].append;
+ }
+ return helpTopicsAPI.enableTopics(...internalNames).then((res) => {
+ internalFilteredTopics.current = shouldAppend
+ ? [...internalFilteredTopics.current, ...res.filter((topic) => !internalFilteredTopics.current.find(({ name }) => name === topic.name))]
+ : res;
+ setFilteredHelpTopics?.(internalFilteredTopics.current);
+ return res;
+ });
+ }
- useEffect(() => {
- // prepare webpack module sharing scope overrides
- updateSharedScope();
- // get notifications drawer api
- getNotifications();
- const unregister = chromeHistory.listen(historyListener);
- return () => {
- if (typeof unregister === 'function') {
- return unregister();
- }
- };
- }, []);
+ function disableTopics(...topicsNames: string[]) {
+ helpTopicsAPI.disableTopics(...topicsNames);
+ internalFilteredTopics.current = internalFilteredTopics.current.filter((topic) => !topicsNames.includes(topic.name));
+ setFilteredHelpTopics?.(internalFilteredTopics.current);
+ }
- const setPageMetadata = useCallback((pageOptions: any) => {
- window._segment = {
- ...window._segment,
- pageOptions,
- };
- }, []);
+ const helpTopicsChromeApi = useMemo(
+ () => ({
+ ...helpTopicsAPI,
+ setActiveTopic,
+ enableTopics,
+ disableTopics,
+ closeHelpTopic: () => {
+ setActiveTopic('');
+ },
+ }),
+ []
+ );
- const helpTopicsChromeApi = useMemo(
- () => ({
- ...helpTopicsAPI,
- setActiveTopic,
- enableTopics,
- disableTopics,
- closeHelpTopic: () => {
- setActiveTopic('');
- },
- }),
- []
- );
+ useMemo(() => {
+ mutableChromeApi.current = createChromeContext({
+ analytics: analytics!,
+ helpTopics: helpTopicsChromeApi,
+ quickstartsAPI,
+ useGlobalFilter,
+ store,
+ setPageMetadata,
+ chromeAuth,
+ registerModule,
+ isPreview,
+ addNavListener,
+ deleteNavListener,
+ addWsEventListener,
+ });
+ }, [isPreview]);
- useMemo(() => {
- mutableChromeApi.current = createChromeContext({
- analytics: analytics!,
- helpTopics: helpTopicsChromeApi,
- quickstartsAPI,
- useGlobalFilter,
- store,
- setPageMetadata,
- chromeAuth,
- registerModule,
- });
- // reset chrome object after token (user) updates/changes
- }, [chromeAuth.token]);
+ if (!mutableChromeApi.current) {
+ return null;
+ }
- const scalprumProviderProps: ScalprumProviderProps<{ chrome: ChromeAPI }> = useMemo(() => {
- if (!mutableChromeApi.current) {
- throw new Error('Chrome API failed to initialize.');
- }
- // set the deprecated chrome API to window
- // eslint-disable-next-line rulesdir/no-chrome-api-call-from-window
- window.insights.chrome = chromeApiWrapper(mutableChromeApi.current);
- return {
- config,
- api: {
- chrome: mutableChromeApi.current,
- },
- pluginSDKOptions: {
- pluginLoaderOptions: {
- // sharedScope: scope,
- transformPluginManifest: (manifest) => {
- if (manifest.name === 'chrome') {
- return {
- ...manifest,
- // Do not include chrome chunks in manifest for chrome. It will result in an infinite loading loop
- // window.chrome always exists because chrome container is always initialized
- loadScripts: [],
- };
- }
- const newManifest = {
+ const scalprumProviderProps: ScalprumProviderProps<{ chrome: ChromeAPI }> = useMemo(() => {
+ if (!mutableChromeApi.current) {
+ throw new Error('Chrome API failed to initialize.');
+ }
+ // set the deprecated chrome API to window
+ // eslint-disable-next-line rulesdir/no-chrome-api-call-from-window
+ window.insights.chrome = chromeApiWrapper(mutableChromeApi.current);
+ return {
+ config,
+ api: {
+ chrome: mutableChromeApi.current,
+ },
+ pluginSDKOptions: {
+ pluginLoaderOptions: {
+ // sharedScope: scope,
+ transformPluginManifest: (manifest) => {
+ if (manifest.name === 'chrome') {
+ return {
...manifest,
- // Compatibility required for bot pure SDK plugins, HCC plugins and sdk v1/v2 plugins until all are on the same system.
- baseURL: manifest.name.includes('hac-') && !manifest.baseURL ? `${isBeta() ? '/beta' : ''}/api/plugins/${manifest.name}/` : '/',
- loadScripts: manifest.loadScripts?.map((script) => `${manifest.baseURL}${script}`.replace(/\/\//, '/')) ?? [
- `${manifest.baseURL ?? ''}plugin-entry.js`,
- ],
- registrationMethod: manifest.registrationMethod ?? 'callback',
+ // Do not include chrome chunks in manifest for chrome. It will result in an infinite loading loop
+ // window.chrome always exists because chrome container is always initialized
+ loadScripts: [],
};
- return newManifest;
- },
+ }
+ const newManifest = {
+ ...manifest,
+ // Compatibility required for bot pure SDK plugins, HCC plugins and sdk v1/v2 plugins until all are on the same system.
+ baseURL: manifest.name.includes('hac-') && !manifest.baseURL ? `${isPreview ? '/beta' : ''}/api/plugins/${manifest.name}/` : '/',
+ loadScripts: manifest.loadScripts?.map((script) => `${manifest.baseURL}${script}`.replace(/\/\//, '/')) ?? [
+ `${manifest.baseURL ?? ''}plugin-entry.js`,
+ ],
+ registrationMethod: manifest.registrationMethod ?? 'callback',
+ };
+ return newManifest;
},
},
- };
- }, [chromeAuth.token]);
+ },
+ };
+ }, [isPreview]);
- if (!mutableChromeApi.current) {
- return null;
- }
-
- return (
- /**
- * Once all applications are migrated to chrome 2:
- * - define chrome API in chrome root after it mounts
- * - copy these functions to window
- * - add deprecation warning to the window functions
- */
-
-
-
-
-
-
-
-
-
-
-
- );
- },
- // config rarely changes
- (prev, next) => isEqual(prev.config, next.config)
-);
-
-ScalprumRoot.displayName = 'MemoizedScalprumRoot';
+ return (
+
+
+
+
+ );
+};
-export default ScalprumRoot;
+export default ChromeApiRoot;
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index dd30eb4b7..336acde0a 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -10,6 +10,7 @@ import { moduleRoutesAtom } from '../../state/atoms/chromeModuleAtom';
const INTEGRATION_SOURCES = 'platform.sources.integrations';
const QuickstartCatalogRoute = lazy(() => import('../QuickstartsCatalogRoute'));
+const ModularInventoryRoute = lazy(() => import('../../inventoryPoc'));
const redirects = [
{
@@ -64,6 +65,7 @@ export type RoutesProps = {
const ChromeRoutes = ({ routesProps }: RoutesProps) => {
const enableIntegrations = useFlag(INTEGRATION_SOURCES);
+ const enableInventoryPOC = useFlag('platform.chrome.poc.inventory');
const featureFlags = useMemo>(() => ({ INTEGRATION_SOURCES: enableIntegrations }), [enableIntegrations]);
const moduleRoutes = useAtomValue(moduleRoutesAtom);
const showBundleCatalog = localStorage.getItem('chrome:experimental:quickstarts') === 'true';
@@ -92,6 +94,17 @@ const ChromeRoutes = ({ routesProps }: RoutesProps) => {
{moduleRoutes.map((app) => (
+
{viableRoutes.map((route) => (
diff --git a/src/components/Satellite/IPWhitelistTable.tsx b/src/components/Satellite/IPWhitelistTable.tsx
new file mode 100644
index 000000000..be63bd39c
--- /dev/null
+++ b/src/components/Satellite/IPWhitelistTable.tsx
@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react';
+import { debounce } from 'lodash';
+import {
+ ActionGroup,
+ Bullseye,
+ Button,
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateHeader,
+ EmptyStateVariant,
+ Form,
+ FormGroup,
+ FormHelperText,
+ HelperText,
+ HelperTextItem,
+ Modal,
+ ModalVariant,
+ Text,
+ TextContent,
+ TextInput,
+ ValidatedOptions,
+} from '@patternfly/react-core';
+import { InnerScrollContainer, OuterScrollContainer, Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import axios from 'axios';
+import SkeletonTable from '@redhat-cloud-services/frontend-components/SkeletonTable';
+
+type IPBlock = {
+ ip_block: string;
+ org_id: string;
+ created_at: string;
+};
+
+const IPWhitelistTable: React.FC = () => {
+ const [allAddresses, setAllAddresses] = useState([]);
+ const [loaded, setLoaded] = useState(false);
+ const [actionPending, setActionPending] = useState(false);
+ const [inputAddresses, setInputAddresses] = useState('');
+ const [inputAddressesValidated, setInputAddressesesValidated] = useState(false);
+ const [removeAddresses, setRemoveAddresses] = useState('');
+ const [isIPModalOpen, setIsIPModalOpen] = useState(false);
+ const [isIPRemoveModalOpen, setIsIPRemoveModalOpen] = useState(false);
+
+ const getIPAddresses = () => {
+ return axios.get('/api/mbop/v1/allowlist');
+ };
+
+ const removeIPAddresses = (ipBlock: string) => {
+ return axios.delete(`/api/mbop/v1/allowlist?block=${ipBlock}`);
+ };
+
+ const addIPAddresses = (ipBlock: string) => {
+ return axios.post('/api/mbop/v1/allowlist', { ip_block: ipBlock });
+ };
+
+ useEffect(() => {
+ if (!loaded && !actionPending) {
+ getIPAddresses()
+ .then((res) => {
+ setAllAddresses(res.data);
+ setLoaded(true);
+ })
+ .catch((err) => console.error(err));
+ }
+ }, [loaded, actionPending]);
+
+ const onChangedAddresses = (value: string) => {
+ setInputAddresses(value);
+ setInputAddressesesValidated(validateIPAddress(value));
+ };
+
+ const onSubmitAddresses = () => {
+ setActionPending(true);
+ addIPAddresses(inputAddresses)
+ .then(() => {
+ setInputAddresses('');
+ setIsIPModalOpen(false);
+ setLoaded(false);
+ return getIPAddresses();
+ })
+ .then((res) => {
+ setAllAddresses(res.data);
+ setLoaded(true);
+ })
+ .catch((err) => console.error(err))
+ .finally(() => setActionPending(false));
+ };
+
+ const onRemoveAddresses = () => {
+ setActionPending(true);
+ removeIPAddresses(removeAddresses)
+ .then(() => {
+ setRemoveAddresses('');
+ setIsIPRemoveModalOpen(false);
+ setLoaded(false);
+ return getIPAddresses();
+ })
+ .then((res) => {
+ setAllAddresses(res.data);
+ setLoaded(true);
+ })
+ .catch((err) => console.error(err))
+ .finally(() => setActionPending(false));
+ };
+
+ const onChangedAddressesDebounced = debounce(onChangedAddresses, 500);
+
+ const validateIPAddress = (address: string) => {
+ return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\/([1-9]|[12][0-9]|3[0-2]))?$/.test(
+ address
+ );
+ };
+
+ const validationError = inputAddresses.length > 0 && !inputAddressesValidated;
+
+ const addIPModal = (
+ {
+ setInputAddresses('');
+ setIsIPModalOpen(false);
+ }}
+ title={'Add IP addresses to allowlist'}
+ variant={ModalVariant.medium}
+ >
+
+
+ );
+
+ const removeIPModal = (
+ {
+ setRemoveAddresses('');
+ setIsIPRemoveModalOpen(false);
+ }}
+ title={'Remove IP addresses from allowlist'}
+ variant={ModalVariant.medium}
+ >
+
+
+ );
+
+ const columnNames = {
+ ip_block: 'IP Block',
+ org_id: 'Org ID',
+ created_at: 'Created At',
+ remove: '',
+ };
+
+ const skeletonTable =
+
+
+
+
+ Before connecting to your satellite servers, Red Hat needs to add your IP address or range of IP addresses to an allow-list.
+
+
+
+
+
+ );
+
+ const ipTable = (
+
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ {addIPModal}
+ {removeIPModal}
+ <>
+ {loaded ? ipTable : skeletonTable}
+ (false);
+ const [inFlight, setInFlight] = useState(false);
+ const [currentFeedbackType, setcurrentFeedbackType] = useState(feedbackType);
+
+ useEffect(() => {
+ setcurrentFeedbackType(feedbackType);
+ }, [feedbackType]);
+
+ const trackFeedback = (type: SearchFeedbackType) => {
+ if (!ready || !analytics || inFlight) {
+ return;
+ }
+
+ setInFlight(true);
+ // even if the track API call fails - the analytics API resolves the promise with the context and no indication of failure (retries internally)
+ analytics
+ .track(type as string, { query, results })
+ .then(() => {
+ setcurrentFeedbackType(type);
+ onFeedbackSubmitted?.(type);
+ })
+ .catch((err) => {
+ console.error(err);
+ setError(true);
+ })
+ .finally(() => {
+ setInFlight(false);
+ });
+ };
+
+ // TODO move these for translation
+ let label = 'Are these results helpful?';
+ if (currentFeedbackType) {
+ label = 'Thank you for your feedback!';
+ } else if (error) {
+ label = 'Something went wrong. Please try again.';
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export default SearchFeedback;
diff --git a/src/components/Search/SearchInput.tsx b/src/components/Search/SearchInput.tsx
index d76e28b5b..356809fe3 100644
--- a/src/components/Search/SearchInput.tsx
+++ b/src/components/Search/SearchInput.tsx
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import debounce from 'lodash/debounce';
import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
-import { Menu, MenuContent, MenuGroup, MenuItem, MenuList } from '@patternfly/react-core/dist/dynamic/components/Menu';
+import { Menu, MenuContent, MenuFooter, MenuGroup, MenuItem, MenuList } from '@patternfly/react-core/dist/dynamic/components/Menu';
import { SearchInput as PFSearchInput, SearchInputProps } from '@patternfly/react-core/dist/dynamic/components/SearchInput';
import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
import { Popper } from '@patternfly/react-core/dist/dynamic/helpers/Popper/Popper';
@@ -17,6 +17,10 @@ import SearchDescription from './SearchDescription';
import { useAtomValue } from 'jotai';
import { asyncLocalOrama } from '../../state/atoms/localSearchAtom';
import { localQuery } from '../../utils/localSearch';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { ReleaseEnv } from '../../@types/types.d';
+import type { SearchItem } from './SearchTypes';
+import SearchFeedback, { SearchFeedbackType } from './SearchFeedback';
export type SearchInputprops = {
isExpanded?: boolean;
@@ -33,13 +37,6 @@ const getMaxMenuHeight = (menuElement?: HTMLDivElement | null) => {
return bodyHeight - menuTopOffset - 4;
};
-type SearchItem = {
- title: string;
- bundleTitle: string;
- description: string;
- pathname: string;
-};
-
type SearchInputListener = {
onStateChange: (isOpen: boolean) => void;
};
@@ -47,8 +44,10 @@ type SearchInputListener = {
const SearchInput = ({ onStateChange }: SearchInputListener) => {
const [isOpen, setIsOpen] = useState(false);
const [searchValue, setSearchValue] = useState('');
+ const [currentFeedbackType, setcurrentFeedbackType] = useState();
const [isFetching, setIsFetching] = useState(false);
const [searchItems, setSearchItems] = useState([]);
+ const isPreview = useAtomValue(isPreviewAtom);
const { ready, analytics } = useSegment();
const blockCloseEvent = useRef(false);
const asyncLocalOramaData = useAtomValue(asyncLocalOrama);
@@ -63,6 +62,12 @@ const SearchInput = ({ onStateChange }: SearchInputListener) => {
const resultCount = searchItems.length;
+ useEffect(() => {
+ if (currentFeedbackType) {
+ setcurrentFeedbackType(undefined);
+ }
+ }, [searchValue]);
+
const handleMenuKeys = (event: KeyboardEvent) => {
if (!isOpen) {
return;
@@ -146,7 +151,7 @@ const SearchInput = ({ onStateChange }: SearchInputListener) => {
const handleChange: SearchInputProps['onChange'] = async (_e, value) => {
setSearchValue(value);
setIsFetching(true);
- const results = await localQuery(asyncLocalOramaData, value);
+ const results = await localQuery(asyncLocalOramaData, value, isPreview ? ReleaseEnv.PREVIEW : ReleaseEnv.STABLE);
setSearchItems(results ?? []);
isMounted.current && setIsFetching(false);
if (ready && analytics) {
@@ -181,21 +186,31 @@ const SearchInput = ({ onStateChange }: SearchInputListener) => {
setIsOpen(false);
onStateChange(false);
}}
- {...(!md && {
+ {...{
expandableInput: {
isExpanded: willExpand(),
onToggleExpand,
toggleAriaLabel: 'Expandable search input toggle',
},
- })}
+ }}
onClick={onInputClick}
ref={toggleRef}
onKeyDown={onToggleKeyDown}
className={isExpanded ? 'pf-u-flex-grow-1' : 'chr-c-search__collapsed'}
/>
);
+
+ let menuFooter;
+ if (searchItems.length > 0 && !isFetching) {
+ menuFooter = (
+
+
+ );
+ }
+
const menu = (
-
-
+ {LoadingFallback}
+
+
+
+
+
+
+ You're in Hybrid Cloud Console Preview mode.{' '}
+
+ You're in Hybrid Cloud Console production.{' '}
+
+ }
+ aria-label="preview-toggle"
+ isChecked={isPreview}
+ onChange={(_e, checked) => togglePreviewWithCheck(checked)}
+ isReversed
+ />
+
+
+
+ {!isPreview ? (
+
+
+ ) : null}
+
+ {!uiPreviewSeen ?
+ );
+};
+
+export default BetaSwitcher;
diff --git a/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx b/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx
new file mode 100644
index 000000000..1dbddb291
--- /dev/null
+++ b/src/components/BetaSwitcher/BetaSwitcherDropdown.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { EllipsisVIcon } from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { CogIcon } from '@patternfly/react-icons/dist/dynamic/icons/cog-icon';
+import { useSetAtom } from 'jotai';
+import { hidePreviewBannerAtom } from '../../state/atoms/releaseAtom';
+
+const BetaSwitcherDropdown = () => {
+ const hidePreview = useSetAtom(hidePreviewBannerAtom);
+ const [isOpen, setIsOpen] = useState(false);
+
+ const onToggleClick = () => {
+ setIsOpen((prev) => !prev);
+ };
+
+ const description = (
+ To return to production, turn off Preview mode
+
+ }
+ labelOff={
+ To see new pre-production features, turn on Preview mode
+
-
+
{intl.formatMessage(messages.filterByTagsPopoverContent1)}{' '}
@@ -61,7 +61,7 @@ const GroupFilterInputGroup: React.FunctionComponent
{intl.formatMessage(messages.filterByTagsPopoverContent2)}{' '}
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 36d9eb1dc..da1b10426 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -40,14 +40,6 @@
}
}
-
- .chr-c-beta-switcher {
- --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--sm);
- .pf-v5-c-switch__label {
- color: var(--pf-v5-global--palette--black-400) !important;
- padding-right: 0;
- }
- }
.chr-c-dropdown-item__stack {
white-space: nowrap;
* { color: var(--pf-v5-c-menu__list-item--m-disabled__item--Color); }
@@ -78,4 +70,7 @@
&:hover {--pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-global--palette--red-200)}
}
}
+ .chr-c-menu-settings .pf-v5-c-menu__group:first-of-type > .pf-v5-c-menu__group-title {
+ display: none;
+ }
}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index a8e4dc5e8..a7bbd9558 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
-import React, { Fragment, Suspense, useContext, useState } from 'react';
+import React, { Fragment, Suspense, memo, useContext, useState } from 'react';
import ReactDOM from 'react-dom';
+import { useFlag } from '@unleash/proxy-client-react';
import Tools from './Tools';
import UnAuthtedHeader from './UnAuthtedHeader';
import { MastheadBrand, MastheadContent, MastheadMain } from '@patternfly/react-core/dist/dynamic/components/Masthead';
@@ -15,7 +16,6 @@ import { DeepRequired } from 'utility-types';
import './Header.scss';
import { activationRequestURLs } from '../../utils/consts';
-import { ITLess } from '../../utils/common';
import SearchInput from '../Search/SearchInput';
import AllServicesDropdown from '../AllServicesDropdown/AllServicesDropdown';
import Breadcrumbs, { Breadcrumbsprops } from '../Breadcrumbs/Breadcrumbs';
@@ -23,10 +23,11 @@ import useWindowWidth from '../../hooks/useWindowWidth';
import ChromeAuthContext, { ChromeAuthContextValue } from '../../auth/ChromeAuthContext';
const FeedbackRoute = () => {
+ // controls feedback tab visibility
const paths =
localStorage.getItem('chrome:experimental:feedback') === 'true'
? ['*']
- : ['/', 'insights/*', 'settings/*', 'openshift/*', 'application-services/*', 'ansible/*', 'edge/*', 'subscriptions/*'];
+ : ['/', 'insights/*', 'settings/*', 'openshift/*', 'application-services/*', 'ansible/*', 'edge/*', 'subscriptions/*', 'iam/*'];
return (
{paths.map((path) => (
@@ -36,72 +37,123 @@ const FeedbackRoute = () => {
);
};
+function hasUser(user: { orgId?: string; username?: string; accountNumber?: string; email?: string }): user is Required {
+ return !!(user.orgId && user.username && user.accountNumber && user.email);
+}
+
+const MemoizedHeader = memo(
+ ({
+ breadcrumbsProps,
+ orgId,
+ username,
+ accountNumber,
+ email,
+ isOrgAdmin = false,
+ isInternal = false,
+ }: {
+ breadcrumbsProps?: Breadcrumbsprops;
+ orgId: string;
+ username: string;
+ accountNumber: string;
+ email: string;
+ isOrgAdmin?: boolean;
+ isInternal?: boolean;
+ }) => {
+ const search = new URLSearchParams(window.location.search).keys().next().value;
+ const isActivationPath = activationRequestURLs.includes(search);
+ const { pathname } = useLocation();
+ const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);
+ const { md, lg } = useWindowWidth();
+ const [searchOpen, setSearchOpen] = useState(false);
+ const hideAllServices = (isOpen: boolean) => {
+ setSearchOpen(isOpen);
+ };
+ const isITLess = useFlag('platform.chrome.itless');
+
+ const userReady = hasUser({ orgId, username, accountNumber, email });
+
+ return (
+
+
+
+
+
+
+ {!lg &&
+
+
+
+
+ {orgId && !isITLess && ReactDOM.createPortal(
+
+
+ {userReady && (
+
+ {!(!md && searchOpen) &&
+ )}
+ {userReady && !isITLess && (
+
+
+ )}
+
+
+
+
+
+
+ {lg &&
+
+
+
+ {noBreadcrumb && (
+
+
+ )}
+
+ );
+ }
+);
+
+MemoizedHeader.displayName = 'MemoizedHeader';
+
export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbsprops }) => {
+ // extract valid data from the context
+ // we don't want to use the context directly to prevent unnecessary re-renders
const { user } = useContext(ChromeAuthContext) as DeepRequired;
- const search = new URLSearchParams(window.location.search).keys().next().value;
- const isActivationPath = activationRequestURLs.includes(search);
- const isITLessEnv = ITLess();
- const { pathname } = useLocation();
- const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);
- const { md, lg } = useWindowWidth();
- const [searchOpen, setSearchOpen] = useState(false);
- const hideAllServices = (isOpen: boolean) => {
- setSearchOpen(isOpen);
- };
-
return (
-
-
-
-
-
-
- {!lg &&
-
-
-
-
- {user?.identity?.org_id && !isITLessEnv && ReactDOM.createPortal(
-
-
- {user && (
-
- {!(!md && searchOpen) &&
- )}
- {user && !isITLessEnv && (
-
-
- )}
-
-
-
-
-
-
- {lg &&
-
-
-
- {noBreadcrumb && (
-
-
- )}
-
+
`;
diff --git a/src/components/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap b/src/components/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap
index bc676af67..afda2c11f 100644
--- a/src/components/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap
+++ b/src/components/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap
@@ -5,6 +5,9 @@ exports[`UserToggle should render correctly as org admin 1`] = `
-
Foo
@@ -85,13 +78,6 @@ exports[`ChromeNavGroup should render nav item group with items 1`] = `
id="Foo"
>
-
Foo
diff --git a/src/components/Navigation/__snapshots__/ChromeNavItemFactory.test.js.snap b/src/components/Navigation/__snapshots__/ChromeNavItemFactory.test.js.snap
index 18a3403a9..103e33b81 100644
--- a/src/components/Navigation/__snapshots__/ChromeNavItemFactory.test.js.snap
+++ b/src/components/Navigation/__snapshots__/ChromeNavItemFactory.test.js.snap
@@ -80,13 +80,6 @@ exports[`ChromeNavItemFactory should render chrome group nav item 1`] = `
id="group"
>
-
group
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
index 71605853b..c84e0ddf9 100644
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@@ -1,22 +1,24 @@
import React, { Fragment, useRef, useState } from 'react';
import { Nav, NavList } from '@patternfly/react-core/dist/dynamic/components/Nav';
import { PageContextConsumer } from '@patternfly/react-core/dist/dynamic/components/Page';
+import { useAtomValue } from 'jotai';
import NavContext from './navContext';
import componentMapper from './componentMapper';
import ChromeNavItemFactory from './ChromeNavItemFactory';
import BetaInfoModal from '../../components/BetaInfoModal';
-import { isBeta } from '../../utils/common';
import NavLoader from './Loader';
import ChromeNavItem from './ChromeNavItem';
import type { Navigation as NavigationSchema } from '../../@types/types';
import { useFlag } from '@unleash/proxy-client-react';
import { getUrl } from '../../hooks/useBundle';
+import { isPreviewAtom } from '../../state/atoms/releaseAtom';
export type NavigationProps = { loaded: boolean; schema: NavigationSchema };
const Navigation: React.FC| {columnNames.ip_block} | +{columnNames.org_id} | +{columnNames.created_at} | +{columnNames.remove} | +
|---|---|---|---|
| {ipBlock.ip_block} | +{ipBlock.org_id} | +{new Date(ipBlock.created_at).toLocaleString()} | +
+ |
+
+
+
+
+
+ );
+};
+
+export default IPWhitelistTable;
diff --git a/src/components/Search/SearchFeedback.scss b/src/components/Search/SearchFeedback.scss
new file mode 100644
index 000000000..a284bf41c
--- /dev/null
+++ b/src/components/Search/SearchFeedback.scss
@@ -0,0 +1,5 @@
+.chr-c-search-feedback.pf-v5-c-menu__group {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
diff --git a/src/components/Search/SearchFeedback.test.tsx b/src/components/Search/SearchFeedback.test.tsx
new file mode 100644
index 000000000..2072841bd
--- /dev/null
+++ b/src/components/Search/SearchFeedback.test.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import SearchFeedback, { SEARCH_FEEDBACK_NEGATIVE, SEARCH_FEEDBACK_POSITIVE } from './SearchFeedback';
+import { SearchItem } from './SearchTypes';
+import { useSegment } from '../../analytics/useSegment';
+
+jest.mock('../../analytics/useSegment');
+
+describe('SearchFeedback', () => {
+ let results: SearchItem[];
+ let query: string;
+
+ beforeEach(() => {
+ results = [
+ {
+ title: 'foo',
+ bundleTitle: 'foobundle',
+ description: 'Foo service',
+ pathname: '/foo/bar',
+ },
+ ];
+ query = 'foo';
+ (useSegment as jest.Mock).mockImplementation(() => ({
+ ready: false,
+ analytics: undefined,
+ }));
+ });
+
+ it('should render correctly', () => {
+ render(