FooBar
,
+ };
+
+ setIsReady(true);
+ return () => {
+ removeScalprum();
+ };
+ }, []);
+
+ if (!isReady) {
+ return null;
+ }
+
+ return (
+
+ {err ?
+ );
+ };
+
+ const Component = createEnv(code, Component error handler
:Normal render
} + +
+ {err ?
+ );
+ };
+ const Component = createEnv(code, Component error handler
:Normal render
} + +
+
+ This title should be visible
+
+
+ );
+};
+
+const Wrapper: React.FC{CHILD_TEXT}
+ {Object.entries(authContextMethods).map(([key, value]) => ( + + ))} +
+ navigate
+
+
+
+
+
+ );
+};
+
+describe('HelpTopicManager', () => {
+ let store: Store...
+ )
+}
+```
+
+## Full list of chrome functions
+
+```js
+chrome: {
+ auth: {
+ getOfflineToken,
+ doOffline,
+ getToken,
+ getUser,
+ qe,
+ logout,
+ login,
+ },
+ isProd,
+ isBeta,
+ isPenTest,
+ getBundle,
+ getApp,
+ getEnvironment,
+ createCase,
+ visibilityFunctions,
+ init,
+ updateDocumentTitle
+},
+```
+
+## Update document title
+
+Please do not update title directly via `document.title`. Use one of following options.
+
+### While identifying app
+This is prefered way if the document title stays the same on each app page.
+```js
+chrome.identifyApp('advisor', 'App title');
+```
+
+### Using updateDocumentTitle function
+Can be used for changing app title in different app pages with a ` | console.redhat.com` suffix added automatically if not disabled by a second param.
+```js
+chrome.updateDocumentTitle('New title without suffix', true)
+```
+
+## Global events
+
+The following events can be observed:
+
+* `APP_NAVIGATION` - fired when the application navigation option is selected. `event.domEvent.href` can be used to access navigation link href and compute application route.
+* `GLOBAL_FILTER_UPDATE` - fired when user selects anything in global filter. Object with all selected tags is returned. Tags are groupped together under namespace in which there is another object with keys as tag key and additional meta information.
+
+## Global actions
+
+* You can also use Chrome to update a page action and object ID for OUIA. Functions are available from the `useChrome` hook. You can use `appAction('action')` to activate a certain action, and `appObjectId('object-id')` to activate a certain ID. For instance, if you want to open the "edit name" dialog for an entity with id=5, you should call `appAction('edit-name')` and then `appObjectId(5)`. Once the user is done editing, you have to call `appAction()` and `appObjectId()` in order to indicate that the action is done.
+
+* If you want to scope global filter to specific source you can do that by firing `globalFilterScope('insights')` (this will populate global filter with tags for systems only from insights source).
+
+## Global filter
+
+On all insights application users expect to see global filter with predefined options and every app should integrate with it.
+
+### User selects in global filter
+
+By default subscribing to `GLOBAL_FILTER_UPDATE` will return you an object with namespace and key as object keys. This is for more complex behaviors, when you want to filter our certain items or to do something else with this complex object.
+
+#### Plain object descrition
+
+Usefull if you know the partials and want to deal with the RAW data.
+
+```js
+const chrome = useChrome()
+chrome.on('GLOBAL_FILTER_UPDATE', ({ data }) => {
+ /*
+ do something with data object, the shape of this object is
+ { 'namespace with spaces': { val: { isSelected: true, value: 'something' } } }
+ if uses selects SAP the object will contain
+ { Workloads: { SAP: { isSelected } } }
+ is user selects SID the object will contain
+ { 'SAP ID (SID)': { AAA: { isSelected: true } } }
+ */
+ // if you want to break the data object to its parts you can do that with desctrucor
+ const { 'SAP ID (SID)': SID, Workloads, ...tags } = data;
+});
+```
+
+#### Basic usage of `mapGlobalFilter` function
+
+If you simply want to filter systems based on these values we provide a helper function `mapGlobalFilter` from the `useChrome` hook, which transforms object into one level array with tags in `${namespace}/${key}=${value}` shape. This function accepts one parameter, that is the filter object returned from `GLOBAL_FILTER_UPDATE` event.
+
+```js
+const chrome = useChrome()
+chrome.on('GLOBAL_FILTER_UPDATE', ({ data }) => {
+ const selectedTags = chrome.mapGlobalFilter?.(data);
+ // [namespace with spaces/val=something] if you are using axios, this is the correct shape
+});
+```
+
+#### Usage of `mapGlobalFilter` function with encoded data
+
+If you want to encode tag partials (namespace, key or value) you can pass `true` as second parameter to this function to enable `uriEncoding`.
+
+```js
+const chrome = useChrome()
+chrome.on('GLOBAL_FILTER_UPDATE', ({ data }) => {
+ const selectedTags = chrome.mapGlobalFilter.(data, true);
+ // [namespace%20with%20spaces/val=something] if you are not using axios, this is the correct way
+ // be careful when using this approach as it can escape twice (once manually and second time when sending data)
+});
+```
+
+#### Prefered way of consuming data in structured format
+
+If you want to consume each partial (workoads, SID and tags) as seperate entities instead of filtering them out you can pass 3rd argument as true and this function will return array with these items.
+
+Usage with preformatted filter
+
+```js
+const chrome = useChrome()
+chrome.on('GLOBAL_FILTER_UPDATE', ({ data }) => {
+ const [ workloads, SID, selectedTags ] = chrome.mapGlobalFilter.(data, false, true);
+ // workloads = { SAP: { isSelected: true } }
+ // SID = [1543, 48723, 'AAA'] (only selected SIDs)
+ // selectedTags = [namespace with spaces/val=something]
+});
+```
+
+### Toggle global filter on certain pages
+
+If you wish to hide the global filter on any route simply call `hideGlobalFilter()` from the `useChrome` hook. Once you do that global filter will be hidden on all pages in your application.
+
+If you want to hide it on certain screens call `hideGlobalFilter()` on them (preferably in `useEffect` after component mounts) and on screens you want to show it call `hideGlobalFilter(false)`.
+
+```js
+const chrome = ueChrome()
+
+chrome.hideGlobalFilter()
+```
+
+## Creating Support Cases
+
+You can access the ability to create support cases by calling a function from the `useChrome` hook.
+
+```js
+const chrome = ueChrome()
+
+chrome.createCase()
+```
+
+By default, the fields that are sent are:
+
+```js
+ createdBy: 'foo-username',
+ environment: 'Production',
+ product: 'Red Hat Insights',
+```
+
+You have the ability to add a few custom fields with the following API:
+
+``` js
+const chrome = useChrome()
+
+chrome.createCase({
+ caseFields: {
+ key: 'any case specific values'
+ },
+ // anything not inside of "caseFields" will be sent to sentry
+ foo: {
+ key: 'additional value'
+ }
+})
+```
+
+You can also configure the version and product of the support cases:
+
+```js
+const chrome = useChrome()
+
+chrome.createCase({
+ supportCaseData: {
+ product: 'Red Hat Insights',
+ version: 'Advisor',
+ },
+ caseFields: {}
+ ...
+})
+```
+
+## Deprecated functions
+
+* `chrome.navigation` this is a legacy function and is no longer supported. Invoking it has no effect.
+
+## Register custom module
+
+If you want to register custom federated module you can do so by simply calling `chrome.registerModule(module)`.
+
+Where the `module` is name of the application that exposes fed-mods.json for loading federated modules. This function also consumes second parameter `manifest` to point where the manifest is located. For instance if your manifest is located at `/apps/$APP_NAME/js/static/manifest.json` where `$APP_NAME` is name of your application you want to pass in your path.
+
+### Example of usage
+
+If you are going to use chrome async component, make sure that you register the module before using it. If the module is not registered it will throw an error upon loading, you can safely register all modules you wish to use either on app render or conditionally check if user has rights for such screen partial and register right before calling the async component loader.
+
+Once you register the module you can use [AsyncComponent](https://github.com/RedHatInsights/frontend-components/blob/master/packages/components/src/AsyncComponent/index.js) from frontend-components.
+
+
+```JSX
+import { React } from 'react'
+import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
+
+const MyCmp = () =>
+
+
+
+
+
+
+
+
+
+ )}
+
+ }
+ />
+ );
+};
+
+export default AllServicesDropdown;
diff --git a/src/components/AllServicesDropdown/AllServicesGallery.tsx b/src/components/AllServicesDropdown/AllServicesGallery.tsx
new file mode 100644
index 000000000..293a6ca2e
--- /dev/null
+++ b/src/components/AllServicesDropdown/AllServicesGallery.tsx
@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
+import { AllServicesGroup, AllServicesLink, AllServicesSection, isAllServicesGroup } from '../AllServices/allServicesLinks';
+import AllServicesGalleryLink from './AllServicesGalleryLink';
+import AllServicesGallerySection from './AllServicesGallerySection';
+import { titleToId } from '../../utils/common';
+
+export type AllServicesGalleryProps = {
+ selectedService: AllServicesSection;
+};
+
+const AllServicesGallery = ({ selectedService }: AllServicesGalleryProps) => {
+ const sections: AllServicesGroup[] = [];
+ const links: AllServicesLink[] = [];
+ selectedService.links.forEach((link) => {
+ if (isAllServicesGroup(link)) {
+ sections.push(link);
+ } else {
+ links.push(link);
+ }
+ });
+ return (
+ {title}
+
+
+
+ );
+};
+
+export default AllServicesGallerySection;
diff --git a/src/components/AllServicesDropdown/AllServicesMenu.tsx b/src/components/AllServicesDropdown/AllServicesMenu.tsx
new file mode 100644
index 000000000..7e4cc2cb7
--- /dev/null
+++ b/src/components/AllServicesDropdown/AllServicesMenu.tsx
@@ -0,0 +1,139 @@
+import React, { Fragment } from 'react';
+import { Backdrop } from '@patternfly/react-core/dist/dynamic/components/Backdrop';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { Card, CardBody, CardHeader } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { Stack, StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { Panel, PanelMain } from '@patternfly/react-core/dist/dynamic/components/Panel';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core/dist/dynamic/components/Sidebar';
+import { TabContent } from '@patternfly/react-core/dist/dynamic/components/Tabs';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
+
+import TimesIcon from '@patternfly/react-icons/dist/dynamic/icons/times-icon';
+import type { AllServicesSection } from '../AllServices/allServicesLinks';
+import FavoriteServicesGallery from '../FavoriteServices/ServicesGallery';
+import AllServicesTabs from './AllServicesTabs';
+import AllServicesGallery from './AllServicesGallery';
+import { ServiceTileProps } from '../FavoriteServices/ServiceTile';
+import QuickAccess from '../FavoriteServices/QuickAccess';
+import { AllServicesDropdownContext } from './common';
+import { hidePreviewBannerAtom } from '../../state/atoms/releaseAtom';
+
+export type AllServicesMenuProps = {
+ setIsOpen: (isOpen: boolean) => void;
+ isOpen: boolean;
+ menuRef: React.RefObject
+
+ {links.map((link, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsOpen(!isOpen)}>
+ {activeTabKey === FAVORITE_TAB_ID ? 'Favorites' : selectedService.title}
+
+
+
+ {activeTabKey === FAVORITE_TAB_ID ? (
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ {LoadingFallback}
+
+
+ {intl.formatMessage(messages.changesComing)}
+
+
+ );
+};
+
+export default Banner;
diff --git a/src/components/BetaInfoModal/BetaInfoModal.tsx b/src/components/BetaInfoModal/BetaInfoModal.tsx
new file mode 100644
index 000000000..90e04ba16
--- /dev/null
+++ b/src/components/BetaInfoModal/BetaInfoModal.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/dynamic/icons/info-circle-icon';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
+import { Button, ButtonProps } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import { Modal, ModalProps, ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+
+import { useIntl } from 'react-intl';
+import messages from '../../locales/Messages';
+
+export type BetaInfoModalProps = {
+ isOpen?: boolean;
+ onClick: ButtonProps['onClick'];
+ onCancel: ModalProps['onClose'];
+ menuItemClicked?: string;
+};
+const BetaInfoModal = ({ isOpen, onClick, onCancel, menuItemClicked }: BetaInfoModalProps) => {
+ const intl = useIntl();
+ return (
+
+
+
+
+ {`${menuItemClicked} is only available in our Preview Environment`}
+ {intl.formatMessage(messages.tryThisFeatureInBeta)}
+ {intl.formatMessage(messages.afterBetaUse)}
+
+
+
+
+ {intl.formatMessage(messages.learnMoreABoutBeta)}
+
+
+
+
+
+
+
+
+
+ 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
+
+ {!hideNav &&
+
+
+ {segments.map(({ title, href }, index) => (
+ (
+
+ ))}
+
+
+ {leafHref && (
+
+ favoritePage(leafHref)}
+ unfavoritePage={() => unfavoritePage(leafHref)}
+ isFavorited={!!isFavorited}
+ />
+
+ )}
+
+
+
+ );
+};
+
+export default BreadcrumbsFavorites;
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
new file mode 100644
index 000000000..3ff68ca58
--- /dev/null
+++ b/src/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';
diff --git a/src/components/ChromeLink/ChromeLink.test.js b/src/components/ChromeLink/ChromeLink.test.js
new file mode 100644
index 000000000..daae5bba6
--- /dev/null
+++ b/src/components/ChromeLink/ChromeLink.test.js
@@ -0,0 +1,146 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Provider } from 'react-redux';
+import { act, fireEvent, render } from '@testing-library/react';
+import createMockStore from 'redux-mock-store';
+import { MemoryRouter } from 'react-router-dom';
+import ChromeLink from './ChromeLink';
+import NavContext from '../Navigation/navContext';
+
+const LinkContext = ({
+ store,
+ providerValue = {
+ onLinkClick: jest.fn(),
+ },
+ children,
+}) => (
+
+
+ );
+ },
+ // prevent unnecessary re-render that can trigger initialization phase of a module
+ (prevProps, nextProps) =>
+ prevProps.scope === nextProps.scope &&
+ prevProps.module === nextProps.module &&
+ prevProps.scopeClass === nextProps.scopeClass &&
+ prevProps.path === nextProps.path
+);
+
+export default ChromeRoute;
diff --git a/src/components/ChromeRoute/index.ts b/src/components/ChromeRoute/index.ts
new file mode 100644
index 000000000..7e66438c2
--- /dev/null
+++ b/src/components/ChromeRoute/index.ts
@@ -0,0 +1 @@
+export { default } from './ChromeRoute';
diff --git a/src/components/ContextSwitcher/ContextSwitcher.scss b/src/components/ContextSwitcher/ContextSwitcher.scss
new file mode 100644
index 000000000..78e6bee8c
--- /dev/null
+++ b/src/components/ContextSwitcher/ContextSwitcher.scss
@@ -0,0 +1,23 @@
+@import '~@patternfly/patternfly/sass-utilities/_all';
+.chr-c-context-selector {
+ --pf-v5-c-masthead--c-context-selector--Width: 224px;
+ .chr-c-content-account {
+ width: 100%;
+ .account-label {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+ }
+ .pf-v5-c-context-selector__menu-list-item {
+ width: calc(224px - 16px);
+ svg {
+ font-size: 9px;
+ }
+ small.account-name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ text-align: initial;
+ }
+ }
+}
diff --git a/src/components/ContextSwitcher/index.tsx b/src/components/ContextSwitcher/index.tsx
new file mode 100644
index 000000000..f936988ca
--- /dev/null
+++ b/src/components/ContextSwitcher/index.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+
+import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
+
+import CheckIcon from '@patternfly/react-icons/dist/dynamic/icons/check-icon';
+import classNames from 'classnames';
+import axios from 'axios';
+import { useIntl } from 'react-intl';
+import messages from '../../locales/Messages';
+import type { CrossAccountRequest } from '@redhat-cloud-services/rbac-client';
+
+import './ContextSwitcher.scss';
+import { Fragment } from 'react';
+import Cookies from 'js-cookie';
+import {
+ ACTIVE_ACCOUNT_SWITCH_NOTIFICATION,
+ ACTIVE_REMOTE_REQUEST,
+ CROSS_ACCESS_ACCOUNT_NUMBER,
+ CROSS_ACCESS_ORG_ID,
+ REQUESTS_COUNT,
+ REQUESTS_DATA,
+} from '../../utils/consts';
+import { useAtom } from 'jotai';
+import { contextSwitcherOpenAtom } from '../../state/atoms/contextSwitcher';
+
+export type ContextSwitcherProps = {
+ className?: string;
+ accountNumber?: string;
+ isInternal?: boolean;
+};
+
+// These attributes are present in the response based on the open API spec.
+// TODO: Migrate to the new RBAC JS client when it is ready.
+type CrossAccountRequestInternal = CrossAccountRequest & {
+ first_name?: string | null;
+ last_name?: string | null;
+ email: string;
+};
+
+const ContextSwitcher = ({ accountNumber, className, isInternal }: ContextSwitcherProps) => {
+ const intl = useIntl();
+ const [isOpen, setIsOpen] = useAtom(contextSwitcherOpenAtom);
+ const [data, setData] = useState
+
+
+
+
+ Chrome Debugger
+| Entitlements given to {props.user.identity.user?.username} | +
|---|
| {val[0].replace(/entitlements_/g, '')} | +
| Roles given to {props.user.identity.user?.username} | +
|---|
| {val} | +
+ {intl.formatMessage(messages.problemProcessingRequest)}{' '} + + {intl.formatMessage(messages.redHatSupport)} + {' '} + {intl.formatMessage(messages.checkOur)}{' '} + + {intl.formatMessage(messages.statusPage)} + {' '} + {intl.formatMessage(messages.knownOutages)} +
+
+ {content}
+
+ ))}
+ Foo
);
+};
+const DummyComponent = ({ shouldThrow = false }) => (
+ 
+
+
+
+
+ {intl.formatMessage(messages.somethingWentWrong)}
+
+ {intl.formatMessage(messages.problemProcessingRequest)}{' '}
+
+ {intl.formatMessage(messages.redHatSupport)}
+
+
+
+
+
+ );
+};
+
+export default FeedbackError;
diff --git a/src/components/Feedback/FeedbackForm.tsx b/src/components/Feedback/FeedbackForm.tsx
new file mode 100644
index 000000000..2bc059fcb
--- /dev/null
+++ b/src/components/Feedback/FeedbackForm.tsx
@@ -0,0 +1,154 @@
+import React, { ReactNode, useContext, useState } from 'react';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { Checkbox } from '@patternfly/react-core/dist/dynamic/components/Checkbox';
+import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core/dist/dynamic/components/Panel';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea';
+
+import { DeepRequired } from 'utility-types';
+import { ChromeUser } from '@redhat-cloud-services/types';
+import { useIntl } from 'react-intl';
+
+import messages from '../../locales/Messages';
+import { getEnv, isProd } from '../../utils/common';
+
+import './Feedback.scss';
+import { getUrl } from '../../hooks/useBundle';
+import InternalChromeContext from '../../utils/internalChromeContext';
+
+export type FeedbackFormProps = {
+ user: DeepRequired
+
+ {modalTitle}
+ {modalDescription}
+
+