Code mods

project-koku · Aug 26, 2024 · a0b2af4 · a0b2af4
1 parent aa778f0
commit a0b2af4
Show file tree

Hide file tree

Showing 131 changed files with 639 additions and 685 deletions.
diff --git a/src/components/drawers/commonDrawer/commonDrawer.tsx b/src/components/drawers/commonDrawer/commonDrawer.tsx
@@ -50,7 +50,7 @@ class CommonDrawerBase extends React.Component<CommonDrawerProps> {
     // https://github.com/redhat-developer/rhosak-ui/blob/main/packages/ui/src/components/KafkaInstanceDrawer/KafkaInstanceDrawer.tsx#L69-L78
     return (
       <Drawer className="drawerOverride" isExpanded={isExpanded} onExpand={this.handleExpand}>
-        <DrawerContent colorVariant="light-200" panelContent={this.getPanelContent()}>
+        <DrawerContent colorVariant="secondary" panelContent={this.getPanelContent()}>
           {children}
         </DrawerContent>
       </Drawer>

diff --git a/src/components/drawers/exports/exportsLink.tsx b/src/components/drawers/exports/exportsLink.tsx
@@ -50,7 +50,7 @@ class ExportsLinkBase extends React.Component<ExportsLinkProps, any> {
     // @redhat-cloud-services/frontend-components-notifications does not expose PatternFly's actionLinks prop
     if (isActionLink) {
       return (
-        <div className="pf-v5-c-alert__action-group">
+        <div className="pf-v6-c-alert__action-group">
           <AlertActionLink onClick={this.handleToggle}>{intl.formatMessage(messages.exportsTitle)}</AlertActionLink>
         </div>
       );

diff --git a/src/components/drawers/exports/exportsTable.tsx b/src/components/drawers/exports/exportsTable.tsx
@@ -4,8 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
-  EmptyStateIcon,
   Label,
   Popover,
 } from '@patternfly/react-core';
@@ -140,12 +138,7 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
     }
 
     return (
-      <EmptyState>
-        <EmptyStateHeader
-          titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
-          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-          headingLevel="h5"
-        />
+      <EmptyState  headingLevel="h5" icon={PlusCircleIcon}  titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}>
         <EmptyStateBody>{intl.formatMessage(messages.exportsEmptyState)}</EmptyStateBody>
         <EmptyStateFooter>
           <Button variant="primary" onClick={onClose}>
@@ -184,14 +177,12 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
                 }
                 bodyContent={<div>{intl.formatMessage(messages.exportsFailedDesc)}</div>}
               >
-                <Button
+                <Button icon={content}
                   className={className}
                   innerRef={componentRef}
                   style={styles.failedButton}
                   variant={ButtonVariant.plain}
-                >
-                  {content}
-                </Button>
+                ></Button>
               </Popover>
             )}
           >

diff --git a/src/components/drawers/exports/exportsToolbar.tsx b/src/components/drawers/exports/exportsToolbar.tsx
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import messages from 'locales/messages';
 import React from 'react';
