fix(plugins/plugin-client-common): Screenshot results in a react cons…

…ole error Fixes #4826
kubernetes-sigs · Jun 6, 2020 · 4d7e9e5 · 4d7e9e5
1 parent 1a7665a
commit 4d7e9e5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/plugins/plugin-client-common/src/components/Client/Screenshot.tsx b/plugins/plugin-client-common/src/components/Client/Screenshot.tsx
@@ -17,7 +17,8 @@
 import * as React from 'react'
 import { Event, NativeImage } from 'electron'
 import { i18n, eventChannelUnsafe } from '@kui-shell/core'
-import { Button, ToastNotification } from 'carbon-components-react'
+import Alert from '../spi/Alert'
+import { Button } from 'carbon-components-react'
 
 import '../../../web/css/static/Screenshot.scss'
 
@@ -257,26 +258,33 @@ export default class Screenshot extends React.PureComponent<Props, State> {
     )
   }
 
+  private closeNotification() {
+    this.setState({ isActive: false, captured: undefined })
+  }
+
   /** Render a ToastNotification to tell the user what we captured */
   private notification() {
     if (this.state && this.state.captured) {
       const timeout = 10 * 1000
+      const alert = {
+        type: 'success' as const,
+        title: strings('Screenshot'),
+        body: strings('Successfully captured a screenshot to the clipboard')
+      }
+
       return (
-        <ToastNotification
+        <Alert
           id="screenshot-captured"
           timeout={timeout}
-          kind="success"
-          title={strings('Screenshot')}
+          alert={alert}
           className="kui--inverted-color-context"
-          subtitle={strings('Successfully captured a screenshot to the clipboard')}
-          caption=""
-          onCloseButtonClick={() => this.setState({ isActive: false, captured: undefined })}
+          onCloseButtonClick={this.closeNotification.bind(this)}
         >
           <div className="flex-layout">
             <img src={this.state.captured.toDataURL()} className="screenshot-image" />
           </div>
           <div className="kui--screenshot-captured-bottom-message">{this.saveToDiskButton()}</div>
-        </ToastNotification>
+        </Alert>
       )
     }
   }

diff --git a/plugins/plugin-client-common/src/components/spi/Alert/impl/Carbon.tsx b/plugins/plugin-client-common/src/components/spi/Alert/impl/Carbon.tsx
@@ -25,18 +25,21 @@ export default class Alert extends React.PureComponent<Props> {
   public render() {
     return (
       <ToastNotification
-        className="kui--toolbar-alert"
+        id={this.props.id || ''}
+        className={this.props.className || 'kui--toolbar-alert'}
         data-type={this.props.alert.type}
         caption=""
         hideCloseButton={false}
         iconDescription={strings('closeAlert')}
         kind={this.props.alert.type}
-        role="alert"
         statusIconDescription={strings(`${this.props.alert.type} alert`)}
         subtitle={this.props.alert.body || ''}
-        timeout={0}
+        timeout={this.props.timeout}
         title={this.props.alert.title}
-      />
+        onCloseButtonClick={this.props.onCloseButtonClick}
+      >
+        {this.props.children}
+      </ToastNotification>
     )
   }
 }
diff --git a/plugins/plugin-client-common/src/components/spi/Alert/model.ts b/plugins/plugin-client-common/src/components/spi/Alert/model.ts
@@ -13,10 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import * as React from 'react'
 import { ToolbarAlert } from '@kui-shell/core'
 
 interface Props {
   alert: ToolbarAlert
+  id?: string
+  timeout?: number
+  children?: React.ReactNode
+  className?: string
+  onCloseButtonClick?: () => void
 }
 
 export default Props