@patternfly/quickstarts 2.4.1 → 5.0.0-prerelease.0

package/src/catalog/Toolbar/QuickStartCatalogFilter.scss

@@ -5,21 +5,21 @@
   }
 
   &__count {
-    font-weight: var(--pf-global--FontWeight--bold);
+    font-weight: var(--pf-v5-global--FontWeight--bold);
   }
 }
 
-.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
-  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-toolbar--RowGap: 0;
+.pf-v5-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
+  --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toolbar--RowGap: 0;
   font-size: 14px;
 
-  .pf-c-select {
-    --pf-c-select__toggle--FontSize: 14px;
+  .pf-v5-c-select {
+    --pf-v5-c-select__toggle--FontSize: 14px;
   }
 
-  .pf-c-check {
-    --pf-c-check__label--FontSize: 14px;
+  .pf-v5-c-check {
+    --pf-v5-c-check__label--FontSize: 14px;
   }
 }

package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx

@@ -19,8 +19,7 @@ const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
   onSearchInputChange = () => {},
   onStatusChange = () => {},
   ...props
-}) => {
-  return (
+}) => (
     <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex" {...props}>
       <ToolbarContent>
         <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
@@ -29,6 +28,5 @@ const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
       </ToolbarContent>
     </Toolbar>
   );
-};
 
 export default QuickStartCatalogFilter;

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
   SearchInput,
   Select,
+  SelectList,
   SelectOption,
-  SelectVariant,
   ToolbarItem,
 } from '@patternfly/react-core';
 import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils';
