Some small UI wording changes

Author: ajp-io

api/internal/managers/infra/install.go

@@ -30,7 +30,7 @@ import (
 	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
-const K0sComponentName = "Runtime"
+const K0sComponentName = "runtime"
 
 func AlreadyInstalledError() error {
 	return fmt.Errorf(
@@ -89,7 +89,7 @@ func (m *infraManager) initComponentsList(license *kotsv1beta1.License, rc runti
 		components = append(components, types.InfraComponent{Name: addOn.Name()})
 	}
 
-	components = append(components, types.InfraComponent{Name: "Additional Components"})
+	components = append(components, types.InfraComponent{Name: "additional components"})
 
 	for _, component := range components {
 		if err := m.infraStore.RegisterComponent(component.Name); err != nil {
@@ -328,7 +328,7 @@ func (m *infraManager) installAddOns(ctx context.Context, license *kotsv1beta1.L
 }
 
 func (m *infraManager) installExtensions(ctx context.Context, hcli helm.Client) (finalErr error) {
-	componentName := "Additional Components"
+	componentName := "additional components"
 
 	if err := m.setComponentStatus(componentName, types.StateRunning, "Installing"); err != nil {
 		return fmt.Errorf("set extensions status: %w", err)

pkg/addons/embeddedclusteroperator/embeddedclusteroperator.go

@@ -47,7 +47,7 @@ type EmbeddedClusterOperator struct {
 }
 
 func (e *EmbeddedClusterOperator) Name() string {
-	return "Runtime Operator"
+	return "runtime operator"
 }
 
 func (e *EmbeddedClusterOperator) Version() string {

pkg/addons/openebs/openebs.go

@@ -18,7 +18,7 @@ type OpenEBS struct {
 }
 
 func (o *OpenEBS) Name() string {
-	return "Storage"
+	return "storage"
 }
 
 func (o *OpenEBS) Version() string {

pkg/addons/velero/velero.go

@@ -43,7 +43,7 @@ type Velero struct {
 }
 
 func (v *Velero) Name() string {
-	return "Disaster Recovery"
+	return "disaster recovery"
 }
 
 func (v *Velero) Version() string {

web/src/components/wizard/CompletionStep.tsx

@@ -8,14 +8,16 @@ import { CheckCircle, ExternalLink } from "lucide-react";
 const CompletionStep: React.FC = () => {
   const { config } = useConfig();
   const { title } = useBranding();
+  const { prototypeSettings } = useConfig();
+  const themeColor = prototypeSettings.themeColor;
 
   return (
     <div className="space-y-6">
       <Card>
         <div className="flex flex-col items-center text-center py-6">
           <div className="flex flex-col items-center justify-center mb-6">
             <div className="w-16 h-16 rounded-full flex items-center justify-center mb-4">
-              <CheckCircle className="w-10 h-10" style={{ color: "blue" }} />
+              <CheckCircle className="w-10 h-10" style={{ color: themeColor }} />
             </div>
             <p className="text-gray-600 mt-2">
               Visit the Admin Console to configure and install {title}

web/src/components/wizard/InstallationStep.tsx

@@ -68,7 +68,7 @@ const InstallationStep: React.FC<InstallationStepProps> = ({ onNext }) => {
     <div className="space-y-6">
       <InstallationProgress
         progress={getProgress()}
-        currentMessage={infraStatusResponse?.status?.description || ''}
+        currentMessage={infraStatusResponse?.status?.state === 'Failed' ? 'Installation failed' : (infraStatusResponse?.status?.description || '')}
         themeColor={themeColor}
         status={infraStatusResponse?.status?.state}
       />
@@ -77,7 +77,7 @@ const InstallationStep: React.FC<InstallationStepProps> = ({ onNext }) => {
         {(infraStatusResponse?.components || []).map((component, index) => (
           <StatusIndicator 
             key={index}
-            title={component.name} 
+            title={component.name.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ')}
             status={component.status?.state}
             themeColor={themeColor}
           />

web/src/components/wizard/SetupStep.tsx

@@ -142,7 +142,7 @@ const SetupStep: React.FC<SetupStepProps> = ({ onNext }) => {
       <Card>
         <div className="mb-6">
           <h2 className="text-2xl font-bold text-gray-900">{text.setupTitle}</h2>
-          <p className="text-gray-600 mt-1">Configure the installation settings.</p>
+          <p className="text-gray-600 mt-1">Set up the host for this installation.</p>
         </div>
 
         {isLoading ? (

web/src/components/wizard/installation/InstallationProgress.tsx

@@ -13,6 +13,11 @@ const InstallationProgress: React.FC<InstallationProgressProps> = ({
   themeColor,
   status
 }) => {
+  const displayMessage = () => {
+    if (!currentMessage) return 'Preparing installation…';
+    return status === 'Running' ? `${currentMessage}…` : currentMessage;
+  };
+
   return (
     <div className="mb-6">
       <div className="w-full bg-gray-200 rounded-full h-2.5">
@@ -25,7 +30,7 @@ const InstallationProgress: React.FC<InstallationProgressProps> = ({
         />
       </div>
       <p className="text-sm text-gray-500 mt-2">
-        {currentMessage || 'Preparing installation...'}
+        {displayMessage()}
       </p>
     </div>
   );

web/src/components/wizard/tests/SetupStep.test.tsx

@@ -79,7 +79,7 @@ describe("SetupStep", () => {
     // Wait for loading to complete
     await screen.findByText("Loading configuration...");
 
-    await screen.findByText("Configure the installation settings.");
+    await screen.findByText("Set up the host for the installation.");
 
     // Wait for the linux-setup element to appear
     await screen.findByTestId("linux-setup");
@@ -156,7 +156,7 @@ describe("SetupStep", () => {
 
     // Wait for loading to complete
     await screen.findByText("Loading configuration...");
-    await screen.findByText("Configure the installation settings.");
+    await screen.findByText("Set up the host for the installation.");
 
     // Wait for the linux-setup element to appear
     await screen.findByTestId("linux-setup");
@@ -250,7 +250,7 @@ describe("SetupStep", () => {
 
     // Wait for loading to complete
     await screen.findByText("Loading configuration...");
-    await screen.findByText("Configure the installation settings.");
+    await screen.findByText("Set up the host for the installation.");
 
     // Wait for the linux-setup element to appear
     await screen.findByTestId("linux-setup");