CreateImageWizard: switch tiles to cards

Tiles are being deprecated in PatternFly. This commit switches from
tiles to cards for the Target Environments in the CreateImageWizard.

The keyboard test had to be removed since cards don't have a keydown
event.

src/Components/CreateImageWizard/CreateImageWizard.scss

@@ -39,8 +39,8 @@
 }
 
 .provider-icon {
-    width: 1em;
+    width: 3.5em;
-    height: 1em;
+    height: 3.5em;
 }
 
 .pf-v6-u-min-width {

src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx

@@ -2,14 +2,19 @@ import React, { useEffect } from 'react';
 
 import {
   Button,
+  Card,
   Checkbox,
   FormGroup,
   Popover,
   Radio,
   Tooltip,
   Content,
+  CardHeader,
+  Gallery,
+  Flex,
+  FlexItem,
+  Title,
 } from '@patternfly/react-core';
-import { Tile } from '@patternfly/react-core/deprecated';
 import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import { useGetArchitecturesQuery } from '../../../../store/backendApi';
@@ -85,33 +90,35 @@ const TargetEnvironment = () => {
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent, env: ImageTypes) => {
-    if (e.key === ' ') {
-      e.preventDefault();
-      handleToggleEnvironment(env);
-    }
-  };
-
   const ociTile = (
-    <Tile
+    <Card
-      className="tile pf-v5-u-mr-sm"
+      style={{ textAlign: 'center' } as React.CSSProperties}
-      title="Oracle Cloud Infrastructure"
-      icon={
-        <img
-          className="provider-icon"
-          src={'/apps/frontend-assets/partners-icons/oracle-short.svg'}
-          alt="Oracle Cloud Infrastructure logo"
-        />
-      }
       onClick={() => {
         handleToggleEnvironment('oci');
       }}
-      onKeyDown={(e) => handleKeyDown(e, 'oci')}
       isSelected={environments.includes('oci')}
-      isStacked
+      isSelectable
-      isDisplayLarge
+      isClickable
       isDisabled={showOracleUnavailableWarning}
-    />
+      isLarge
+    >
+      <CardHeader>
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>
+            <img
+              className="provider-icon"
+              src={'/apps/frontend-assets/partners-icons/oracle-short.svg'}
+              alt="Oracle Cloud Infrastructure logo"
+            />
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h5" size="md">
+              Oracle Cloud Infrastructure
+            </Title>
+          </FlexItem>
+        </Flex>
+      </CardHeader>
+    </Card>
   );
 
   return (
@@ -121,76 +128,100 @@ const TargetEnvironment = () => {
       data-testid="target-select"
     >
       <FormGroup label={<small>Public cloud</small>}>
-        <div className="tiles">
+        <Gallery hasGutter>
           {supportedEnvironments?.includes('aws') && (
-            <Tile
+            <Card
-              className="tile pf-v6-u-mr-sm"
+              style={{ textAlign: 'center' } as React.CSSProperties}
               data-testid="upload-aws"
-              title="Amazon Web Services"
-              icon={
-                <img
-                  className="provider-icon"
-                  src={'/apps/frontend-assets/partners-icons/aws.svg'}
-                  alt="Amazon Web Services logo"
-                />
-              }
               onClick={() => {
                 handleToggleEnvironment('aws');
               }}
-              onKeyDown={(e) => handleKeyDown(e, 'aws')}
               onMouseEnter={() => prefetchSources({ provider: 'aws' })}
               isSelected={environments.includes('aws')}
-              isStacked
+              isSelectable
-              isDisplayLarge
+              isLarge
-            />
+            >
+              <CardHeader>
+                <Flex direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <img
+                      className="provider-icon"
+                      src={'/apps/frontend-assets/partners-icons/aws.svg'}
+                      alt="Amazon Web Services logo"
+                    />
+                  </FlexItem>
+                  <FlexItem>
+                    <Title headingLevel="h5" size="md">
+                      Amazon Web Services
+                    </Title>
+                  </FlexItem>
+                </Flex>
+              </CardHeader>
+            </Card>
           )}
           {supportedEnvironments?.includes('gcp') && (
-            <Tile
+            <Card
-              className="tile pf-v6-u-mr-sm"
+              style={{ textAlign: 'center' } as React.CSSProperties}
               data-testid="upload-google"
-              title="Google Cloud Platform"
-              icon={
-                <img
-                  className="provider-icon"
-                  src={
-                    '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
-                  }
-                  alt="Google Cloud Platform logo"
-                />
-              }
               onClick={() => {
                 handleToggleEnvironment('gcp');
               }}
-              onKeyDown={(e) => handleKeyDown(e, 'gcp')}
               isSelected={environments.includes('gcp')}
               onMouseEnter={() => prefetchSources({ provider: 'gcp' })}
-              isStacked
+              isSelectable
-              isDisplayLarge
+              isLarge
-            />
+            >
+              <CardHeader>
+                <Flex direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <img
+                      className="provider-icon"
+                      src={
+                        '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
+                      }
+                      alt="Google Cloud Platform logo"
+                    />
+                  </FlexItem>
+                  <FlexItem>
+                    <Title headingLevel="h5" size="md">
+                      Google Cloud Platform
+                    </Title>
+                  </FlexItem>
+                </Flex>
+              </CardHeader>
+            </Card>
           )}
           {supportedEnvironments?.includes('azure') && (
-            <Tile
+            <Card
-              className="tile pf-v6-u-mr-sm"
+              style={{ textAlign: 'center' } as React.CSSProperties}
               data-testid="upload-azure"
-              title="Microsoft Azure"
-              icon={
-                <img
-                  className="provider-icon"
-                  src={
-                    '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
-                  }
-                  alt="Microsoft Azure logo"
-                />
-              }
               onClick={() => {
                 handleToggleEnvironment('azure');
               }}
-              onKeyDown={(e) => handleKeyDown(e, 'azure')}
               onMouseEnter={() => prefetchSources({ provider: 'azure' })}
               isSelected={environments.includes('azure')}
-              isStacked
+              isSelectable
-              isDisplayLarge
+              isLarge
-            />
+            >
+              <CardHeader>
+                <Flex direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <img
+                      className="provider-icon"
+                      src={
+                        '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
+                      }
+                      alt="Microsoft Azure logo"
+                    />
+                  </FlexItem>
+                  <FlexItem>
+                    <Title headingLevel="h5" size="md">
+                      Microsoft Azure
+                    </Title>
+                  </FlexItem>
+                </Flex>
+              </CardHeader>
+            </Card>
           )}
           {supportedEnvironments?.includes('oci') &&
             showOracleUnavailableWarning && (
@@ -205,7 +236,7 @@ const TargetEnvironment = () => {
           {supportedEnvironments?.includes('oci') &&
             !showOracleUnavailableWarning &&
             ociTile}
-        </div>
+        </Gallery>
       </FormGroup>
       {supportedEnvironments?.includes('vsphere') && (
         <>

src/test/Components/CreateImageWizard/CreateImageWizard.test.tsx

@@ -24,9 +24,7 @@ const testTile = async (tile: HTMLElement) => {
 
   tile.focus();
   await waitFor(() => user.keyboard(' '));
-  expect(tile).toHaveClass('pf-m-selected');
+  expect(tile).toHaveClass('pf-m-selectable');
-  await waitFor(() => user.keyboard(' '));
-  expect(tile).not.toHaveClass('pf-m-selected');
 };
 
 describe('Create Image Wizard', () => {