@@ -18,7 +21,7 @@ export const QuickStartCatalogFilterSearch = ({ searchInputText, handleTextChang
       <SearchInput
         placeholder={getResource('Filter by keyword...')}
         value={searchInputText}
-        onChange={handleTextChange}
+        onChange={(_ev, value) => handleTextChange(value)}
         onClear={() => handleTextChange('')}
         {...props}
       />
@@ -35,19 +38,31 @@ export const QuickStartCatalogFilterSelect = ({
   ...props
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      isFullWidth
+      ref={toggleRef}
+      onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+      isExpanded={isDropdownOpen}
+    >
+      {getResource('Status')}
+      {selectedFilters.length > 0 && <Badge isRead>{selectedFilters.length}</Badge>}
+    </MenuToggle>
+  );
+
   return (
     <ToolbarItem>
       <Select
-        variant={SelectVariant.checkbox}
         aria-label={getResource('Select filter')}
         isOpen={isDropdownOpen}
-        onToggle={(isEnabled) => setIsDropdownOpen(isEnabled)}
-        placeholderText={getResource('Status')}
+        selected={selectedFilters}
         onSelect={onRowfilterSelect}
-        selections={selectedFilters}
+        onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+        toggle={toggle}
         {...props}
       >
-        {dropdownItems}
+        <SelectList>{dropdownItems}</SelectList>
       </Select>
     </ToolbarItem>
   );
@@ -58,7 +73,7 @@ export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
   return (
     <ToolbarItem
       className="pfext-quick-start-catalog-filter__count"
-      alignment={{ default: 'alignRight' }}
+      align={{ default: 'alignRight' }}
     >
       {getResource('{{count, number}} item', quickStartsCount).replace(
         '{{count, number}}',
@@ -71,12 +86,11 @@ export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
 interface QuickStartCatalogFilterSearchWrapperProps {
   onSearchInputChange: any;
 }
-export const QuickStartCatalogFilterSearchWrapper: React.FC<QuickStartCatalogFilterSearchWrapperProps> = ({
-  onSearchInputChange = () => {},
-}) => {
-  const { useQueryParams, filter, setFilter } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+export const QuickStartCatalogFilterSearchWrapper: React.FC<
+  QuickStartCatalogFilterSearchWrapperProps
+> = ({ onSearchInputChange = () => {} }) => {
+  const { useQueryParams, filter, setFilter } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
   React.useEffect(() => {
     //   use this effect to clear the search when a `clear all` action is performed higher up
     const unlisten = history.listen(({ location }) => {
@@ -130,12 +144,11 @@ export const equalsIgnoreOrder = (a: any[], b: any[]) => {
 interface QuickStartCatalogFilterStatusWrapperProps {
   onStatusChange: any;
 }
-export const QuickStartCatalogFilterStatusWrapper: React.FC<QuickStartCatalogFilterStatusWrapperProps> = ({
-  onStatusChange = () => {},
-}) => {
-  const { useQueryParams, filter, setFilter } = React.useContext<QuickStartContextValues>(
-    QuickStartContext,
-  );
+export const QuickStartCatalogFilterStatusWrapper: React.FC<
+  QuickStartCatalogFilterStatusWrapperProps
+> = ({ onStatusChange = () => {} }) => {
+  const { useQueryParams, filter, setFilter } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
   React.useEffect(() => {
     //   use this effect to clear the status when a `clear all` action is performed higher up
     const unlisten = history.listen(({ location }) => {
@@ -153,9 +166,11 @@ export const QuickStartCatalogFilterStatusWrapper: React.FC<QuickStartCatalogFil
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 
   const onRowfilterSelect = React.useCallback(
-    (e) => {
+    (_e, selectedValue) => {
       setIsDropdownOpen(false);
-      const selection = e.target.parentElement.getAttribute('data-key');
+      const selection = Object.entries(filter.status.statusTypes).find(
+        ([_key, value]) => value === selectedValue,
+      )[0];
       const selectedFiltersList = filter.status.statusFilters.includes(selection)
         ? filter.status.statusFilters.filter((status) => status !== selection)
         : [...filter.status.statusFilters, selection];
@@ -172,9 +187,15 @@ export const QuickStartCatalogFilterStatusWrapper: React.FC<QuickStartCatalogFil
     [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams],
   );
 
-  const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, val]) => (
-    <SelectOption key={key} data-key={key} value={key}>
-      {val}
+  const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, value]) => (
+    <SelectOption
+      key={key}
+      data-key={key}
+      value={value}
+      hasCheckbox
+      isSelected={filter.status.statusFilters.includes(key)}
+    >
+      <>{value}</>
     </SelectOption>
   ));
 
@@ -192,8 +213,6 @@ export const QuickStartCatalogFilterStatusWrapper: React.FC<QuickStartCatalogFil
 interface QuickStartCatalogFilterCountWrapperProps {
   quickStartsCount: number;
 }
-export const QuickStartCatalogFilterCountWrapper: React.FC<QuickStartCatalogFilterCountWrapperProps> = ({
-  quickStartsCount,
-}) => {
-  return <QuickStartCatalogFilterCount quickStartsCount={quickStartsCount} />;
-};
+export const QuickStartCatalogFilterCountWrapper: React.FC<
+  QuickStartCatalogFilterCountWrapperProps
+> = ({ quickStartsCount }) => <QuickStartCatalogFilterCount quickStartsCount={quickStartsCount} />;

package/src/controller/QuickStartConclusion.tsx

@@ -6,14 +6,14 @@ import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start
 import { QuickStart, QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
 import TaskHeaderList from './QuickStartTaskHeaderList';
 
-type QuickStartConclusionProps = {
+interface QuickStartConclusionProps {
   tasks: QuickStartTask[];
   conclusion: string;
   allTaskStatuses: QuickStartTaskStatus[];
   nextQuickStarts?: QuickStart[];
   onQuickStartChange: (quickStartid: string) => void;
   onTaskSelect: (selectedTaskNumber: number) => void;
-};
+}
 
 const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
   tasks,
@@ -53,7 +53,7 @@ const QuickStartConclusion: React.FC<QuickStartConclusionProps> = ({
               nextQuickStart?.spec?.displayName,
             )}{' '}
             <ArrowRightIcon
-              style={{ marginLeft: 'var(--pf-global--spacer--xs)', verticalAlign: 'middle' }}
+              style={{ marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' }}
             />
           </Button>
         ))}

package/src/controller/QuickStartContent.scss

@@ -1,10 +1,10 @@
 .pfext-quick-start-content {
   flex: 1 1 0;
   overflow: auto;
-  padding: var(--pf-global--spacer--lg);
+  padding: var(--pf-v5-global--spacer--lg);
   font-size: 16px;
 
-  .pf-c-alert__description {
+  .pf-v5-c-alert__description {
     p {
       font-size: 13px;
     }

package/src/controller/QuickStartContent.tsx

@@ -6,7 +6,7 @@ import QuickStartTasks from './QuickStartTasks';
 
 import './QuickStartContent.scss';
 
-type QuickStartContentProps = {
+interface QuickStartContentProps {
   quickStart: QuickStart;
   nextQuickStarts?: QuickStart[];
   taskNumber: number;
@@ -14,7 +14,7 @@ type QuickStartContentProps = {
   onTaskSelect: (selectedTaskNumber: number) => void;
   onTaskReview: (taskStatus: QuickStartTaskStatus) => void;
   onQuickStartChange?: (quickStartId: string) => void;
-};
+}
 
 const QuickStartContent = React.forwardRef<HTMLDivElement, QuickStartContentProps>(
   (

package/src/controller/QuickStartFooter.scss

@@ -1,10 +1,10 @@
 .pfext-quick-start-footer {
-  background-color: var(--pf-global--BackgroundColor--100);   // this is an example about how we should use PF variables
+  background-color: var(--pf-v5-global--BackgroundColor--100);   // this is an example about how we should use PF variables
   flex: 0 0 auto;
-  padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
+  padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
 
   &__actionbtn {
-    margin-right: var(--pf-global--spacer--md);
+    margin-right: var(--pf-v5-global--spacer--md);
   }
 
   &__restartbtn {

package/src/controller/QuickStartFooter.tsx

@@ -6,7 +6,7 @@ import { camelize } from '../utils/quick-start-utils';
 
 import './QuickStartFooter.scss';
 
-export type QuickStartFooterProps = {
+export interface QuickStartFooterProps {
   status: QuickStartStatus;
   footerClass: string;
   taskNumber: number;
@@ -14,7 +14,7 @@ export type QuickStartFooterProps = {
   onNext: () => void;
   onBack: () => void;
   quickStartId: string;
-};
+}
 
 const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
   status,
@@ -29,21 +29,17 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
     QuickStartContext,
   );
 
-  const PrimaryButtonText = React.useMemo(() => {
-    return {
+  const PrimaryButtonText = React.useMemo(() => ({
       START: getResource('Start'),
       CONTINUE: getResource('Continue'),
       NEXT: getResource('Next'),
       CLOSE: getResource('Close'),
-    };
-  }, [getResource]);
+    }), [getResource]);
 
-  const SecondaryButtonText = React.useMemo(() => {
-    return {
+  const SecondaryButtonText = React.useMemo(() => ({
       BACK: getResource('Back'),
       RESTART: getResource('Restart'),
-    };
-  }, [getResource]);
+    }), [getResource]);
 
   const onRestart = React.useCallback(
     (e: React.SyntheticEvent) => {

package/src/controller/QuickStartIntroduction.scss

@@ -1,19 +1,19 @@
 .pfext-quick-start-intro {
   &__prereq {
-    margin-bottom: var(--pf-global--spacer--md);
-    .pf-c-expandable-section__content {
-      margin-top: var(--pf-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--md);
+    .pf-v5-c-expandable-section__content {
+      margin-top: var(--pf-v5-global--spacer--sm);
     }
-    .pf-c-expandable-section__toggle {
+    .pf-v5-c-expandable-section__toggle {
       padding-top: 0;
       padding-bottom: 0;
       &-text {
-        margin-left: var(--pf-global--spacer--sm);
+        margin-left: var(--pf-v5-global--spacer--sm);
       }
       &-icon {
-        color: var(--pf-c-expandable-section__toggle--Color);
+        color: var(--pf-v5-c-expandable-section__toggle--Color);
         &:focus, &:hover {
-          --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
+          --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
         }
       }
     }

package/src/controller/QuickStartIntroduction.tsx

@@ -7,13 +7,13 @@ import TaskHeaderList from './QuickStartTaskHeaderList';
 
 import './QuickStartIntroduction.scss';
 
-type QuickStartIntroductionProps = {
+interface QuickStartIntroductionProps {
   introduction: string;
   tasks: QuickStartTask[];
   allTaskStatuses: QuickStartTaskStatus[];
   prerequisites?: string[];
   onTaskSelect: (selectedTaskNumber: number) => void;
-};
+}
 
 const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
   tasks,
@@ -35,15 +35,13 @@ const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
       className="pfext-quick-start-intro__prereq"
     >
       <List className="pfext-quick-start-intro__prereq-list">
-        {prereqs.map((pr) => {
-          return (
+        {prereqs.map((pr) => (
             <ListItem key={pr} className="pfext-quick-start-intro__prereq-list__item">
               <span className="pfext-quick-start-intro__prereq-list__item-content">
                 <QuickStartMarkdownView content={pr} />
               </span>
             </ListItem>
-          );
-        })}
+          ))}
       </List>
     </ExpandableSection>
   );
@@ -51,7 +49,7 @@ const QuickStartIntroduction: React.FC<QuickStartIntroductionProps> = ({
     <>
       <QuickStartMarkdownView content={introduction} />
       {prereqList}
-      <p style={{ marginBottom: 'var(--pf-global--spacer--md)' }}>
+      <p style={{ marginBottom: 'var(--pf-v5-global--spacer--md)' }}>
         {getResource(
           'In this quick start, you will complete {{count, number}} task',
           tasks.length,

package/src/controller/QuickStartTaskHeader.scss

@@ -1,41 +1,41 @@
 .pfext-quick-start-task-header {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
   display: grid;
   grid-template-columns: min-content auto;
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   button::before {
     content: none;
   }
 
   &__title {
-    color: var(--pf-global--primary-color--100) !important;
-    margin-right: var(--pf-global--spacer--md) !important;
+    color: var(--pf-v5-global--primary-color--100) !important;
+    margin-right: var(--pf-v5-global--spacer--md) !important;
   }
 
   &__subtitle {
-    font-size: var(--pf-global--FontSize--sm);
-    color: var(--pf-global--Color--dark-200) !important;
+    font-size: var(--pf-v5-global--FontSize--sm);
+    color: var(--pf-v5-global--Color--dark-200) !important;
   }
 
   &__tryagain {
     display: block;
-    font-size: var(--pf-global--FontSize--md);
-    color: var(--pf-global--Color--300) !important;
+    font-size: var(--pf-v5-global--FontSize--md);
+    color: var(--pf-v5-global--Color--300) !important;
   }
 
   &__title-success {
-    color: var(--pf-global--success-color--100) !important;
+    color: var(--pf-v5-global--success-color--100) !important;
   }
 
   &__title-failed {
-    color: var(--pf-global--danger-color--100) !important;
+    color: var(--pf-v5-global--danger-color--100) !important;
   }
 
   &__task-icon {
     &-init {
-      background-color: var(--pf-global--primary-color--100);
-      border-radius: var(--pf-global--BorderRadius--lg);
-      color: var(--pf-global--Color--light-100);
+      background-color: var(--pf-v5-global--primary-color--100);
+      border-radius: var(--pf-v5-global--BorderRadius--lg);
+      color: var(--pf-v5-global--Color--light-100);
       display: inline-flex;
       justify-content: center;
       height: 1.5em;
@@ -48,11 +48,11 @@
     }
 
     &-success {
-      color: var(--pf-global--success-color--100) !important;
+      color: var(--pf-v5-global--success-color--100) !important;
     }
 
     &-failed {
-      color: var(--pf-global--danger-color--100) !important;
+      color: var(--pf-v5-global--danger-color--100) !important;
     }
   }
 }

package/src/controller/QuickStartTaskHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Title, WizardNavItem } from '@patternfly/react-core';
+import { Icon, Title, WizardNavItem } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { css } from '@patternfly/react-styles';
@@ -10,7 +10,7 @@ import { QuickStartTaskStatus } from '../utils/quick-start-types';
 
 import './QuickStartTaskHeader.scss';
 
-type QuickStartTaskHeaderProps = {
+interface QuickStartTaskHeaderProps {
   title: string;
   taskIndex: number;
   subtitle?: string;
@@ -19,7 +19,7 @@ type QuickStartTaskHeaderProps = {
   isActiveTask?: boolean;
   onTaskSelect: (index: number) => void;
   children?: React.ReactNode;
-};
+}
 
 const TaskIcon: React.FC<{
   taskIndex: number;
@@ -32,17 +32,19 @@ const TaskIcon: React.FC<{
   const classNames = css('pfext-icon-and-text__icon', {
     'pfext-quick-start-task-header__task-icon-init': !failed && !success,
   });
-  let content: {};
+  let content: React.ReactNode;
+
   if (success) {
     content = (
-      <CheckCircleIcon size="md" className="pfext-quick-start-task-header__task-icon-success" />
+      <Icon size="md">
+        <CheckCircleIcon className="pfext-quick-start-task-header__task-icon-success" />{' '}
+      </Icon>
     );
   } else if (failed) {
     content = (
-      <ExclamationCircleIcon
-        size="md"
-        className="pfext-quick-start-task-header__task-icon-failed"
-      />
+      <Icon size="md">
+        <ExclamationCircleIcon className="pfext-quick-start-task-header__task-icon-failed" />
+      </Icon>
     );
   } else {
     content = getResource('{{taskIndex, number}}', taskIndex).replace(
@@ -110,9 +112,9 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   return (
     <WizardNavItem
       content={content}
-      step={taskIndex}
-      onNavItemClick={() => onTaskSelect(taskIndex - 1)}
-      navItemComponent="button"
+      stepIndex={taskIndex}
+      onClick={() => onTaskSelect(taskIndex - 1)}
+      component="button"
       isCurrent={isActiveTask}
     >
       {children}

package/src/controller/QuickStartTaskHeaderList.scss

@@ -11,7 +11,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      margin-bottom: var(--pf-global--spacer--xs);
+      margin-bottom: var(--pf-v5-global--spacer--xs);
     }
   }
 }

package/src/controller/QuickStartTaskHeaderList.tsx

@@ -5,18 +5,17 @@ import TaskHeader from './QuickStartTaskHeader';
 
 import './QuickStartTaskHeaderList.scss';
 
-type QuickStartTaskHeaderListProps = {
+interface QuickStartTaskHeaderListProps {
   tasks: QuickStartTask[];
   allTaskStatuses: QuickStartTaskStatus[];
   onTaskSelect: (selectedTaskNumber: number) => void;
-};
+}
 
 const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
   tasks,
   allTaskStatuses,
   onTaskSelect,
-}) => {
-  return tasks.length > 0 ? (
+}) => tasks.length > 0 ? (
     <List className="pfext-quick-start-task-header__list">
       {tasks.map((task, index) => (
         <TaskHeader
@@ -30,6 +29,5 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
       ))}
     </List>
   ) : null;
-};
 
 export default QuickStartTaskHeaderList;

package/src/controller/QuickStartTaskReview.scss

@@ -1,15 +1,15 @@
 .pfext-quick-start-task-review-alert {
-  margin: var(--pf-global--spacer--lg) 0;
+  margin: var(--pf-v5-global--spacer--lg) 0;
 }
 .pfext-quick-start-task-review {
-  font-size: var(--pf-global--FontSize--md);
-  line-height: var(--pf-global--FontSize--xl);
-  font-family: var(--pf-global--FontFamily--heading--sans-serif);
+  font-size: var(--pf-v5-global--FontSize--md);
+  line-height: var(--pf-v5-global--FontSize--xl);
+  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
 
   &__actions {
     display: flex;
     align-items: flex-start;
-    margin-bottom: var(--pf-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
     input[type='radio'] {
       margin-top: 0;
       margin-right: 0;
@@ -17,11 +17,11 @@
   }
 
   &__radio {
-    margin-right: var(--pf-global--spacer--xl) !important;
+    margin-right: var(--pf-v5-global--spacer--xl) !important;
   }
 
   &--success {
-    color: var(--pf-global--success-color--100) !important;
+    color: var(--pf-v5-global--success-color--100) !important;
   }
 
   &--failed {

package/src/controller/QuickStartTaskReview.tsx

@@ -10,11 +10,11 @@ import {
 
 import './QuickStartTaskReview.scss';
 
-type QuickStartTaskReviewProps = {
+interface QuickStartTaskReviewProps {
   review: QuickStartTaskReviewType;
   taskStatus: QuickStartTaskStatus;
   onTaskReview: (status: QuickStartTaskStatus) => void;
-};
+}
 
 const getAlertVariant = (status) => {
   switch (status) {