feat: incorporate madwizard@1.8.0 support for Choice descriptions into <Ask/>

Author: starpit

package-lock.json

@@ -18,7 +18,7 @@ import React from "react"
 import stripAnsi from "strip-ansi"
 import { Prompts, Tree } from "madwizard"
 
-import { Ansi, Tooltip } from "@kui-shell/plugin-client-common"
+import { Ansi, Markdown, Tooltip } from "@kui-shell/plugin-client-common"
 import {
   ActionGroup,
   Button,
@@ -49,6 +49,9 @@ export type Ask<P extends Prompts.Prompt = Prompts.Prompt> = {
   /** Title for this ask */
   title: string
 
+  /** Description for this ask */
+  description?: string
+
   /** Model of what to ask the user */
   prompt: P
 
@@ -119,7 +122,7 @@ export default class AskUI extends React.PureComponent<Props, State> {
     )
   }
 
-  private card(title: string, body: React.ReactNode) {
+  private card(title: React.ReactNode, body: React.ReactNode) {
     return (
       <Card isPlain className="sans-serif">
         <CardHeader>
@@ -131,7 +134,10 @@ export default class AskUI extends React.PureComponent<Props, State> {
           <CardActions hasNoOffset>{this.actions()}</CardActions>
         </CardHeader>
 
-        <CardBody>{body}</CardBody>
+        <CardBody>
+          {title}
+          {body}
+        </CardBody>
       </Card>
     )
   }
@@ -267,18 +273,21 @@ export default class AskUI extends React.PureComponent<Props, State> {
       onFilter,
       "aria-labelledby": titleId,
       noResultsFoundText: "No matching choices",
-      placeholderText: this.title(ask), // place the guidebook title here
+      placeholderText: "",
       inlineFilterPlaceholderText: "Filter choices",
       onSelect: this._onSelect,
       onToggle: this._doNothing,
       toggleIndicator: <React.Fragment />,
       children: mkOptions(),
     }
+    console.error("!!!!!!!!SSSS", ask)
+
+    const title = <Markdown nested source={`#### ${this.title(ask)}\n\n${ask.description || ""}`} />
 
     return (
       <React.Fragment>
         <span id={titleId} hidden />
-        {this.card(ask.title, <Select {...props} />)}
+        {this.card(title, <Select {...props} />)}
       </React.Fragment>
     )
   }
@@ -299,7 +308,7 @@ export default class AskUI extends React.PureComponent<Props, State> {
     this._form = form
 
     return this.card(
-      ask.title,
+      "",
       <Card>
         <CardHeader>
           <CardTitle>{this.title(ask)}</CardTitle>

plugins/plugin-codeflare/src/components/Ask.tsx

@@ -203,7 +203,7 @@ export default class AskingTerminal extends React.PureComponent<Props, State> {
               write((typeof choice === "string" ? choice : JSON.stringify(choice)) + "\n")
             }
             const prompt = msg.ask
-            const ask = { title: prompt.name || "Make a Choice", prompt, onChoose }
+            const ask = { title: prompt.name || "Make a Choice", description: prompt.description, prompt, onChoose }
             this.setState({ ask, status: "q&a" })
           }
         } catch (err) {

plugins/plugin-codeflare/src/components/AskingTerminal.tsx

@@ -85,7 +85,7 @@ export default class Guide extends React.PureComponent<Props, State> {
 
   /** Guidebook runner presents a question to the user */
   private async onAsk(prompt: Prompts.Prompt, onChoose: (choice: ReturnType<Tree.AnsiUI["ask"]>) => void) {
-    this.setState({ ask: { prompt, onChoose, title: prompt.name || "Make a Choice" } })
+    this.setState({ ask: { prompt, onChoose, title: prompt.name || "Make a Choice", description: prompt.description } })
   }
 
   private async init() {

plugins/plugin-codeflare/src/components/Guide.tsx

@@ -26,6 +26,23 @@
   }
 }
 
+@include Ask {
+  .pf-c-select__toggle-text {
+    text-align: left;
+  }
+}
+
+/** Title */
+@include Ask {
+  .pf-c-select__toggle {
+    /* This is the default <button> from PatternFly's <Select> */
+    display: none;
+  }
+  .pf-c-card__body .pf-c-content {
+    height: auto;
+  }
+}
+
 @include Ask {
   &,
   .pf-c-card {

plugins/plugin-codeflare/web/scss/components/Ask/_index.scss

@@ -23,7 +23,7 @@
     "access": "public"
   },
   "dependencies": {
-    "madwizard": "^1.7.3",
+    "madwizard": "^1.8.1",
     "@guidebooks/store": "^0.17.4"
   }
 }