@@ -32,7 +32,7 @@ type ExportsToolbarProps = ExportsToolbarOwnProps &
   WrappedComponentProps;
 
 export class ExportsToolbarBase extends React.Component<ExportsToolbarProps, any> {
-  private getCategoryOptions = (): ToolbarChipGroup[] => {
+  private getCategoryOptions = (): ToolbarLabelGroup[] => {
     const { intl } = this.props;
 
     return [{ name: intl.formatMessage(messages.filterByValues, { value: 'name' }), key: 'name' }];

diff --git a/src/components/inactiveSources/inactiveSources.scss b/src/components/inactiveSources/inactiveSources.scss
@@ -1,8 +1,8 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .alert {
-  background-color: var(--pf-v5-global--BackgroundColor--light-100);
-  padding-left: var(--pf-v5-global--spacer--lg);
-  padding-right: var(--pf-v5-global--spacer--lg);
-  padding-top: var(--pf-v5-global--spacer--lg);
+  background-color: var(--pf-v6-global--BackgroundColor--light-100);
+  padding-left: var(--pf-v6-global--spacer--lg);
+  padding-right: var(--pf-v6-global--spacer--lg);
+  padding-top: var(--pf-v6-global--spacer--lg);
 }
diff --git a/src/routes/components/cluster/modal/clusterModal.scss b/src/routes/components/cluster/modal/clusterModal.scss
@@ -1,10 +1,10 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .modalOverride {
-  & .pf-v5-c-modal-box__body {
-    margin-top: var(--pf-v5-global--spacer--lg);
+  & .pf-v6-c-modal-box__body {
+    margin-top: var(--pf-v6-global--spacer--lg);
   }
-  & .pf-v5-c-modal-box__footer {
+  & .pf-v6-c-modal-box__footer {
     display: none;
   }
 }
diff --git a/src/routes/components/cluster/modal/clusterModal.tsx b/src/routes/components/cluster/modal/clusterModal.tsx
@@ -1,6 +1,8 @@
 import './clusterModal.scss';
 
-import { Modal } from '@patternfly/react-core';
+import {
+	Modal
+} from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';

diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss
@@ -4,13 +4,13 @@
   div {
     display: block;
     margin-right: 0;
-    margin-bottom: var(--pf-v5-global--spacer--xs);
+    margin-bottom: var(--pf-v6-global--spacer--xs);
     &.iconOverride {
       &.decrease {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-v6-global--success-color--100);
       }
       &.increase {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-v6-global--danger-color--100);
       }
       .fa-sort-up {
         margin-left: 10px;
@@ -19,10 +19,10 @@
         margin-left: 10px;
       }
       .fa-sort-up::before {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-v6-global--danger-color--100);
       }
       .fa-sort-down::before {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-v6-global--success-color--100);
       }
       span {
         margin-right: -17px !important;
@@ -32,7 +32,7 @@
 }
 
 .tableOverride {
-  &.pf-v5-c-table tbody .pf-v5-c-table__check input {
+  &.pf-v6-c-table tbody .pf-v6-c-table__check input {
     margin-top: .40rem;
   }
 }
diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx
@@ -353,7 +353,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
               </ToolbarToggleGroup>
             )}
             {actions && <ToolbarGroup>{actions}</ToolbarGroup>}
-            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: "alignEnd" }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/src/routes/components/dataToolbar/costCategoryValue.tsx b/src/routes/components/dataToolbar/costCategoryValue.tsx
@@ -146,13 +146,13 @@ class CostCategoryValueBase extends React.Component<CostCategoryValueProps, Cost
           />
         </InputGroupItem>
         <InputGroupItem>
-          <Button
+          <Button icon={<SearchIcon />}
             isDisabled={isDisabled}
             variant={ButtonVariant.control}
             aria-label={intl.formatMessage(messages.filterByCostCategoryValueButtonAriaLabel)}
             onClick={evt => onCostCategoryValueInput(evt)}
           >
-            <SearchIcon />
+
           </Button>
         </InputGroupItem>
       </InputGroup>

diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss
@@ -3,15 +3,15 @@
 // Workaround for https://github.com/patternfly/patternfly-react/issues/4477
 // and https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  .pf-v5-c-menu-toggle {
+  .pf-v6-c-menu-toggle {
     min-width: 250px;
   }
 }
 
 .toolbarOverride {
-  .pf-v5-c-button.pf-m-control::after {
+  .pf-v6-c-button.pf-m-control::after {
     border-left: none;
   }
   // Alternative workaround to overriding table sticky style
-  // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301;
+  // --pf-v6-c-toolbar--ZIndex: auto; z-index: 301;
 }
diff --git a/src/routes/components/dataToolbar/dataToolbar.tsx b/src/routes/components/dataToolbar/dataToolbar.tsx
@@ -787,7 +787,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
                 {datePicker}
               </ToolbarGroup>
             )}
