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

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Portal from './Portal';
 
 interface SimplePopperProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const SimplePopper = ({ children }: SimplePopperProps) => {
   const openProp = true;
-  const nodeRef = React.useRef<Element>();
-  const popperRef = React.useRef(null);
-  const [isOpen, setOpenState] = React.useState(openProp);
+  const nodeRef = useRef<Element>(null);
+  const popperRef = useRef(null);
+  const [isOpen, setOpenState] = useState(openProp);
 
-  const setOpen = React.useCallback((newOpen: boolean) => {
+  const setOpen = useCallback((newOpen: boolean) => {
     setOpenState(newOpen);
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setOpen(openProp);
   }, [openProp, setOpen]);
 
-  const onKeyDown = React.useCallback(
+  const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.keyCode === 27) {
         setOpen(false);
@@ -28,7 +28,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const onClickOutside = React.useCallback(
+  const onClickOutside = useCallback(
     (e: MouseEvent) => {
       if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
         setOpen(false);
@@ -37,7 +37,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const destroy = React.useCallback(() => {
+  const destroy = useCallback(() => {
     if (popperRef.current) {
       popperRef.current.destroy();
       document.removeEventListener('keydown', onKeyDown, true);
@@ -46,7 +46,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     }
   }, [onClickOutside, onKeyDown]);
 
-  const initialize = React.useCallback(() => {
+  const initialize = useCallback(() => {
     if (!nodeRef.current || !isOpen) {
       return;
     }
@@ -54,7 +54,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     destroy();
   }, [isOpen, destroy]);
 
-  const nodeRefCallback = React.useCallback(
+  const nodeRefCallback = useCallback(
     (node) => {
       nodeRef.current = node;
       initialize();
@@ -62,18 +62,18 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [initialize],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       destroy();
     },
     [destroy],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       destroy();
     }

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import './spotlight.scss';
+import { CSSProperties, FC, useEffect, useState } from 'react';
 import { Portal, SimplePopper } from '../popper';
 
 interface InteractiveSpotlightProps {
@@ -15,9 +16,9 @@ const isInViewport = (elementToCheck: Element) => {
   );
 };
 
-const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element }) => {
+const InteractiveSpotlight: FC<InteractiveSpotlightProps> = ({ element }) => {
   const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
-  const style: React.CSSProperties = {
+  const style: CSSProperties = {
     height,
     width,
     top,
@@ -25,9 +26,9 @@ const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element })
     bottom,
     right,
   };
-  const [clicked, setClicked] = React.useState(false);
+  const [clicked, setClicked] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!clicked) {
       if (!isInViewport(element)) {
         element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useMemo } from 'react';
 import InteractiveSpotlight from './InteractiveSpotlight';
 import StaticSpotlight from './StaticSpotlight';
 
@@ -7,9 +7,9 @@ interface SpotlightProps {
   interactive?: boolean;
 }
 
-const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
+const Spotlight: FC<SpotlightProps> = ({ selector, interactive }) => {
   // if target element is a hidden one return null
-  const element = React.useMemo(() => {
+  const element = useMemo(() => {
     const highlightElement = document.querySelector(selector);
     let hiddenElement = highlightElement;
     while (hiddenElement) {

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import './spotlight.scss';
+import { CSSProperties, FC } from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';
 
@@ -6,9 +7,9 @@ interface StaticSpotlightProps {
   element: Element;
 }
 
-const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
+const StaticSpotlight: FC<StaticSpotlightProps> = ({ element }) => {
   const clientRect = useBoundingClientRect(element as HTMLElement);
-  const style: React.CSSProperties = clientRect
+  const style: CSSProperties = clientRect
     ? {
         top: clientRect.top,
         left: clientRect.left,

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -0,0 +1,63 @@
+@keyframes pfext-spotlight-expand {
+    0% {
+      outline-offset: -4px;
+      outline-width: 4px;
+      opacity: 1;
+    }
+    100% {
+      outline-offset: 21px;
+      outline-width: 12px;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+  .pfext-spotlight {
+    pointer-events: none;
+    position: absolute;
+    &__with-backdrop {
+      mix-blend-mode: hard-light;
+    }
+    &__element-highlight-noanimate {
+      border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);
+      background-color: var(--pf-t--color--gray--40);
+      z-index: 9999;
+    }
+    &__element-highlight-animate {
+      pointer-events: none;
+      position: absolute;
+      box-shadow: inset 0px 0px 0px 4px var(--pf-t--global--color--brand--default);
+      opacity: 0;
+      animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+      animation-fill-mode: forwards;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+        animation-fill-mode: forwards;
+        outline: 4px solid var(--pf-t--global--color--brand--default);
+        outline-offset: -4px;
+      }
+    }
+  }

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);