fix: wordsmithing of hello.md plus always show profiles section

Also, improved grid layout for profiles, to get them to wrap better in smaller spaces.

Author: starpit

plugins/plugin-client-default/notebooks/hello.md

@@ -2,45 +2,49 @@
 title: Hello
 className: codeflare--welcome-guidebook
 layout:
-    1:
-        position: default
+    1: default
     2:
         position: default
         maximized: true
+    3:
+        position: default
+        maximized: true
 ---
 
-<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="100" height="100" align="left" />
+<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="128" height="128" align="left" />
 
-[CodeFlare](https://codeflare.dev) is a framework to simplify the
+[CodeFlare](https://codeflare.dev) simplifies the
 integration, scaling and acceleration of complex multi-step analytics
 and machine learning pipelines on the cloud.
 
-> ### Next Steps
+> ### Getting Started
 >
-> To start running jobs against the Cloud, from your terminal, try
-> `codeflare`. You may also try it out in the embedded terminal below.
-
+> - Use the `codeflare` command in your
+> terminal, or the one embedded here :material-transfer-right:
+> - This CLI guides you through running a job, using a series of
+> questions. 
+> - The answers to your questions are stored as a *profile*.
 
 ---
 
-
-=== "Use the CodeFlare CLI"
+=== "Your Profiles"
     ```shell
     ---
     execute: now
     outputOnly: true
-    maximize: true
     ---
-    codeflare terminal codeflare
+    codeflare get profile
     ```
+---
 
-=== "Your Profiles"
+=== "Use the CodeFlare CLI"
     ```shell
     ---
     execute: now
     outputOnly: true
+    maximize: true
     ---
-    codeflare get profile
+    codeflare terminal codeflare
     ```
 
 === "Gallery"

plugins/plugin-codeflare/src/controller/profile/get.tsx

@@ -17,7 +17,7 @@
 import React from "react"
 import prettyMillis from "pretty-ms"
 import { Profiles } from "madwizard"
-import { Gallery, GalleryItem, Tile } from "@patternfly/react-core"
+import { Grid, GridItem, Tile } from "@patternfly/react-core"
 
 import PlusIcon from "@patternfly/react-icons/dist/esm/icons/user-plus-icon"
 import ProfileIcon from "@patternfly/react-icons/dist/esm/icons/user-icon"
@@ -28,21 +28,23 @@ export default async function getProfiles() {
 
   return {
     react: (
-      <Gallery className="flex-fill sans-serif top-pad left-pad right-pad bottom-pad" hasGutter>
-        <GalleryItem>
-          <Tile className="codeflare--tile codeflare--tile-new" title="New Profile" icon={<PlusIcon />} isStacked>
-            Customize a profile
-          </Tile>
-        </GalleryItem>
-
+      <Grid className="codeflare--gallery-grid flex-fill sans-serif top-pad left-pad right-pad bottom-pad" hasGutter>
         {profiles.map((_) => (
-          <GalleryItem key={_.profile.name}>
+          <GridItem key={_.profile.name}>
             <Tile className="codeflare--tile" title={_.profile.name} icon={<ProfileIcon />} isStacked>
               {`Last used ${prettyMillis(Date.now() - _.profile.lastUsedTime, { compact: true })} ago`}
             </Tile>
-          </GalleryItem>
+          </GridItem>
         ))}
-      </Gallery>
+
+        {
+          <GridItem>
+            <Tile className="codeflare--tile codeflare--tile-new" title="New Profile" icon={<PlusIcon />} isStacked>
+              Customize a profile
+            </Tile>
+          </GridItem>
+        }
+      </Grid>
     ),
   }
 }

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

@@ -28,9 +28,9 @@
     }
 
     @include Split(3) {
-      grid-template-rows: 1fr 1.5fr 0.875fr;
-      grid-template-columns: 1fr;
-      grid-template-areas: "T1" "T2" "T3";
+      grid-template-rows: 2fr 1fr;
+      grid-template-columns: 1fr 2fr;
+      grid-template-areas: "T1 T3" "T2 T3";
     }
   }
 }
@@ -112,6 +112,10 @@ $cell: 1.5em;
 }
 
 .codeflare--welcome-guidebook {
+  svg[icon="Lightbulb"] {
+    fill: var(--color-text-02);
+  }
+
   @include Hint {
     display: block;
     .pf-c-hint__actions {
@@ -133,4 +137,14 @@ $cell: 1.5em;
   .pf-c-tile__body {
     color: var(--color-text-02);
   }
+
+  /** TODO move this somewhere else? */
+  .codeflare--gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(10em, max-content));
+
+    & > div {
+      grid-column-start: unset;
+      grid-column-end: unset;
+    }
+  }
 }