Added label instead of Alert

lokanandaprabhu · lokanandaprabhu · commit f182261cf548 · 2022-08-29T20:36:32.000+05:30
diff --git a/frontend/packages/dev-console/src/components/add/AddPage.tsx b/frontend/packages/dev-console/src/components/add/AddPage.tsx
@@ -6,7 +6,6 @@ import { match as RMatch } from 'react-router';
 import { withStartGuide } from '../../../../../public/components/start-guide';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage from '../projects/CreateProjectListPage';
-import { ResourceQuotaAlert } from '../resource-quota/ResourceQuotaAlert';
 import AddPageLayout from './AddPageLayout';
 
 export interface AddPageProps {
@@ -21,10 +20,7 @@ export const PageContents: React.FC<AddPageProps> = ({ match }) => {
   const namespace = match.params.ns;
 
   return namespace ? (
-    <>
-      <ResourceQuotaAlert namespace={namespace} />
-      <AddPageLayout title={t('devconsole~Add')} />
-    </>
+    <AddPageLayout title={t('devconsole~Add')} />
   ) : (
     <CreateProjectListPage title={t('devconsole~Add')}>
       {(openProjectModal) => (
diff --git a/frontend/packages/dev-console/src/components/add/AddPageLayout.scss b/frontend/packages/dev-console/src/components/add/AddPageLayout.scss
@@ -52,4 +52,8 @@
   &__additional-hint-block {
     padding-bottom: var(--pf-global--spacer--md);
   }
+
+  &__resource-quota-message-block {
+    margin-right: var(--pf-global--spacer--xl);
+  }
 }
diff --git a/frontend/packages/dev-console/src/components/add/AddPageLayout.tsx b/frontend/packages/dev-console/src/components/add/AddPageLayout.tsx
@@ -10,6 +10,7 @@ import TopologyQuickSearch from '@console/topology/src/components/quick-search/T
 import TopologyQuickSearchButton from '@console/topology/src/components/quick-search/TopologyQuickSearchButton';
 import { filterNamespaceScopedUrl } from '../../utils/add-page-utils';
 import { useAddActionExtensions } from '../../utils/useAddActionExtensions';
+import { ResourceQuotaAlert } from '../resource-quota/ResourceQuotaAlert';
 import AddCardSection from './AddCardSection';
 import { GETTING_STARTED_USER_SETTINGS_KEY } from './constants';
 import { GettingStartedSection } from './GettingStartedSection';
@@ -65,6 +66,9 @@ const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title, hintBlock: additio
             <TopologyQuickSearchButton onClick={() => setIsQuickSearchOpen(true)} />
           </div>
           <div className="odc-add-page-layout__hint-block__actions">
+            <div className="odc-add-page-layout__resource-quota-message-block">
+              <ResourceQuotaAlert namespace={activeNamespace} />
+            </div>
             <RestoreGettingStartedButton userSettingsKey={GETTING_STARTED_USER_SETTINGS_KEY} />
             <div
               className={cx('odc-add-page-layout__hint-block__details-switch', {
diff --git a/frontend/packages/dev-console/src/components/resource-quota/ResourceQuotaAlert.tsx b/frontend/packages/dev-console/src/components/resource-quota/ResourceQuotaAlert.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/api/core-api';
+import {
+  useK8sWatchResource,
+  YellowExclamationTriangleIcon,
+} from '@console/dynamic-plugin-sdk/src/api/core-api';
 import { AppliedClusterResourceQuotaModel, ResourceQuotaModel } from '@console/internal/models';
 import { AppliedClusterResourceQuotaKind, ResourceQuotaKind } from '@console/internal/module/k8s';
 import { checkQuotaLimit } from '@console/topology/src/components/utils/checkResourceQuota';
@@ -69,13 +72,13 @@ export const ResourceQuotaAlert: React.FC<ResourceQuotaAlertProps> = ({ namespac
   return (
     <>
       {warningMessageFlag && rqLoaded && acrqLoaded ? (
-        <Alert variant="warning" title={t('devconsole~Resource quota reached')} isInline>
-          <Link to={getRedirectLink()}>
+        <Label color="orange" icon={<YellowExclamationTriangleIcon />}>
+          <Link to={getRedirectLink()} data-test="resource-quota-warning">
             {t('devconsole~{{count}} resource reached quota', {
               count: totalResourcesAtQuota.reduce((a, b) => a + b, 0),
             })}
           </Link>
-        </Alert>
+        </Label>
       ) : null}
     </>
   );
diff --git a/frontend/packages/topology/integration-tests/support/step-definitions/topology/resource-quota-warning.ts b/frontend/packages/topology/integration-tests/support/step-definitions/topology/resource-quota-warning.ts
@@ -91,10 +91,7 @@ When('user enters the {string} file data to YAML Editor', (yamlFile: string) =>
 });
 
 When('user clicks on link to view resource quota details', () => {
-  cy.get('h4.pf-c-alert__title').should('contain.text', 'Resource quota reached');
-  cy.get('a')
-    .contains('reached quota')
-    .click();
+  cy.byTestID('resource-quota-warning').click();
 });
 
 Then('user is redirected to resource quota details page', () => {
diff --git a/frontend/packages/topology/src/components/export-app/ExportApplication.tsx b/frontend/packages/topology/src/components/export-app/ExportApplication.tsx
@@ -10,9 +10,14 @@ import { handleExportApplication } from './ExportApplicationModal';
 type ExportApplicationProps = {
   namespace: string;
   isDisabled: boolean;
+  setIsExportAppEnabled?: (showExportAppBtn: boolean) => void;
 };
 
-const ExportApplication: React.FC<ExportApplicationProps> = ({ namespace, isDisabled }) => {
+const ExportApplication: React.FC<ExportApplicationProps> = ({
+  namespace,
+  isDisabled,
+  setIsExportAppEnabled,
+}) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const toast = useToast();
@@ -25,6 +30,9 @@ const ExportApplication: React.FC<ExportApplicationProps> = ({ namespace, isDisa
   });
 
   const showExportAppBtn = canExportApp && isExportAppAllowed && !isMobile;
+  if (setIsExportAppEnabled) {
+    setIsExportAppEnabled(showExportAppBtn);
+  }
   const name = EXPORT_CR_NAME;
 
   return showExportAppBtn ? (
diff --git a/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx b/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { observer } from '@patternfly/react-topology';
 import { useTranslation } from 'react-i18next';
-import ResourceQuotaAlert from '@console/dev-console/src/components/resource-quota/ResourceQuotaAlert';
 import { StatusBox } from '@console/internal/components/utils';
 import { ModelContext, ExtensibleModel } from '../../data-transforms/ModelContext';
 import { TopologyViewType } from '../../topology-types';
@@ -17,27 +16,24 @@ const TopologyDataRenderer: React.FC<TopologyDataRendererProps> = observer(
     const { namespace, model, loaded, loadError } = React.useContext<ExtensibleModel>(ModelContext);
 
     return (
-      <>
-        <ResourceQuotaAlert namespace={namespace} />
-        <StatusBox
-          skeleton={
-            viewType === TopologyViewType.list && (
-              <div className="co-m-pane__body skeleton-overview">
-                <div className="skeleton-overview--head" />
-                <div className="skeleton-overview--tile" />
-                <div className="skeleton-overview--tile" />
-                <div className="skeleton-overview--tile" />
-              </div>
-            )
-          }
-          data={model}
-          label={t('topology~Topology')}
-          loaded={loaded}
-          loadError={loadError}
-        >
-          <DroppableTopologyComponent viewType={viewType} model={model} namespace={namespace} />
-        </StatusBox>
-      </>
+      <StatusBox
+        skeleton={
+          viewType === TopologyViewType.list && (
+            <div className="co-m-pane__body skeleton-overview">
+              <div className="skeleton-overview--head" />
+              <div className="skeleton-overview--tile" />
+              <div className="skeleton-overview--tile" />
+              <div className="skeleton-overview--tile" />
+            </div>
+          )
+        }
+        data={model}
+        label={t('topology~Topology')}
+        loaded={loaded}
+        loadError={loadError}
+      >
+        <DroppableTopologyComponent viewType={viewType} model={model} namespace={namespace} />
+      </StatusBox>
     );
   },
 );
diff --git a/frontend/packages/topology/src/filters/TopologyFilterBar.scss b/frontend/packages/topology/src/filters/TopologyFilterBar.scss
@@ -12,4 +12,8 @@
   &__kiali-link {
     margin-left: auto;
   }
+
+  &__resource-quota-warning-block  {
+    margin-right: var(--pf-global--spacer--lg);
+  }
 }
diff --git a/frontend/packages/topology/src/filters/TopologyFilterBar.tsx b/frontend/packages/topology/src/filters/TopologyFilterBar.tsx
@@ -21,6 +21,7 @@ import { requirementFromString } from '@console/internal/module/k8s/selector-req
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { RootState } from '@console/internal/redux';
 import { useQueryParams } from '@console/shared';
+import { ResourceQuotaAlert } from '../../../dev-console/src/components/resource-quota/ResourceQuotaAlert';
 import ExportApplication from '../components/export-app/ExportApplication';
 import TopologyQuickSearchButton from '../components/quick-search/TopologyQuickSearchButton';
 import { TopologyViewType } from '../topology-types';
@@ -41,7 +42,6 @@ import FilterDropdown from './FilterDropdown';
 import { FilterContext } from './FilterProvider';
 import KindFilterDropdown from './KindFilterDropdown';
 import NameLabelFilterDropdown from './NameLabelFilterDropdown';
-
 import './TopologyFilterBar.scss';
 
 type StateProps = {
@@ -71,6 +71,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
   const { t } = useTranslation();
   const { filters, setTopologyFilters: onFiltersChange } = React.useContext(FilterContext);
   const [labelFilterInput, setLabelFilterInput] = React.useState('');
+  const [isExportAppEnabled, setIsExportAppEnabled] = React.useState(false);
   const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
     isList: true,
     kind: referenceForModel(ConsoleLinkModel),
@@ -198,12 +199,25 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
           variant={ToolbarGroupVariant['button-group']}
           alignment={{ default: 'alignRight' }}
         >
+          <ToolbarItem
+            className={
+              isExportAppEnabled || kialiLink
+                ? 'odc-topology-filter-bar__resource-quota-warning-block'
+                : ''
+            }
+          >
+            <ResourceQuotaAlert namespace={namespace} />
+          </ToolbarItem>
           {kialiLink && (
             <ToolbarItem className="odc-topology-filter-bar__kiali-link1">
               <ExternalLink href={kialiLink} text={t('topology~Kiali')} />
             </ToolbarItem>
           )}
-          <ExportApplication namespace={namespace} isDisabled={isDisabled} />
+          <ExportApplication
+            namespace={namespace}
+            isDisabled={isDisabled}
+            setIsExportAppEnabled={setIsExportAppEnabled}
+          />
         </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>

Original file line number	Diff line number	Diff line change
`@@ -52,4 +52,8 @@`
`52`	`52`	`&__additional-hint-block {`
`53`	`53`	`padding-bottom: var(--pf-global--spacer--md);`
`54`	`54`	`}`
	`55`	`+`
	`56`	`+ &__resource-quota-message-block {`
	`57`	`+ margin-right: var(--pf-global--spacer--xl);`
	`58`	`+ }`
`55`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,4 +12,8 @@`
`12`	`12`	`&__kiali-link {`
`13`	`13`	`margin-left: auto;`
`14`	`14`	`}`
	`15`	`+`
	`16`	`+ &__resource-quota-warning-block {`
	`17`	`+ margin-right: var(--pf-global--spacer--lg);`
	`18`	`+ }`
`15`	`19`	`}`