feat: add a command to return the Card Component in Terminal

Fixes #4973

Author: myan9

packages/test/src/api/selectors.ts

@@ -155,6 +155,9 @@ export const WATCHER_N_DROPDOWN_ITEM = (N: number, label: string) =>
 export const WATCHER_N_CLOSE = (N: number) => WATCHER_N_DROPDOWN_ITEM(N, 'Stop watching')
 export const WATCHER_N_SHOW_AS_TABLE = (N: number) => WATCHER_N_DROPDOWN_ITEM(N, 'Show as table')
 
+// terminal card
+export const TERMINAl_CARD = `.kui--card`
+
 /**
  * Terminal splits
  *

plugins/plugin-client-common/png/KUI-Welcome_Dark.png

@@ -16,11 +16,13 @@
 
 import * as React from 'react'
 import {
+  Brand,
   Card,
   CardActions,
   CardBody,
   CardHeader,
   CardHeaderMain,
+  CardTitle,
   Dropdown,
   DropdownItem,
   KebabToggle
@@ -29,7 +31,7 @@ import {
 import Props from '../model'
 import { DropDownAction } from '../../DropDown'
 
-import '../../../../../web/scss/components/Card/Patternfly.scss'
+import '../../../../../web/scss/components/Card/PatternFly.scss'
 
 interface State {
   isOpen: boolean
@@ -73,16 +75,41 @@ export default class PatternflyCard extends React.PureComponent<Props, State> {
     )
   }
 
+  private icon() {
+    return <Brand src={this.props.icon} alt="card icon" className="kui--card-icon" />
+  }
+
+  /** card actions, icon and custom header node will be situated in Card Head */
+  private header() {
+    if (this.props.header || this.props.actions || this.props.icon) {
+      return (
+        <CardHeader>
+          <CardHeaderMain>{this.props.header || (this.props.icon && this.icon())}</CardHeaderMain>
+          {this.props.actions && this.cardActions()}
+        </CardHeader>
+      )
+    }
+  }
+
+  private title() {
+    if (this.props.title) {
+      return <CardTitle> {this.props.title} </CardTitle>
+    }
+  }
+
   public render() {
+    const basicClassName = 'kui--card small-top-pad small-bottom-pad'
     return (
-      <Card className={this.props.className}>
+      <Card className={!this.props.className ? basicClassName : `${basicClassName} ${this.props.className}`}>
         {React.Children.count(this.props.children) > 0 && (
           <React.Fragment>
-            <CardHeader>
-              <CardHeaderMain>{this.props.header}</CardHeaderMain>
-              {this.props.actions && this.cardActions()}
-            </CardHeader>
-            <CardBody>{this.props.children}</CardBody>
+            {this.header()}
+            {this.title()}
+            {Array.isArray(this.props.children) ? (
+              this.props.children.map((child, idx) => <CardBody key={idx}>{child}</CardBody>)
+            ) : (
+              <CardBody>{this.props.children}</CardBody>
+            )}
           </React.Fragment>
         )}
       </Card>

plugins/plugin-client-common/src/components/spi/Card/impl/PatternFly.tsx

@@ -15,12 +15,21 @@
  */
 
 import * as React from 'react'
-
-import PatternFly4 from './impl/PatternFly'
-
 import Props from './model'
 
+/**
+ * PatternFly4 Card Component. We use React.lazy import here because
+ * the @patternfly/react-core/src/components/Card code import css files,
+ * which will result in the `card` command fails at kui-prescan stage.
+ *
+ */
+const PatternFly4 = React.lazy(() => import('./impl/PatternFly'))
+
 // FIXME There's no ideal Card component in Carbon Component Libary, so we use Patternfly
 export default function CardSpi(props: Props): React.ReactElement {
-  return <PatternFly4 {...props} />
+  return (
+    <React.Suspense fallback={<div />}>
+      <PatternFly4 {...props} />
+    </React.Suspense>
+  )
 }

plugins/plugin-client-common/src/components/spi/Card/index.tsx

@@ -20,7 +20,13 @@ import { DropDownAction } from '../DropDown'
 
 interface Props {
   /** Place the given header node at the top of the Card */
-  header: ReactNode
+  header?: ReactNode
+
+  /** Content rendered inside the CardTitle */
+  title?: string
+
+  /** Place the given icon image at the top of the Card */
+  icon?: string
 
   /** Force children to be a required property */
   children: ReactNode

plugins/plugin-client-common/src/components/spi/Card/model.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Arguments, Registrar, ParsedOptions, UsageModel, ReactResponse } from '@kui-shell/core'
+import card from '../components/spi/Card'
+
+/**
+ * card command parsedOptions type
+ */
+interface CardOptions extends ParsedOptions {
+  title: string
+  icon: string
+}
+
+/**
+ * card command usage
+ */
+const usage: UsageModel = {
+  command: 'card',
+  strict: 'card',
+  example: 'card [<card body text>] [--title <card title text>]',
+  docs: 'Card',
+  required: [
+    {
+      name: 'body',
+      docs: 'card body text'
+    }
+  ],
+  optional: [
+    {
+      name: '--title',
+      docs: 'Content rendered inside the CardTitle'
+    },
+    {
+      name: '--icon',
+      docs: 'Attribute that specifies the URL of the image to put on the card.'
+    }
+  ]
+}
+
+/**
+ * card command handler
+ *
+ */
+function doCard(opts: Arguments<CardOptions>): ReactResponse {
+  const argv = opts.argvNoOptions
+  const option = opts.parsedOptions
+  const body = argv.slice(1)
+  const { title, icon } = option
+
+  return { react: card({ title, children: body, icon }) }
+}
+
+/**
+ * This plugin introduces the /card command
+ *
+ */
+export default async (commandTree: Registrar) => {
+  commandTree.listen('/card', doCard, { usage })
+}

plugins/plugin-client-common/src/controller/card.ts

@@ -21,5 +21,6 @@ export default async (registrar: Registrar) => {
     await import(/* webpackMode: "lazy" */ './controller/confirm').then(_ => _.default(registrar))
     await import(/* webpackMode: "lazy" */ './controller/split').then(_ => registrar.listen('/split', _.default))
     await import(/* webpackMode: "lazy" */ './controller/alert').then(_ => _.default(registrar))
+    await import(/* webpackMode: "lazy" */ './controller/card').then(_ => _.default(registrar))
   }
 }

plugins/plugin-client-common/src/plugin.ts

@@ -22,6 +22,7 @@
     background-color: var(--color-repl-background);
     color: var(--color-text-01);
     width: inherit;
+    white-space: normal;
     height: auto;
 
     .bx--toast-notification__title,

plugins/plugin-client-common/web/scss/components/Alert/Carbon.scss

@@ -48,3 +48,12 @@
     }
   }
 }
+
+[kui-theme-style] .kui--card {
+  white-space: normal;
+
+  .kui--card-icon {
+    width: 10em;
+    height: 7.43em;
+  }
+}