feat: add StepHeading for better UI consistency across steps

package.json

@@ -19,12 +19,12 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.65.0",
     "@tailwindcss/forms": "^0.5.7",
     "@vitejs/plugin-react": "^4.3.0",
     "ajv": "^8.20.0",
     "autoprefixer": "^10.4.0",
-    "playwright": "^1.58.0",
+    "playwright": "^1.65.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0",
     "vite": "^5.4.0"

src/components/steps/CommandsStep.jsx

@@ -3,6 +3,7 @@ import { createCommand, getCommandType, getComponentType } from '../../utils/fac
 import CommandEditor from '../editors/CommandEditor'
 import ArrayFieldManager from '../forms/ArrayFieldManager'
 import Alert from '../common/Alert'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -21,7 +22,7 @@ export default function CommandsStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Commands</h2>
+      <StepHeading stepId="commands" />
       <p className="text-gray-600 mb-6">
         Commands run inside the workspace: <strong>exec</strong> runs a command line in a container,{' '}
         <strong>apply</strong> deploys a component, and <strong>composite</strong> chains other commands.

src/components/steps/ComponentsStep.jsx

@@ -2,6 +2,7 @@ import { useSectionList } from '../../hooks/useWizardState'
 import { createComponent, getComponentType } from '../../utils/factories'
 import ComponentEditor from '../editors/ComponentEditor'
 import ArrayFieldManager from '../forms/ArrayFieldManager'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -17,7 +18,7 @@ export default function ComponentsStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Components</h2>
+      <StepHeading stepId="components" />
       <p className="text-gray-600 mb-6">
         The containers, volumes, Kubernetes or OpenShift resources and image builds that make up the development
         environment.

src/components/steps/EventsStep.jsx

@@ -3,6 +3,7 @@ import { EVENT_TYPES } from '../../utils/constants'
 import { getCommandType } from '../../utils/factories'
 import Button from '../common/Button'
 import FormSection from '../forms/FormSection'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -107,7 +108,7 @@ export default function EventsStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Events</h2>
+      <StepHeading stepId="events" />
       <p className="text-gray-600 mb-6">
         Bind commands to the workspace lifecycle. Commands bound to an event run in the order listed below.
       </p>

src/components/steps/MetadataStep.jsx

@@ -12,6 +12,7 @@ import FormInput from '../forms/FormInput'
 import FormSection from '../forms/FormSection'
 import FormTextarea from '../forms/FormTextarea'
 import StringListManager from '../forms/StringListManager'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -28,7 +29,7 @@ export default function MetadataStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Basic Information</h2>
+      <StepHeading stepId="metadata" />
       <p className="text-gray-600 mb-6">
         Metadata describing the devfile. Everything is optional for the schema, but a name is needed to identify the
         workspace.

src/components/steps/ParentStep.jsx

@@ -10,7 +10,6 @@ import {
   getComponentType,
   getParentSourceType
 } from '../../utils/factories'
-import Badge from '../common/Badge'
 import CommandEditor from '../editors/CommandEditor'
 import ComponentEditor from '../editors/ComponentEditor'
 import ProjectEditor from '../editors/ProjectEditor'