-            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: "alignEnd" }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/src/routes/components/dataToolbar/tagValue.tsx b/src/routes/components/dataToolbar/tagValue.tsx
@@ -146,13 +146,13 @@ class TagValueBase extends React.Component<TagValueProps, TagValueState> {
           />
         </InputGroupItem>
         <InputGroupItem>
-          <Button
+          <Button icon={<SearchIcon />}
             isDisabled={isDisabled}
             variant={ButtonVariant.control}
             aria-label={intl.formatMessage(messages.filterByTagValueButtonAriaLabel)}
             onClick={evt => onTagValueInput(evt)}
           >
-            <SearchIcon />
+
           </Button>
         </InputGroupItem>
       </InputGroup>

diff --git a/src/routes/components/dataToolbar/utils/actions.tsx b/src/routes/components/dataToolbar/utils/actions.tsx
@@ -37,18 +37,16 @@ export const getExportButton = ({
 }) => {
   return (
     <ToolbarItem
-      spacer={{
-        default: 'spacerNone',
+      gap={{
+        default: "gapNone",
       }}
     >
-      <Button
+      <Button icon={<ExportIcon />}
         aria-label="Export data"
         isDisabled={isDisabled || isExportDisabled}
         onClick={onExportClicked}
         variant={ButtonVariant.plain}
-      >
-        <ExportIcon />
-      </Button>
+      ></Button>
     </ToolbarItem>
   );
 };

diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import {
   Button,
   ButtonVariant,
@@ -58,8 +58,8 @@ export const getCategoryInput = ({
   return (
     <ToolbarFilter
       categoryName={categoryOption}
-      chips={getChips(filters?.[categoryOption.key] as Filter[])}
-      deleteChip={onDelete}
+      labels={getChips(filters?.[categoryOption.key] as Filter[])}
+      deleteLabel={onDelete}
       key={categoryOption.key}
       showToolbarItem={currentCategory === categoryOption.key}
     >
@@ -89,13 +89,13 @@ export const getCategoryInput = ({
                 onKeyDown={evt => onCategoryInput(evt, categoryOption.key)}
                 size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length}
               />
-              <Button
+              <Button icon={<SearchIcon />}
                 isDisabled={isDisabled && !_hasFilters}
                 variant={ButtonVariant.control}
                 aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: placeholderKey })}
                 onClick={evt => onCategoryInput(evt, categoryOption.key)}
               >
-                <SearchIcon />
+
               </Button>
             </>
           )}
@@ -105,7 +105,7 @@ export const getCategoryInput = ({
   );
 };
 
-export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => {
+export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => {
   return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }];
 };
 
@@ -196,7 +196,7 @@ export const getCategorySelect = ({
   isDisabled,
   onCategorySelect,
 }: {
-  categoryOptions?: ToolbarChipGroup[]; // Options for category menu
+  categoryOptions?: ToolbarLabelGroup[]; // Options for category menu
   currentCategory?: string;
   filters?: Filters;
   isDisabled?: boolean;
@@ -224,7 +224,7 @@ export const getCategorySelect = ({
   );
 };
 
-export const getCategorySelectOptions = (categoryOptions: ToolbarChipGroup[]): SelectWrapperOption[] => {
+export const getCategorySelectOptions = (categoryOptions: ToolbarLabelGroup[]): SelectWrapperOption[] => {
   const options: SelectWrapperOption[] = [];
 
   categoryOptions.map(option => {

diff --git a/src/routes/components/dataToolbar/utils/common.ts b/src/routes/components/dataToolbar/utils/common.ts
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -10,12 +10,12 @@ export interface Filters {
   [key: string]: Filter[] | { [key: string]: Filter[] };
 }
 
-export interface ToolbarChipGroupExt extends ToolbarChipGroup {
+export interface ToolbarChipGroupExt extends ToolbarLabelGroup {
   ariaLabelKey?: string;
   placeholderKey?: string;
   resourceKey?: string;
   selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss
-  selectOptions?: ToolbarChipGroup[];
+  selectOptions?: ToolbarLabelGroup[];
 }
 
 export const defaultFilters = {
@@ -91,7 +91,7 @@ export const getChips = (filters: Filter[]): string[] => {
   return chips;
 };
 
-export const getDefaultCategory = (categoryOptions: ToolbarChipGroup[], groupBy: string, query: Query) => {
+export const getDefaultCategory = (categoryOptions: ToolbarLabelGroup[], groupBy: string, query: Query) => {
   if (!categoryOptions) {
     return 'name';
   }

diff --git a/src/routes/components/dataToolbar/utils/costCategory.tsx b/src/routes/components/dataToolbar/utils/costCategory.tsx
@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
 import type { Resource, ResourcePathsType } from 'api/resources/resource';
 import { intl } from 'components/i18n';
@@ -59,7 +59,7 @@ export const getCostCategoryKeySelect = ({
 export const getCostCategoryKeyOptions = (
   resourceReport: Resource,
   isSelectWrapperOption = false
-): ToolbarChipGroup[] | SelectWrapperOption[] => {
+): ToolbarLabelGroup[] | SelectWrapperOption[] => {
   let data = [];
   let options = [];
 
@@ -122,7 +122,7 @@ export const getCostCategoryValueSelect = ({
 }: {
   currentCategory?: string;
   currentCostCategoryKey?: string;
-  costCategoryKeyOption: ToolbarChipGroup;
+  costCategoryKeyOption: ToolbarLabelGroup;
   costCategoryKeyValueInput?: string;
   filters?: Filters;
   isDisabled?: boolean;
@@ -141,8 +141,8 @@ export const getCostCategoryValueSelect = ({
   return (
     <ToolbarFilter
       categoryName={categoryName}
-      chips={getChips(filters[awsCategoryKey][costCategoryKeyOption.key])}
-      deleteChip={onDelete}
+      labels={getChips(filters[awsCategoryKey][costCategoryKeyOption.key])}
+      deleteLabel={onDelete}
       key={costCategoryKeyOption.key}
       showToolbarItem={currentCategory === awsCategoryKey && currentCostCategoryKey === costCategoryKeyOption.key}
     >

diff --git a/src/routes/components/dataToolbar/utils/custom.tsx b/src/routes/components/dataToolbar/utils/custom.tsx
@@ -39,8 +39,8 @@ export const getCustomSelect = ({
   return (
     <ToolbarFilter
       categoryName={categoryName}
-      chips={getChips(filters[categoryOption.key] as Filter[])}
-      deleteChip={onDelete}
+      labels={getChips(filters[categoryOption.key] as Filter[])}
+      deleteLabel={onDelete}
       key={`custom-select-${categoryOption.key}`}
       showToolbarItem={currentCategory === categoryOption.key}
     >