@patternfly/quickstarts 6.3.0-prerelease.3 → 6.3.0-prerelease.4

package/src/ConsoleShared/src/components/status/GenericStatus.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { Children, ComponentType, FC, ReactNode } from 'react';
 import PopoverStatus from './PopoverStatus';
 import StatusIconAndText from './StatusIconAndText';
 import { StatusComponentProps } from './types';
 
-const GenericStatus: React.FC<GenericStatusProps> = (props) => {
+const GenericStatus: FC<GenericStatusProps> = (props) => {
   const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
   const renderIcon = iconOnly && !noTooltip ? <Icon title={title} /> : <Icon />;
   const statusBody = (
@@ -15,7 +15,7 @@ const GenericStatus: React.FC<GenericStatusProps> = (props) => {
       icon={renderIcon}
     />
   );
-  return React.Children.toArray(children).length ? (
+  return Children.toArray(children).length ? (
     <PopoverStatus title={popoverTitle || title} {...restProps} statusBody={statusBody}>
       {children}
     </PopoverStatus>
@@ -25,8 +25,8 @@ const GenericStatus: React.FC<GenericStatusProps> = (props) => {
 };
 
 type GenericStatusProps = StatusComponentProps & {
-  Icon: React.ComponentType<{ title?: string }>;
-  children?: React.ReactNode;
+  Icon: ComponentType<{ title?: string }>;
+  children?: ReactNode;
   popoverTitle?: string;
   noTooltip?: boolean;
 };

package/src/ConsoleShared/src/components/status/NotStartedIcon.tsx

@@ -1,6 +1,5 @@
 // TODO: Pull from Patternfly when they add it
 // https://github.com/patternfly/patternfly-design/issues/921#issuecomment-726183814
-import * as React from 'react';
 
 export default (props) => (
   <svg

package/src/ConsoleShared/src/components/status/PopoverStatus.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { FC, ReactNode } from 'react';
 import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
 
-const PopoverStatus: React.FC<PopoverStatusProps> = ({
+const PopoverStatus: FC<PopoverStatusProps> = ({
   hideHeader,
   children,
   isVisible = null,
@@ -26,8 +26,8 @@ const PopoverStatus: React.FC<PopoverStatusProps> = ({
 );
 
 interface PopoverStatusProps {
-  children: React.ReactNode;
-  statusBody: React.ReactNode;
+  children: ReactNode;
+  statusBody: ReactNode;
   onHide?: (event: MouseEvent | KeyboardEvent) => void;
   onShow?: (event: MouseEvent | KeyboardEvent) => void;
   title?: string;

package/src/ConsoleShared/src/components/status/Status.tsx

@@ -1,17 +1,11 @@
-import * as React from 'react';
+import { FC } from 'react';
 import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
 import { DASH } from '../../constants';
 import { SuccessStatus } from './statuses';
 import StatusIconAndText from './StatusIconAndText';
 import { StatusComponentProps } from './types';
 
-export const Status: React.FC<StatusProps> = ({
-  status,
-  title,
-  iconOnly,
-  noTooltip,
-  className,
-}) => {
+export const Status: FC<StatusProps> = ({ status, title, iconOnly, noTooltip, className }) => {
   const statusProps = { title: title || status, iconOnly, noTooltip, className };
   switch (status) {
     case 'In Progress':
@@ -25,9 +19,7 @@ export const Status: React.FC<StatusProps> = ({
   }
 };
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => (
-  <Status status={status} iconOnly />
-);
+export const StatusIcon: FC<StatusIconProps> = ({ status }) => <Status status={status} iconOnly />;
 
 interface StatusIconProps {
   status: string;

package/src/ConsoleShared/src/components/status/StatusIconAndText.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import { cloneElement, FC, ReactElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import { CamelCaseWrap } from '@console/internal/components/utils';
 import { DASH } from '../../constants';
 import { StatusComponentProps } from './types';
 
 type StatusIconAndTextProps = StatusComponentProps & {
-  icon?: React.ReactElement;
+  icon?: ReactElement<any>;
   spin?: boolean;
 };
 
-const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
+const StatusIconAndText: FC<StatusIconAndTextProps> = ({
   icon,
   title,
   spin,
@@ -27,13 +27,13 @@ const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
       title={iconOnly && !noTooltip ? title : undefined}
     >
       {icon &&
-        React.cloneElement(icon, {
+        cloneElement(icon, {
           className: css(
             spin && 'fa-spin',
-            icon.props.className,
+            (icon.props as any).className,
             !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child',
           ),
-        })}
+        } as any)}
       {!iconOnly && <CamelCaseWrap value={title} dataTest="status-text" />}
     </span>
   );

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -1,26 +1,22 @@
-import * as React from 'react';
+import { FC } from 'react';
 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 InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Icon } from '@patternfly/react-core';
 
-export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+export const GreenCheckCircleIcon: FC<ColoredIconProps> = ({ className, title, size }) => (
   <Icon size={size} status="success">
     <CheckCircleIcon data-test="success-icon" className={className} title={title} />
   </Icon>
 );
 
-export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
-  className,
-  title,
-  size,
-}) => (
+export const RedExclamationCircleIcon: FC<ColoredIconProps> = ({ className, title, size }) => (
   <Icon size={size} status="danger">
     <ExclamationCircleIcon className={className} title={title} />
   </Icon>
 );
 
-export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+export const BlueInfoCircleIcon: FC<ColoredIconProps> = ({ className, title }) => (
   <Icon status="info">
     <InfoCircleIcon className={className} title={title} />
   </Icon>

package/src/ConsoleShared/src/components/status/statuses.tsx

@@ -1,20 +1,19 @@
-import * as React from 'react';
-
+import { FC } from 'react';
 import GenericStatus from './GenericStatus';
 import { BlueInfoCircleIcon, GreenCheckCircleIcon, RedExclamationCircleIcon } from './icons';
 import { StatusComponentProps } from './types';
 
-export const ErrorStatus: React.FC<StatusComponentProps> = (props) => (
+export const ErrorStatus: FC<StatusComponentProps> = (props) => (
   <GenericStatus {...props} Icon={RedExclamationCircleIcon} title={props.title || 'Error'} />
 );
 ErrorStatus.displayName = 'ErrorStatus';
 
-export const InfoStatus: React.FC<StatusComponentProps> = (props) => (
+export const InfoStatus: FC<StatusComponentProps> = (props) => (
   <GenericStatus {...props} Icon={BlueInfoCircleIcon} title={props.title || 'Information'} />
 );
 InfoStatus.displayName = 'InfoStatus';
 
-export const SuccessStatus: React.FC<StatusComponentProps> = (props) => (
+export const SuccessStatus: FC<StatusComponentProps> = (props) => (
   <GenericStatus {...props} Icon={GreenCheckCircleIcon} title={props.title || 'Healthy'} />
 );
 SuccessStatus.displayName = 'SuccessStatus';

package/src/ConsoleShared/src/components/utils/FallbackImg.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import { FC, ReactNode, useState } from 'react';
 
 interface FallbackImgProps {
   src: string;
   alt?: string;
   className?: string;
-  fallback?: React.ReactNode;
+  fallback?: ReactNode;
 }
 
-const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
-  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+const FallbackImg: FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = useState<boolean>(true);
 
   if (src && isSrcValid) {
     return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;

package/src/ConsoleShared/src/hooks/scroll.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 export enum ScrollDirection {
   scrollingUp = 'scrolling-up',
@@ -27,9 +27,9 @@ export const getScrollDirection = (
 };
 
 export const useScrollDirection = (): [ScrollDirection, (event) => void] => {
-  const scrollPosition = React.useRef<number>(null);
-  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
-  const handleScroll = React.useCallback(
+  const scrollPosition = useRef<number>(null);
+  const [scrollDirection, setScrollDirection] = useState<ScrollDirection>(null);
+  const handleScroll = useCallback(
     (event) => {
       const { scrollHeight, scrollTop, clientHeight } = event.target;
       if (scrollPosition.current !== null) {

package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import { useCallback, useState } from 'react';
 import { useResizeObserver } from './useResizeObserver';
 
 type BoundingClientRect = ClientRect | null;
 
 export const useBoundingClientRect = (targetElement: HTMLElement | null): BoundingClientRect => {
-  const [clientRect, setClientRect] = React.useState<BoundingClientRect>(() =>
+  const [clientRect, setClientRect] = useState<BoundingClientRect>(() =>
     targetElement ? targetElement.getBoundingClientRect() : null,
   );
 
-  const observerCallback = React.useCallback(() => {
+  const observerCallback = useCallback(() => {
     setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
   }, [targetElement]);
 

package/src/ConsoleShared/src/hooks/useForceRender.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { useReducer } from 'react';
 
 /**
  * React hook that forces component render.
  */
-export const useForceRender = () => React.useReducer((s: boolean) => !s, false)[1] as VoidFunction;
+export const useForceRender = () => useReducer((s: boolean) => !s, false)[1] as VoidFunction;

package/src/ConsoleShared/src/hooks/useResizeObserver.ts

@@ -1,15 +1,12 @@
-import * as React from 'react';
+import { useEffect, useMemo } from 'react';
 
 export const useResizeObserver = (
   callback: ResizeObserverCallback,
   targetElement?: HTMLElement | null,
   observerOptions: ResizeObserverOptions = undefined,
 ): void => {
-  const element = React.useMemo(
-    () => targetElement ?? document.querySelector('body'),
-    [targetElement],
-  );
-  React.useEffect(() => {
+  const element = useMemo(() => targetElement ?? document.querySelector('body'), [targetElement]);
+  useEffect(() => {
     const observer = new ResizeObserver(callback);
     observer.observe(element, observerOptions);
     return () => {

package/src/ConsoleShared/src/hooks/useScrollShadows.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useResizeObserver } from './useResizeObserver';
 
 export enum Shadows {
@@ -9,8 +9,8 @@ export enum Shadows {
 }
 
 export const useScrollShadows = (node: HTMLElement): Shadows => {
-  const [shadows, setShadows] = React.useState(Shadows.none);
-  const computeShadows = React.useCallback(() => {
+  const [shadows, setShadows] = useState(Shadows.none);
+  const computeShadows = useCallback(() => {
     if (node) {
       const { scrollTop, clientHeight, scrollHeight } = node;
       const top = scrollTop !== 0;
@@ -28,7 +28,7 @@ export const useScrollShadows = (node: HTMLElement): Shadows => {
   }, [node]);
   // recompute when the scroll container changes in size
   useResizeObserver(computeShadows, node);
-  React.useEffect(() => {
+  useEffect(() => {
     if (node) {
       // compute initial shadows
       computeShadows();

package/src/ConsoleShared/src/utils/useCombineRefs.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import { MutableRefObject, Ref, useCallback } from 'react';
 
-export const useCombineRefs = <RefType>(...refs: (React.Ref<RefType> | undefined)[]) =>
-  React.useCallback(
+export const useCombineRefs = <RefType>(...refs: (Ref<RefType> | undefined)[]) =>
+  useCallback(
     (element: RefType | null): void =>
       refs.forEach((ref) => {
         if (ref) {
           if (typeof ref === 'function') {
             ref(element);
           } else {
-            (ref as React.MutableRefObject<any>).current = element;
+            (ref as MutableRefObject<any>).current = element;
           }
         }
       }),

package/src/HelpTopicDrawer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext, useEffect } from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import HelpTopicPanelContent from './HelpTopicPanelContent';
 import {
@@ -33,7 +33,7 @@ export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement>
   children?: React.ReactNode;
 }
 
-export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
+export const HelpTopicContainer: FC<HelpTopicContainerProps> = ({
   helpTopics,
   children,
   resourceBundle,
@@ -54,13 +54,13 @@ export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
     ...contextProps,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (loading !== valuesForHelpTopicContext.loading) {
       valuesForHelpTopicContext.setLoading(loading);
     }
   }, [loading, valuesForHelpTopicContext]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       helpTopics &&
       JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)
@@ -81,9 +81,9 @@ export interface HelpTopicDrawerProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...props }) => {
+export const HelpTopicDrawer: FC<HelpTopicDrawerProps> = ({ children, ...props }) => {
   const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } =
-    React.useContext<HelpTopicContextValues>(HelpTopicContext);
+    useContext<HelpTopicContextValues>(HelpTopicContext);
 
   const onClose = () => {
     setActiveHelpTopicByName('');

package/src/HelpTopicPanelContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext, useState } from 'react';
 import {
   Button,
   Divider,
@@ -30,16 +30,16 @@ interface HelpTopicPanelContentProps {
   onClose: () => void;
 }
 
-const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
+const HelpTopicPanelContent: FC<HelpTopicPanelContentProps> = ({
   activeHelpTopic = null,
   filteredHelpTopics = [],
   isResizable = true,
   onClose,
   ...props
 }) => {
-  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+  const { setActiveHelpTopicByName } = useContext<HelpTopicContextValues>(HelpTopicContext);
 
-  const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+  const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = useState(false);
 
   const toggleHelpTopicMenu = () => {
     setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);

package/src/QuickStartCatalogPage.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect, useState } from 'react';
 import {
   Button,
   Content,
@@ -28,11 +28,11 @@ export interface QuickStartCatalogPageProps {
 }
 
 export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <EmptyState
       headingLevel="h4"
-      icon={SearchIcon}
+      icon={SearchIcon as any}
       titleText={<>{getResource('No results found')}</>}
     >
       <EmptyStateBody>
@@ -52,7 +52,7 @@ export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
   );
 };
 
-export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
+export const QuickStartCatalogPage: FC<QuickStartCatalogPageProps> = ({
   quickStarts,
   showFilter,
   sortFnc = (q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName),
@@ -60,7 +60,7 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
   hint,
   showTitle = true,
 }) => {
-  const sortFncCallback = React.useCallback(sortFnc, [sortFnc]);
+  const sortFncCallback = useCallback(sortFnc, [sortFnc]);
   const {
     allQuickStarts = [],
     setAllQuickStarts,
@@ -69,9 +69,9 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
     filter,
     setFilter,
     loading,
-  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  } = useContext<QuickStartContextValues>(QuickStartContext);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // passed through prop, not context
     if (quickStarts && JSON.stringify(quickStarts) !== JSON.stringify(allQuickStarts)) {
       setAllQuickStarts(quickStarts);
@@ -87,8 +87,8 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
       ).sort(sortFncCallback)
     : allQuickStarts;
 
-  const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
-  React.useEffect(() => {
+  const [filteredQuickStarts, setFilteredQuickStarts] = useState(initialFilteredQuickStarts);
+  useEffect(() => {
     const filteredQs = showFilter
       ? filterQuickStarts(
           allQuickStarts,

package/src/QuickStartCloseModal.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
 import { ModalVariant } from '@patternfly/react-core/deprecated';
 import { Modal } from '@console/shared';
@@ -10,12 +10,8 @@ interface QuickStartCloseModalProps {
   onCancel: () => void;
 }
 
-const QuickStartCloseModal: React.FC<QuickStartCloseModalProps> = ({
-  isOpen,
-  onConfirm,
-  onCancel,
-}) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+const QuickStartCloseModal: FC<QuickStartCloseModalProps> = ({ isOpen, onConfirm, onCancel }) => {
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Modal
       isOpen={isOpen}

package/src/QuickStartContainer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useEffect } from 'react';
 import {
   QuickStartContext,
   QuickStartContextValues,
@@ -58,7 +58,7 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
   isManagedDrawer?: boolean;
 }
 
-export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
+export const QuickStartContainer: FC<QuickStartContainerProps> = ({
   quickStarts,
   children,
   activeQuickStartID,
@@ -105,7 +105,7 @@ export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
     ...contextProps,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       quickStarts &&
       JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)
@@ -114,7 +114,7 @@ export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
     }
   }, [quickStarts, valuesForQuickstartContext]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (loading !== valuesForQuickstartContext.loading) {
       valuesForQuickstartContext.setLoading(loading);
     }

package/src/QuickStartController.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect } from 'react';
 import QuickStartContent from './controller/QuickStartContent';
 import QuickStartFooter from './controller/QuickStartFooter';
 import {
@@ -19,7 +19,7 @@ interface QuickStartControllerProps {
   contentRef?: React.Ref<HTMLDivElement>;
 }
 
-export const QuickStartController: React.FC<QuickStartControllerProps> = ({
+export const QuickStartController: FC<QuickStartControllerProps> = ({
   quickStart,
   nextQuickStarts,
   contentRef,
@@ -40,8 +40,8 @@ export const QuickStartController: React.FC<QuickStartControllerProps> = ({
     setQuickStartTaskStatus,
     nextStep,
     previousStep,
-  } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  React.useEffect(() => {
+  } = useContext<QuickStartContextValues>(QuickStartContext);
+  useEffect(() => {
     // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
     if (activeQuickStartID && !allQuickStartStates[activeQuickStartID]) {
       setAllQuickStartStates({
@@ -57,17 +57,17 @@ export const QuickStartController: React.FC<QuickStartControllerProps> = ({
     (task, index) => activeQuickStartState[`taskStatus${index}`],
   ) as QuickStartTaskStatus[];
 
-  const handleQuickStartChange = React.useCallback(
+  const handleQuickStartChange = useCallback(
     (quickStartId: string) => setActiveQuickStart(quickStartId),
     [setActiveQuickStart],
   );
 
-  const handleTaskStatusChange = React.useCallback(
+  const handleTaskStatusChange = useCallback(
     (newTaskStatus: QuickStartTaskStatus) => setQuickStartTaskStatus(newTaskStatus),
     [setQuickStartTaskStatus],
   );
 
-  const getQuickStartActiveTask = React.useCallback(() => {
+  const getQuickStartActiveTask = useCallback(() => {
     let activeTaskNumber = 0;
     while (
       activeTaskNumber !== totalTasks &&
@@ -78,12 +78,12 @@ export const QuickStartController: React.FC<QuickStartControllerProps> = ({
     return activeTaskNumber;
   }, [totalTasks, activeQuickStartState]);
 
-  const handleQuickStartContinue = React.useCallback(() => {
+  const handleQuickStartContinue = useCallback(() => {
     const activeTaskNumber = getQuickStartActiveTask();
     setQuickStartTaskNumber(name, activeTaskNumber);
   }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
 
-  const handleNext = React.useCallback(() => {
+  const handleNext = useCallback(() => {
     if (status === QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
       return handleQuickStartChange('');
     }
@@ -95,9 +95,9 @@ export const QuickStartController: React.FC<QuickStartControllerProps> = ({
     return nextStep(totalTasks);
   }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
 
-  const handleBack = React.useCallback(() => previousStep(), [previousStep]);
+  const handleBack = useCallback(() => previousStep(), [previousStep]);
 
-  const handleTaskSelect = React.useCallback(
+  const handleTaskSelect = useCallback(
     (selectedTaskNumber: number) => {
       setQuickStartTaskNumber(name, selectedTaskNumber);
     },

package/src/QuickStartDrawer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext, useEffect, useState } from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import QuickStartCloseModal from './QuickStartCloseModal';
 import QuickStartDrawerContent from './QuickStartDrawerContent';
@@ -19,7 +19,7 @@ export interface QuickStartDrawerProps extends React.HTMLProps<HTMLDivElement> {
   onCloseNotInProgress?: any;
 }
 
-export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
+export const QuickStartDrawer: FC<QuickStartDrawerProps> = ({
   quickStarts = [],
   children,
   appendTo,
@@ -34,9 +34,9 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     allQuickStarts = [],
     allQuickStartStates,
     setAllQuickStartStates,
-  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  } = useContext<QuickStartContextValues>(QuickStartContext);
   const combinedQuickStarts = allQuickStarts.concat(quickStarts);
-  React.useEffect(() => {
+  useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     // if there is a quick start param, but the quick start is not active, set it
     // this can happen if a new browser session is opened or an incognito window for example
@@ -50,7 +50,7 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     }
   }, [activeQuickStartID, combinedQuickStarts, setActiveQuickStart]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
     if (activeQuickStartID && !allQuickStartStates[activeQuickStartID]) {
       setAllQuickStartStates({
@@ -60,7 +60,7 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     }
   }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
 
-  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
   const onClose = () => setActiveQuickStart('');
   const handleClose = (activeQuickStartStatus: string | number) => {
     if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {

package/src/QuickStartDrawerContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import QuickStartPanelContent from './QuickStartPanelContent';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart } from './utils/quick-start-types';
@@ -12,7 +12,7 @@ export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivEle
   handleDrawerClose?: (quickStartStatus: string | number) => void;
 }
 
-export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = ({
+export const QuickStartDrawerContent: FC<QuickStartDrawerContentProps> = ({
   quickStarts = [],
   appendTo,
   fullWidth,
@@ -23,7 +23,7 @@ export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = (
     activeQuickStartID,
     allQuickStarts = [],
     activeQuickStartState,
-  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  } = useContext<QuickStartContextValues>(QuickStartContext);
   const combinedQuickStarts = allQuickStarts.concat(quickStarts);
 
   const handleClose = () => {