Merge branch 'main' into nmazzite-RHOAIENG-58501-2

Author: nickmazzi

.coderabbit.yaml

@@ -11,7 +11,6 @@ reviews:
     # Baseline already excludes: vendor, node_modules, bin, __pycache__,
     #   *.sum, *.pb.go, *.generated.go, synced security configs
     - "!package-lock.json"
-    - "!.github/**"
     - "!.tekton/**"
     - "!**/@mf-types/**"
     - "!**/dist/**"

frontend/src/components/TypeaheadSelect.tsx

@@ -98,6 +98,8 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSe
   dataTestId?: string;
   /** Flag to indicate if showing the description under the toggle */
   previewDescription?: boolean;
+  /** Optional icon rendered inside the text input */
+  inputIcon?: React.ReactNode;
 }
 
 const defaultNoOptionsFoundMessage = (filter: string) => `No results found for "${filter}"`;
@@ -127,6 +129,7 @@ const TypeaheadSelect: React.FunctionComponent<TypeaheadSelectProps> = ({
   isRequired = true,
   previewDescription = true,
   dataTestId,
+  inputIcon,
   ...props
 }: TypeaheadSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -439,9 +442,11 @@ const TypeaheadSelect: React.FunctionComponent<TypeaheadSelectProps> = ({
               autoComplete="off"
               innerRef={textInputRef}
               placeholder={placeholder}
+              icon={inputIcon}
               {...(activeItemId && { 'aria-activedescendant': activeItemId })}
               role="combobox"
               isExpanded={isOpen}
+              className="pf-v6-u-w-100"
             />
           </FlexItem>
           {selected && selected.selectedLabel && <FlexItem>{selected.selectedLabel}</FlexItem>}

frontend/src/concepts/areas/useIsAreaAvailable.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { AreaContext } from '#~/concepts/areas/AreaContext';
-import { IsAreaAvailableStatus, SupportedArea } from './types';
+import { IsAreaAvailableStatus, SupportedAreaType } from './types';
 
-const useIsAreaAvailable = (area: SupportedArea): IsAreaAvailableStatus =>
+const useIsAreaAvailable = (area: SupportedAreaType): IsAreaAvailableStatus =>
   React.useContext(AreaContext).areasStatus[area] ?? {
     status: false,
     devFlags: null,

frontend/src/concepts/design/CollapsibleSection.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Button, Flex, FlexItem, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  Content,
+  ContentVariants,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { AngleDownIcon, AngleRightIcon } from '@patternfly/react-icons';
 
 interface CollapsibleSectionProps {
@@ -26,45 +34,30 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   const titleId = `${localId}-title`;
 
   return (
-    <>
-      <Flex
-        gap={{ default: 'gapMd' }}
-        alignItems={{ default: 'alignItemsCenter' }}
-        style={
-          (open ?? innerOpen) || showChildrenWhenClosed
-            ? {
-                marginBottom: 'var(--pf-t--global--spacer--md)',
-              }
-            : undefined
-        }
-      >
-        <FlexItem>
-          <Button
-            icon={open ?? innerOpen ? <AngleDownIcon /> : <AngleRightIcon />}
-            aria-labelledby={titleId}
-            aria-expanded={open}
-            variant="plain"
-            style={{
-              paddingLeft: 0,
-              paddingRight: 0,
-              fontSize:
-                titleVariant === ContentVariants.h2
-                  ? 'var(--pf-t--global--icon--size--font--heading--h2)'
-                  : 'var(--pf-t--global--icon--size--font--heading--h1)', // Could use icon--size--font--[md|lg|xl] for a smaller icon
-            }}
-            onClick={() => (setOpen ? setOpen(!open) : setInnerOpen((prev) => !prev))}
-          />
-        </FlexItem>
-        <FlexItem>
-          <Content>
-            <Content id={titleId} component={titleVariant}>
-              {title}
+    <Stack hasGutter>
+      <StackItem>
+        <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem>
+            <Button
+              icon={open ?? innerOpen ? <AngleDownIcon /> : <AngleRightIcon />}
+              aria-labelledby={titleId}
+              aria-expanded={open ?? innerOpen}
+              variant="plain"
+              className="pf-v6-u-px-0"
+              onClick={() => (setOpen ? setOpen(!open) : setInnerOpen((prev) => !prev))}
+            />
+          </FlexItem>
+          <FlexItem>
+            <Content>
+              <Content id={titleId} component={titleVariant}>
+                {title}
+              </Content>
             </Content>
-          </Content>
-        </FlexItem>
-      </Flex>
-      {(open ?? innerOpen) || showChildrenWhenClosed ? children : null}
-    </>
+          </FlexItem>
+        </Flex>
+      </StackItem>
+      {(open ?? innerOpen) || showChildrenWhenClosed ? <StackItem>{children}</StackItem> : null}
+    </Stack>
   );
 };
 

frontend/src/concepts/design/HeaderIcon.tsx

@@ -25,6 +25,7 @@ const HeaderIcon: React.FC<HeaderIconProps> = ({
   sectionType,
 }) => (
   <div
+    aria-hidden
     style={{
       display,
       width: size,

frontend/src/concepts/design/SectionIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {
+  SectionType,
+  sectionTypeBackgroundColor,
+  sectionTypeIconColor,
+} from '#~/concepts/design/utils';
+
+type SectionIconProps = {
+  icon: React.ComponentType<{ style?: React.CSSProperties }>;
+  sectionType: SectionType;
+  size?: number;
+  padding?: number;
+  display?: string;
+};
+
+const SectionIcon: React.FC<SectionIconProps> = ({
+  icon: IconComponent,
+  sectionType,
+  size = 40,
+  padding = 8,
+  display = 'inline-block',
+}) => (
+  <div
+    aria-hidden
+    style={{
+      display,
+      width: size,
+      height: size,
+      padding,
+      borderRadius: size / 2,
+      background: sectionTypeBackgroundColor(sectionType),
+      color: sectionTypeIconColor(sectionType),
+    }}
+  >
+    <IconComponent style={{ width: size - padding * 2, height: size - padding * 2 }} />
+  </div>
+);
+
+export default SectionIcon;

frontend/src/concepts/design/TypedObjectIcon.tsx

@@ -38,6 +38,7 @@ import {
   McpCatalogIcon,
   ModelConnectionRocketIcon,
   PromptManagementIcon,
+  ChecklistIcon,
 } from '#~/images/icons';
 
 type TypedObjectIconProps = SVGIconProps & {
@@ -170,6 +171,9 @@ const TypedObjectIcon: React.FC<TypedObjectIconProps> = ({
     case ProjectObjectType.mcpCatalog:
       Icon = McpCatalogIcon;
       break;
+    case ProjectObjectType.taskAssistant:
+      Icon = ChecklistIcon;
+      break;
     default:
       return null;
   }

frontend/src/concepts/design/utils.ts

@@ -77,6 +77,7 @@ export enum ProjectObjectType {
   featureStore = 'feature-store',
   promptManagement = 'prompt-management',
   mcpCatalog = 'mcp-catalog',
+  taskAssistant = 'task-assistant',
 }
 
 export const typedIconColor = (objectType: ProjectObjectType): string => {
@@ -138,6 +139,8 @@ export const typedIconColor = (objectType: ProjectObjectType): string => {
       return 'var(--ai-model-server--IconColor)';
     case ProjectObjectType.servingRuntime:
       return 'var(--ai-set-up--IconColor)';
+    case ProjectObjectType.taskAssistant:
+      return 'var(--ai-general--IconColor)';
     default:
       return '';
   }
@@ -203,6 +206,8 @@ export const typedBackgroundColor = (objectType: ProjectObjectType): string => {
       return 'var(--ai-set-up--BackgroundColor)';
     case ProjectObjectType.servingRuntime:
       return 'var(--ai-set-up--BackgroundColor)';
+    case ProjectObjectType.taskAssistant:
+      return 'var(--ai-general--BackgroundColor)';
     default:
       return '';
   }
@@ -377,3 +382,20 @@ export const sectionTypeBorderColor = (sectionType: SectionType): string => {
       return '';
   }
 };
+
+export const sectionTypeLabelColor = (
+  sectionType: SectionType,
+): 'orange' | 'teal' | 'purple' | 'grey' => {
+  switch (sectionType) {
+    case SectionType.setup:
+    case SectionType.organize:
+      return 'orange';
+    case SectionType.training:
+      return 'teal';
+    case SectionType.serving:
+      return 'purple';
+    case SectionType.general:
+    default:
+      return 'grey';
+  }
+};