Apply semantic components to row items (Checkbox, Link, StatusBadge, StarIcon)

Author: kelseamann

dist/main.bundle.js

@@ -38,8 +38,8 @@ import {
   ToolbarItem,
   Tooltip
 } from '@patternfly/react-core';
-import { Button, Card, Modal, Th, Td, Thead, Tbody } from 'semantic-ui-layer';
-import { AngleDownIcon, AngleRightIcon, BuildIcon, CheckCircleIcon, CodeBranchIcon, CopyIcon, EditIcon, EllipsisVIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ExternalLinkAltIcon, FilterIcon, OutlinedQuestionCircleIcon, OutlinedStarIcon, PlayIcon, StarIcon, TimesIcon } from '@patternfly/react-icons';
+import { Button, Card, Modal, Th, Td, Thead, Tbody, Checkbox, Link, StatusBadge, StarIcon } from 'semantic-ui-layer';
+import { AngleDownIcon, AngleRightIcon, BuildIcon, CheckCircleIcon, CodeBranchIcon, CopyIcon, EditIcon, EllipsisVIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ExternalLinkAltIcon, FilterIcon, OutlinedQuestionCircleIcon, OutlinedStarIcon, PlayIcon, StarIcon as PFStarIcon, TimesIcon } from '@patternfly/react-icons';
 import { type ImageItem, UseBaseImageModal } from './UseBaseImageModal';
 import BuildImageModal from './BuildImageModal';
 import { ImportPipelineModal } from './ImportPipelineModal';
@@ -1024,7 +1024,7 @@ const Test: React.FunctionComponent = () => {
                         }}
                         isDisabled={selectedRows.size !== 1 || hasNonReadySelected}
                       >
-                        Edit
+                        Button
                       </Button>
                     </ToolbarItem>
 
@@ -1035,7 +1035,7 @@ const Test: React.FunctionComponent = () => {
                         onClick={handleBulkDuplicate}
                         isDisabled={selectedRows.size === 0 || hasNonReadySelected}
                       >
-                        Duplicate ({selectedRows.size})
+                        Button
                       </Button>
                     </ToolbarItem>
                     <ToolbarItem>
@@ -1045,7 +1045,7 @@ const Test: React.FunctionComponent = () => {
                         onClick={handleBulkRebuild}
                         isDisabled={selectedRows.size === 0}
                       >
-                        Rebuild ({selectedRows.size})
+                        Button
                       </Button>
                     </ToolbarItem>
                   </>
@@ -1072,23 +1072,23 @@ const Test: React.FunctionComponent = () => {
               }}>
                 <tr>
                   <th style={{ padding: '1rem 0.5rem 1rem 1.5rem', textAlign: 'left', fontWeight: 600, width: '40px' }}></th>
-                  <Th 
-                    semanticName="Select All Images"
-                    style={{ padding: '1rem 0.75rem 1rem 1.5rem', textAlign: 'left', fontWeight: 600, width: '40px' }}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedRows.size === paginatedImages.length && paginatedImages.length > 0}
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          setSelectedRows(new Set(paginatedImages.map(img => img.id)));
-                        } else {
-                          setSelectedRows(new Set());
-                        }
-                      }}
-                      style={{ cursor: 'pointer' }}
-                    />
-                  </Th>
+          <Th
+            semanticName="Select All Images"
+            style={{ padding: '1rem 0.75rem 1rem 1.5rem', textAlign: 'left', fontWeight: 600, width: '40px' }}
+          >
+            <Checkbox
+              id="select-all-checkbox"
+              checked={selectedRows.size === paginatedImages.length && paginatedImages.length > 0}
+              onChange={(e) => {
+                if (e.target.checked) {
+                  setSelectedRows(new Set(paginatedImages.map(img => img.id)));
+                } else {
+                  setSelectedRows(new Set());
+                }
+              }}
+              style={{ cursor: 'pointer' }}
+            />
+          </Th>
                   <th style={{ padding: '1rem 0.5rem' }}>
                   </th>
                   <Th 
@@ -1190,26 +1190,26 @@ const Test: React.FunctionComponent = () => {
                         </Button>
                       </td>
                                               <td style={{ padding: '1rem 0.75rem 1rem 1.5rem' }} onClick={(e) => e.stopPropagation()}>
-                        <input
-                          type="checkbox"
+                        <Checkbox
+                          id={`checkbox-${image.id}`}
                           checked={selectedRows.has(image.id)}
                           onChange={() => toggleRowSelection(image.id)}
                           style={{ cursor: 'pointer' }}
                         />
                       </td>
                     <td style={{ padding: '1rem 0.5rem' }} onClick={(e) => e.stopPropagation()}>
-                      <Button
-                        variant="plain"
+                      <StarIcon
                         onClick={() => toggleFavorite(image.id)}
                         aria-label={`${image.isFavorited ? 'Remove from' : 'Add to'} favorites`}
                         style={{ padding: '0.25rem' }}
+                        isFavorited={image.isFavorited}
                       >
                         {image.isFavorited ? (
-                          <StarIcon style={{ color: '#f39c12' }} />
+                          <PFStarIcon style={{ color: '#f39c12' }} />
                         ) : (
                           <OutlinedStarIcon style={{ color: '#666' }} />
                         )}
-                      </Button>
+                      </StarIcon>
                     </td>
                     <td style={{ padding: '1rem 1.5rem' }}>
                       <strong>{image.name}</strong>
@@ -1220,10 +1220,14 @@ const Test: React.FunctionComponent = () => {
                     <td style={{ padding: '1rem 1.5rem' }}>{image.currentRelease}</td>
                     <td style={{ padding: '1rem 1.5rem' }}>{image.targetEnvironment}</td>
 
-                    <td style={{ padding: '1rem 1.5rem' }}>{getStatusBadge(image.status, image.targetEnvironment)}</td>
+                    <td style={{ padding: '1rem 1.5rem' }}>
+                      <StatusBadge>
+                        {getStatusBadge(image.status, image.targetEnvironment)}
+                      </StatusBadge>
+                    </td>
                     <td style={{ padding: '1rem 1.5rem' }}>
                       {image.status === 'ready' ? (
-                        <a
+                        <Link
                           href="#"
                           onClick={(e) => {
                             e.preventDefault();
@@ -1240,9 +1244,9 @@ const Test: React.FunctionComponent = () => {
                           onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
                         >
                           Launch instance
-                        </a>
+                        </Link>
                       ) : (
-                        <a
+                        <Link
                           href="#"
                           onClick={(e) => {
                             e.preventDefault();
@@ -1260,7 +1264,7 @@ const Test: React.FunctionComponent = () => {
                           onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
                         >
                           Download blueprint (.json)
-                        </a>
+                        </Link>
                       )}
                     </td>
                     <td style={{ padding: '1rem 1.5rem' }} onClick={(e) => e.stopPropagation()}>
@@ -1494,10 +1498,10 @@ const Test: React.FunctionComponent = () => {
               marginRight: '-8px'  // Align with X button position
             }}>
               <Button variant="danger" onClick={handleDeleteConfirm}>
-                Delete
+                Button
               </Button>
               <Button variant="link" onClick={handleDeleteCancel}>
-                Cancel
+                Button
               </Button>
             </div>
           </ModalBody>
@@ -1531,7 +1535,7 @@ const Test: React.FunctionComponent = () => {
                   padding: '0.25rem 0.5rem'
                 }}
               >
-                Watch Demo
+                Button
               </Button>
             </FlexItem>
             <FlexItem>