feat: update codeflare explorer to use adjustable split pane for cli portion

Also
- places the profile selector in the profile card header
- refactors to have a separate ProfileCard component

Author: starpit

package-lock.json

@@ -5,20 +5,6 @@ layout:
     1:
         position: default
         maximized: true
-    2:
-        position: default
-        maximized: true
----
-
-=== "Your Profiles"
-    ```shell
-    ---
-    execute: now
-    outputOnly: true
-    ---
-    codeflare get profile
-    ```
-
 ---
 
 === "Use the CodeFlare CLI"
@@ -28,7 +14,7 @@ layout:
     outputOnly: true
     maximize: true
     ---
-    codeflare terminal codeflare -p ${SELECTED_PROFILE}
+    codeflare terminal task
     ```
 
 === "Gallery"
@@ -52,13 +38,13 @@ layout:
         codeflare dashboard-gallery
         ```
 
-=== "Terminal"
+=== "Local Terminal"
     ```shell
     ---
     execute: now
     outputOnly: true
     maximize: true
     ---
-    codeflare terminal $SHELL -l
+    codeflare terminal shell
     ```
 

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

@@ -26,6 +26,7 @@
     "@logdna/tail-file": "^3.0.0",
     "@patternfly/react-charts": "^6.77.1",
     "@patternfly/react-core": "^4.224.1",
+    "allotment": "^1.15.0",
     "asciinema-player": "^3.0.1",
     "chokidar": "^3.5.3",
     "needle": "^3.1.0",

plugins/plugin-codeflare/package.json

@@ -78,9 +78,6 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
     emitSelectProfile(selectedProfile)
   }
 
-  private readonly _handleBoot = () => handleBoot(this.state.selectedProfile)
-  private readonly _handleShutdown = () => handleShutdown(this.state.selectedProfile)
-
   private updateDebouncer: null | ReturnType<typeof setTimeout> = null
 
   private readonly updateFn = () => {
@@ -139,20 +136,47 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
     }
   }
 
+  public render() {
+    if (this.state && this.state.catastrophicError) {
+      return "Internal Error"
+    } else if (!this.state || !this.state.profiles || !this.state.selectedProfile) {
+      return <Loading />
+    } else {
+      return (
+        <div className="codeflare--profile-explorer flex-fill top-pad left-pad right-pad bottom-pad">
+          <ProfileCard
+            profile={this.state.selectedProfile}
+            profiles={this.state.profiles}
+            onSelectProfile={this._handleProfileSelection}
+          />
+        </div>
+      )
+    }
+  }
+}
+
+class ProfileCard extends React.PureComponent<{
+  profile: string
+  profiles: Profiles.Profile[]
+  onSelectProfile: (profile: string) => void
+}> {
+  private readonly _handleBoot = () => handleBoot(this.props.profile)
+  private readonly _handleShutdown = () => handleShutdown(this.props.profile)
+
   private title() {
     return (
       <Title headingLevel="h2" size="xl">
-        {this.state.selectedProfile}
+        <ProfileSelect
+          selectedProfile={this.props.profile}
+          profiles={this.props.profiles}
+          onSelect={this.props.onSelectProfile}
+        />
       </Title>
     )
   }
 
   private actions() {
-    return (
-      <Title headingLevel="h2" size="md">
-        Status: pending
-      </Title>
-    )
+    return "Status: pending"
   }
 
   private body() {
@@ -196,41 +220,23 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
           </Button>
         </FlexItem>
         <FlexItem flex={{ default: "flex_1" }}>
-          <DashboardSelect selectedProfile={this.state.selectedProfile} />
+          <DashboardSelect selectedProfile={this.props.profile} />
         </FlexItem>
       </Flex>
     )
   }
 
   public render() {
-    if (this.state && this.state.catastrophicError) {
-      return "Internal Error"
-    } else if (!this.state || !this.state.profiles) {
-      return <Loading />
-    } else {
-      return (
-        <Flex className="codeflare--profile-explorer flex-fill" direction={{ default: "column" }}>
-          <FlexItem>
-            <ProfileSelect
-              selectedProfile={this.state.selectedProfile}
-              profiles={this.state.profiles}
-              onSelect={this._handleProfileSelection}
-            />
-          </FlexItem>
-
-          <FlexItem>
-            <Card className="top-pad left-pad right-pad bottompad" isSelectableRaised isSelected>
-              <CardHeader>
-                <CardTitle>{this.title()}</CardTitle>
-                <CardActions hasNoOffset>{this.actions()}</CardActions>
-              </CardHeader>
-              <CardBody>{this.body()}</CardBody>
-              <Divider />
-              <CardFooter>{this.footer()}</CardFooter>
-            </Card>
-          </FlexItem>
-        </Flex>
-      )
-    }
+    return (
+      <Card className="top-pad left-pad right-pad bottompad" isSelectableRaised isSelected>
+        <CardHeader>
+          <CardTitle>{this.title()}</CardTitle>
+          <CardActions hasNoOffset>{this.actions()}</CardActions>
+        </CardHeader>
+        <CardBody>{this.body()}</CardBody>
+        <Divider />
+        <CardFooter>{this.footer()}</CardFooter>
+      </Card>
+    )
   }
 }

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

@@ -96,7 +96,7 @@ export default class XTerm extends React.PureComponent<Props, State> {
   }
 
   public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("catastrophic error in Scalar", error, errorInfo)
+    console.error("catastrophic error", error, errorInfo)
   }
 
   public componentDidMount() {