fix: refine <Ask/> component to use a fixed title, and instead put guidebook title below

Author: starpit

Diff for: plugins/plugin-codeflare/src/components/Ask.tsx

@@ -32,14 +32,15 @@ import {
   FormGroup,
   Select,
   SelectGroup,
+  SelectProps,
   SelectOption,
   SelectOptionObject,
   TextInput,
 } from "@patternfly/react-core"
 
 import HomeIcon from "@patternfly/react-icons/dist/esm/icons/home-icon"
 import InfoIcon from "@patternfly/react-icons/dist/esm/icons/info-circle-icon"
-import ChoiceIcon from "@patternfly/react-icons/dist/esm/icons/lightbulb-icon"
+import ChoiceIcon from "@patternfly/react-icons/dist/esm/icons/user-cog-icon"
 
 import "../../web/scss/components/Ask.scss"
 
@@ -120,11 +121,11 @@ export default class AskUI extends React.PureComponent<Props, State> {
 
   private card(title: string, body: React.ReactNode) {
     return (
-      <Card isLarge className="sans-serif flex-fill">
+      <Card isPlain className="sans-serif">
         <CardHeader>
           <CardTitle>
             <div className="flex-layout">
-              <ChoiceIcon className="larger-text slightly-deemphasize small-right-pad" /> {title.replace(/\?$/, "")}
+              <ChoiceIcon className="larger-text slightly-deemphasize small-right-pad" /> Configure
             </div>
           </CardTitle>
           <CardActions hasNoOffset>{this.actions()}</CardActions>
@@ -217,6 +218,11 @@ export default class AskUI extends React.PureComponent<Props, State> {
     // Intentionally empty
   }
 
+  /** Format title for presentation */
+  private title(ask: Ask) {
+    return ask.title.replace(/\?$/, "")
+  }
+
   /** Render a UI for making a selection */
   private select(ask: Ask<Prompts.Select>) {
     const suggested = ask.prompt.choices.find((_) => _.name === this.state?.userSelection)
@@ -249,21 +255,20 @@ export default class AskUI extends React.PureComponent<Props, State> {
 
     const onFilter = (evt: React.ChangeEvent | null, filter: string) => mkOptions(filter)
 
-    const placeholderText = "Select an option"
     const titleId = "kui--madwizard-ask-ui-title"
 
-    const props = {
+    const props: SelectProps = {
       isOpen: true,
+      isPlain: true,
       isGrouped: true,
       hasInlineFilter: true,
       isInputValuePersisted: true,
       isInputFilterPersisted: true,
-      //      variant: "typeahead" as const,
-      //      typeAheadAriaLabel: "Select an option",
       onFilter,
       "aria-labelledby": titleId,
       noResultsFoundText: "No matching choices",
-      placeholderText,
+      placeholderText: this.title(ask), // place the guidebook title here
+      inlineFilterPlaceholderText: "Filter choices",
       onSelect: this._onSelect,
       onToggle: this._doNothing,
       toggleIndicator: <React.Fragment />,
@@ -272,9 +277,7 @@ export default class AskUI extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <span id={titleId} hidden>
-          {placeholderText}
-        </span>
+        <span id={titleId} hidden />
         {this.card(ask.title, <Select {...props} />)}
       </React.Fragment>
     )
@@ -297,26 +300,33 @@ export default class AskUI extends React.PureComponent<Props, State> {
 
     return this.card(
       ask.title,
-      <Form onSubmit={this._onFormSubmit}>
-        <Grid hasGutter md={6}>
-          {ask.prompt.choices.map((_) => (
-            <FormGroup isRequired key={_.name} label={_.name}>
-              <TextInput
-                aria-label={`text-input-${_.name}`}
-                isRequired
-                value={form[_.name]}
-                onChange={(value) => (form[_.name] = value)}
-              />
-            </FormGroup>
-          ))}
-        </Grid>
-
-        <ActionGroup>
-          <Button variant="primary" type="submit">
-            Next
-          </Button>
-        </ActionGroup>
-      </Form>
+      <Card>
+        <CardHeader>
+          <CardTitle>{this.title(ask)}</CardTitle>
+        </CardHeader>
+        <CardBody>
+          <Form onSubmit={this._onFormSubmit}>
+            <Grid hasGutter md={6}>
+              {ask.prompt.choices.map((_) => (
+                <FormGroup isRequired key={_.name} label={_.name}>
+                  <TextInput
+                    aria-label={`text-input-${_.name}`}
+                    isRequired
+                    value={form[_.name]}
+                    onChange={(value) => (form[_.name] = value)}
+                  />
+                </FormGroup>
+              ))}
+            </Grid>
+
+            <ActionGroup>
+              <Button variant="primary" type="submit">
+                Next
+              </Button>
+            </ActionGroup>
+          </Form>
+        </CardBody>
+      </Card>
     )
   }
 

Diff for: plugins/plugin-codeflare/src/components/ProfileExplorer.tsx

@@ -603,7 +603,7 @@ class ProfileCard extends React.PureComponent<ProfileCardProps, ProfileCardState
 
   public render() {
     return (
-      <Card isLarge>
+      <Card isPlain>
         <CardHeader>
           <CardTitle>
             <div className="flex-layout">

Diff for: plugins/plugin-codeflare/web/scss/components/Ask.scss

@@ -26,6 +26,19 @@
   }
 }
 
+@include Ask {
+  &,
+  .pf-c-card {
+    width: 40rem;
+    min-width: 0;
+    max-width: 40rem;
+  }
+
+  .pf-c-select__menu-item-main {
+    white-space: normal;
+  }
+}
+
 @include Ask {
   .pf-c-card__actions {
     align-self: unset;

Diff for: plugins/plugin-codeflare/web/scss/components/ProfileExplorer/_index.scss

@@ -67,6 +67,12 @@ body[kui-theme-style="dark"] {
     overflow-wrap: anywhere; /** WARNING: does not work on safari; we'll need the junkier word-break: break-all there */
   }
 
+  .pf-c-card {
+    background-color: var(--color-sidecar-background-02);
+  }
+  .pf-c-tree-view__node-container {
+  }
+
   /** width management */
   .pf-c-card {
     flex: 1;
@@ -101,7 +107,14 @@ body[kui-theme-style="dark"] {
   }
 
   .pf-c-tree-view__node-text {
+    margin-top: 0;
     color: var(--color-text-02);
+    font-size: var(--pf-global--FontSize--xs);
+  }
+
+  .pf-c-tree-view__node-title {
+    font-weight: 500;
+    line-height: var(--pf-global--LineHeight--md);
   }
 
   .pf-c-tree-view__node-toggle {