feat: use side-by-side layout for hello

And an improved aspect ratio for the window.

Author: starpit

plugins/plugin-client-default/config.d/style.json

@@ -1,7 +1,7 @@
 {
   "bodyCss": "codeflare",
-  "width": 1000,
-  "height": 1000,
+  "width": 1200,
+  "height": 800,
   "frame": false,
   "titleBarStyle": "hiddenInset",
   "defaultTheme": "PatternFly4 Light"

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

@@ -9,18 +9,40 @@ layout:
         maximized: true
 ---
 
-<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="225" height="225" align="left" />
+<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="100" height="100" align="left" />
 
 [CodeFlare](https://codeflare.dev) is a framework to simplify the
 integration, scaling and acceleration of complex multi-step analytics
 and machine learning pipelines on the cloud.
 
 > ### Next Steps
 >
-> - To start running jobs against the Cloud, from your terminal, try `codeflare` .
+> 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 CLI"
+    ```shell
+    ---
+    execute: now
+    outputOnly: true
+    maximize: true
+    ---
+    codeflare terminal codeflare
+    ```
+
+=== "Your Profiles"
+    ```shell
+    ---
+    execute: now
+    outputOnly: true
+    ---
+    codeflare get profile
+    ```
+
 === "Gallery"
     === "CodeFlare CLI"
         ```shell
@@ -42,25 +64,6 @@ and machine learning pipelines on the cloud.
         codeflare dashboard-gallery
         ```
 
-=== "Your Profiles"
-    ```shell
-    ---
-    execute: now
-    outputOnly: true
-    ---
-    codeflare get profile
-    ```
-
-=== "Use the CodeFlare CLI"
-    ```shell
-    ---
-    execute: now
-    outputOnly: true
-    maximize: true
-    ---
-    codeflare terminal codeflare
-    ```
-
 === "Terminal"
     ```shell
     ---
@@ -70,3 +73,4 @@ and machine learning pipelines on the cloud.
     ---
     codeflare terminal $SHELL -l
     ```
+

plugins/plugin-codeflare/src/controller/index.ts

@@ -62,8 +62,8 @@ export default function registerCodeflareCommands(registrar: Registrar) {
   registrar.listen("/codeflare/hello", (args) => import("./hello").then((_) => _.default(args)), {
     needsUI: true,
     outputOnly: true,
-    width: 1000,
-    height: 1000,
+    width: 1200,
+    height: 800,
   })
 
   /**

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 { Flex, FlexItem, Tile } from "@patternfly/react-core"
+import { Gallery, GalleryItem, 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,21 @@ export default async function getProfiles() {
 
   return {
     react: (
-      <Flex className="flex-fill sans-serif top-pad left-pad right-pad bottom-pad">
-        <FlexItem>
+      <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>
-        </FlexItem>
+        </GalleryItem>
 
         {profiles.map((_) => (
-          <FlexItem key={_.profile.name}>
+          <GalleryItem key={_.profile.name}>
             <Tile className="codeflare--tile" title={_.profile.name} icon={<ProfileIcon />} isStacked>
               {`Last used ${prettyMillis(Date.now() - _.profile.lastUsedTime, { compact: true })} ago`}
             </Tile>
-          </FlexItem>
+          </GalleryItem>
         ))}
-      </Flex>
+      </Gallery>
     ),
   }
 }

plugins/plugin-codeflare/src/tray/menus/index.ts

@@ -37,7 +37,7 @@ export default async function buildContextMenu(
     {
       label: `Getting Started`,
       icon: gettingStartedIcon,
-      click: () => createWindow([], { width: 1000, height: 1000 }),
+      click: () => createWindow([], { width: 1200, height: 800 }),
     },
     { label: `Report a Bug`, icon: bugIcon, click: () => import("open").then((_) => _.default(bugs.url)) },
     { label: `Quit ${productName}`, icon: powerOffIcon, role: "quit" },

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

@@ -32,7 +32,7 @@
     color: var(--color-text-01);
     background-color: var(--color-repl-background);
     border-color: var(--color-base01);
-    font-size: 1vh !important;
+    font-size: 0.8vw !important;
 
     margin-bottom: 0;
   }

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

@@ -99,9 +99,9 @@ body.kui--patternfly4[kui-theme="PatternFly4 Dark"][kui-theme-style] {
 }
 
 @include Scrollback {
-  .pf-c-tabs__link::after {
+  /* .pf-c-tabs__link::after {
     border-color: var(--color-base06);
-  }
+  } */
 
   &:not(.kui--inverted-color-context) {
     /* TODO MISSING SASS MIXIN in KUI CORE */

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

@@ -14,16 +14,17 @@
  * limitations under the License.
  */
 
+@import "@kui-shell/plugin-client-common/web/scss/components/Hint/mixins";
 @import "@kui-shell/plugin-client-common/web/scss/components/Terminal/mixins";
 @import "@kui-shell/plugin-client-common/web/scss/components/TopLevelTab/mixins";
 @import "Grid";
 
 @include TopLevelTab {
   &.codeflare--welcome-guidebook {
     @include Split(2) {
-      grid-template-rows: 300px 1fr;
-      grid-template-columns: 1fr;
-      grid-template-areas: "T1" "T2";
+      grid-template-rows: 1fr;
+      grid-template-columns: 1fr 2fr;
+      grid-template-areas: "T1 T2";
     }
 
     @include Split(3) {
@@ -110,7 +111,14 @@ $cell: 1.5em;
   }
 }
 
-.codeflare {
+.codeflare--welcome-guidebook {
+  @include Hint {
+    display: block;
+    .pf-c-hint__actions {
+      float: right;
+    }
+  }
+
   .pf-c-tile__header {
     overflow: hidden;
     white-space: nowrap;