@@ -22,6 +21,7 @@ import FormSelect from '../forms/FormSelect'
 import MapFieldManager from '../forms/MapFieldManager'
 import Alert from '../common/Alert'
 import Button from '../common/Button'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -81,10 +81,7 @@ export default function ParentStep() {
   if (!parent) {
     return (
       <div>
-        <div className="flex items-center gap-2 mb-2">
-          <h2 className="text-2xl font-bold text-gray-900">Parent</h2>
-          <Badge variant="default">Optional</Badge>
-        </div>
+        <StepHeading stepId="parent" />
         <p className="text-gray-600 mb-2">
           A devfile can inherit from a parent devfile and override parts of it. Everything defined here is merged on
           top of the parent. Most devfiles do not use a parent — skipping this step is perfectly normal and the{' '}
@@ -130,15 +127,14 @@ export default function ParentStep() {
 
   return (
     <div>
-      <div className="flex justify-between items-start mb-2">
-        <div className="flex items-center gap-2">
-          <h2 className="text-2xl font-bold text-gray-900">Parent</h2>
-          <Badge variant="default">Optional</Badge>
-        </div>
-        <Button variant="danger" onClick={() => setParent(null)} className="text-xs px-2 py-1">
-          Remove Parent
-        </Button>
-      </div>
+      <StepHeading
+        stepId="parent"
+        actions={
+          <Button variant="danger" onClick={() => setParent(null)} className="text-xs px-2 py-1">
+            Remove Parent
+          </Button>
+        }
+      />
       <p className="text-gray-600 mb-2">
         The parent devfile this one inherits from. Overrides below are merged on top of the parent content, so no
         field is mandatory in them. Remove the parent to go back to a devfile without inheritance.

src/components/steps/ProjectsStep.jsx

@@ -4,6 +4,7 @@ import ProjectEditor from '../editors/ProjectEditor'
 import ArrayFieldManager from '../forms/ArrayFieldManager'
 import CollapsibleSection from '../forms/CollapsibleSection'
 import Alert from '../common/Alert'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -36,7 +37,7 @@ export default function ProjectsStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Projects</h2>
+      <StepHeading stepId="projects" />
       <p className="text-gray-600 mb-4">
         Source code cloned into the workspace. A devfile can declare the projects it works on, the starter projects a
         new workspace can be bootstrapped from, and the dependent projects cloned alongside them.

src/components/steps/ReviewStep.jsx

@@ -9,6 +9,7 @@ import Badge from '../common/Badge'
 import Button from '../common/Button'
 import Card from '../common/Card'
 import YamlPreview from '../preview/YamlPreview'
+import StepHeading from '../wizard/StepHeading'
 
 const STEP_INDEX = Object.fromEntries(WIZARD_STEPS.map((step, index) => [step.id, index]))
 
@@ -72,7 +73,7 @@ export default function ReviewStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Review &amp; Download</h2>
+      <StepHeading stepId="review" />
       <p className="text-gray-600 mb-6">
         Review the devfile and download it. Errors must be fixed before downloading, warnings are advisory.
       </p>

src/components/steps/VariablesStep.jsx

@@ -1,6 +1,7 @@
 import { useWizard } from '../../hooks/useWizardState'
 import MapFieldManager from '../forms/MapFieldManager'
 import Alert from '../common/Alert'
+import StepHeading from '../wizard/StepHeading'
 import StepIssues from '../wizard/StepIssues'
 import WizardNavigation from '../wizard/WizardNavigation'
 
@@ -12,7 +13,7 @@ export default function VariablesStep() {
 
   return (
     <div>
-      <h2 className="text-2xl font-bold text-gray-900 mb-2">Variables</h2>
+      <StepHeading stepId="variables" />
       <p className="text-gray-600 mb-4">
         Values referenced elsewhere in the devfile with the{' '}
         <code className="bg-gray-100 px-2 py-1 rounded text-sm">{'{{variable-name}}'}</code> syntax.

src/components/wizard/StepHeading.jsx

@@ -0,0 +1,27 @@
+import { WIZARD_STEPS } from '../../utils/constants'
+import Badge from '../common/Badge'
+
+const STEP_BY_ID = Object.fromEntries(WIZARD_STEPS.map((step) => [step.id, step]))
+
+/**
+ * Title row shared by every wizard step, so the heading, the `Optional` badge and the
+ * per-step actions are laid out the same way everywhere. Whether a step is optional comes
+ * from `WIZARD_STEPS`, the same place the progress bar reads it from.
+ *
+ * @param {string} stepId - id declared in `WIZARD_STEPS`.
+ * @param {React.ReactNode} [children] - heading text, defaults to the step heading.
+ * @param {React.ReactNode} [actions] - controls rendered on the right of the row.
+ */
+export default function StepHeading({ stepId, children, actions, className = 'mb-2' }) {
+  const step = STEP_BY_ID[stepId]
+
+  return (
+    <div className={`flex justify-between items-start gap-4 ${className}`}>
+      <div className="flex items-center gap-2">
+        <h2 className="text-2xl font-bold text-gray-900">{children || step?.heading}</h2>
+        {step && !step.required && <Badge variant="default">Optional</Badge>}
+      </div>
+      {actions}
+    </div>
+  )
+}