Wizard: Add v5 PF slug to classNames

This adds v5 PF slug to classNames throughout the code base, making the formatting work properly.

src/Components/ImagesTable/EmptyState.tsx

@@ -99,7 +99,7 @@ const EmptyImagesTable = () => {
                 iconPosition="right"
                 isInline
                 href={CREATING_IMAGES_WITH_IB_SERVICE_URL}
-                className="pf-u-pt-md"
+                className="pf-v5-u-pt-md"
               >
                 Image builder for RPM-DNF documentation
               </Button>

src/Components/ImagesTable/ImageDetails.tsx

@@ -40,7 +40,7 @@ const SourceNotFoundPopover = () => {
           <Alert
             variant="danger"
             title="Source name cannot be loaded"
-            className="pf-u-pb-md"
+            className="pf-v5-u-pb-md"
             isInline
             isPlain
           />
@@ -63,7 +63,7 @@ const SourceNotFoundPopover = () => {
         </>
       }
     >
-      <Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
+      <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
         <div className="failure-button">Source name cannot be loaded</div>
       </Button>
     </Popover>
@@ -140,8 +140,10 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -190,7 +192,7 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
       </DescriptionList>
       <>
         <br />
-        <div className="pf-u-font-weight-bold pf-u-pb-md">
+        <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
           Cloud Provider Identifiers
         </div>
       </>
@@ -229,8 +231,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -264,10 +268,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
         </DescriptionListGroup>
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Image name</DescriptionListTerm>
           <DescriptionListDescription>
@@ -314,8 +318,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -351,10 +357,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
         )}
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Image name</DescriptionListTerm>
           <DescriptionListDescription>
@@ -393,8 +399,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
 
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>
@@ -414,10 +422,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
         </DescriptionListGroup>
       </DescriptionList>
       <br />
-      <div className="pf-u-font-weight-bold pf-u-pb-md">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
         Cloud Provider Identifiers
       </div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>Object Storage URL</DescriptionListTerm>
           <DescriptionListDescription>
@@ -445,8 +453,10 @@ type AwsS3DetailsPropTypes = {
 export const AwsS3Details = ({ compose }: AwsS3DetailsPropTypes) => {
   return (
     <>
-      <div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
-      <DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
+      <div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
+        Build Information
+      </div>
+      <DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
         <DescriptionListGroup>
           <DescriptionListTerm>UUID</DescriptionListTerm>
           <DescriptionListDescription>

src/Components/ImagesTable/ImagesTable.tsx

@@ -229,7 +229,7 @@ const ImagesTable = () => {
           );
         })}
       </Table>
-      <Toolbar className="pf-u-mb-xl">
+      <Toolbar className="pf-v5-u-mb-xl">
         <ToolbarContent>
           <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             <Pagination

src/Components/ImagesTable/Instance.tsx

@@ -316,7 +316,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
               iconPosition="right"
               // TO DO update the link after documentation is up
               href={FILE_SYSTEM_CUSTOMIZATION_URL}
-              className="pf-u-pl-0"
+              className="pf-v5-u-pl-0"
             >
               Read more about launching OCI images
             </Button>
@@ -325,7 +325,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
       >
         <Button
           variant="link"
-          className="pf-u-p-0 pf-u-font-size-sm"
+          className="pf-v5-u-p-0 pf-v5-u-font-size-sm"
           isDisabled={data?.image_status.status === 'success' ? false : true}
         >
           Image link

src/Components/ImagesTable/Status.tsx

@@ -276,8 +276,8 @@ type StatusPropTypes = {
 
 const Status = ({ icon, text }: StatusPropTypes) => {
   return (
-    <Flex className="pf-u-align-items-baseline pf-m-nowrap">
-      <div className="pf-u-mr-sm">{icon}</div>
+    <Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
+      <div className="pf-v5-u-mr-sm">{icon}</div>
       <p>{text}</p>
     </Flex>
   );
@@ -312,8 +312,8 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
   }
 
   return (
-    <Flex className="pf-u-align-items-baseline pf-m-nowrap">
-      <div className="pf-u-mr-sm">{icon}</div>
+    <Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
+      <div className="pf-v5-u-mr-sm">{icon}</div>
       <Popover
         data-testid="errorstatus-popover"
         position="bottom"
@@ -321,7 +321,7 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
         bodyContent={
           <>
             <Alert variant="danger" title={text} isInline isPlain />
-            <Text className="pf-u-pt-md pf-u-pb-md">{reason}</Text>
+            <Text className="pf-v5-u-pt-md pf-v5-u-pb-md">{reason}</Text>
             <Panel isScrollable>
               <PanelMain maxHeight="25rem">
                 <CodeBlock>
@@ -336,14 +336,14 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
                   reason + '\n\n' + detailsArray.join('\n')
                 )
               }
-              className="pf-u-pl-0 pf-u-mt-md"
+              className="pf-v5-u-pl-0 pf-v5-u-mt-md"
             >
               Copy error text to clipboard <CopyIcon />
             </Button>
           </>
         }
       >
-        <Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
+        <Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
           <div className="failure-button">{text}</div>
         </Button>
       </Popover>