feat: more refinements to the hello component

- profiles now have an icon and subtext
- new profile tile

clicks still do nothing (TODO)

Author: starpit

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

@@ -13,12 +13,15 @@ layout:
         maximized: true
 ---
 
-<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="200" height="200" align="left" />
-CodeFlare is a framework to simplify the integration, scaling and acceleration of complex multi-step analytics and machine learning pipelines on the cloud.
+<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="225" height="225" align="left" />
 
-> #### Next Steps
+[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
 >
-> From your terminal, try `codeflare` to be guided through running jobs against the Cloud.
+> - To start running jobs against the Cloud, from your terminal, try `codeflare` .
 
 ---
 

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

@@ -15,19 +15,31 @@
  */
 
 import React from "react"
+import prettyMillis from "pretty-ms"
 import { Profiles } from "madwizard"
 import { Flex, FlexItem, 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"
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default async function getProfiles() {
   const profiles = await Profiles.list({})
 
   return {
     react: (
       <Flex className="flex-fill sans-serif top-pad left-pad right-pad bottom-pad">
+        <FlexItem>
+          <Tile className="codeflare--tile codeflare--tile-new" title="New Profile" icon={<PlusIcon />} isStacked>
+            Customize a profile
+          </Tile>
+        </FlexItem>
+
         {profiles.map((_) => (
           <FlexItem key={_.profile.name}>
-            <Tile className="codeflare--tile" title={_.profile.name} />
+            <Tile className="codeflare--tile" title={_.profile.name} icon={<ProfileIcon />} isStacked>
+              {`Last used ${prettyMillis(Date.now() - _.profile.lastUsedTime, { compact: true })} ago`}
+            </Tile>
           </FlexItem>
         ))}
       </Flex>

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

@@ -104,6 +104,10 @@ $cell: 1.5em;
   &[data-status="ERROR"] {
     background-color: var(--color-red);
   }
+
+  svg {
+    fill: var(--color-text-02);
+  }
 }
 
 .pf-c-tile__header {
@@ -116,3 +120,7 @@ $cell: 1.5em;
   color: var(--color-tile-title);
   font-size: 1rem;
 }
+
+.pf-c-tile__body {
+  color: var(--color-text-02);
+}