feat: make no connection banner configurable

Author: philippfromme

demo/App.jsx

@@ -232,6 +232,9 @@ function App() {
         <TestTab
           injector={ injector }
           isConnectionConfigured={ isConnectionConfigured }
+          configureConnectionBannerTitle="Not prompted yet"
+          configureConnectionBannerDescription="Click Configure, then Ok when prompted."
+          configureConnectionLabel="Get prompted"
           onConfigureConnection={ () => {
             if (window.confirm('Can execute task?')) {
               setIsConnectionConfigured(true);

lib/components/Output/Output.jsx

@@ -30,6 +30,9 @@ export const TASK_EXECUTION_STATUS_LABEL = {
 /**
  * @param {Object} props
  * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
  * @param {Function} [props.onConfigureConnection]
  * @param {boolean} props.isTaskExecuting
  * @param {import('../../types').ElementOutput} props.output
@@ -38,6 +41,9 @@ export const TASK_EXECUTION_STATUS_LABEL = {
  */
 export default function Output({
   isConnectionConfigured,
+  configureConnectionBannerTitle,
+  configureConnectionBannerDescription,
+  configureConnectionLabel,
   onConfigureConnection,
   isTaskExecuting,
   output,
@@ -91,6 +97,9 @@ export default function Output({
       <div className="output__body">
         <OutputBanner
           isConnectionConfigured={ isConnectionConfigured }
+          configureConnectionBannerTitle={ configureConnectionBannerTitle }
+          configureConnectionBannerDescription={ configureConnectionBannerDescription }
+          configureConnectionLabel={ configureConnectionLabel }
           onConfigureConnection={ onConfigureConnection }
           output={ output }
         />
@@ -108,15 +117,18 @@ export default function Output({
 
 function OutputBanner({
   isConnectionConfigured,
+  configureConnectionBannerTitle,
+  configureConnectionBannerDescription,
+  configureConnectionLabel,
   onConfigureConnection,
   output
 }) {
 
   if (!isConnectionConfigured) {
     return <ErrorBanner
-      title="Connection required"
-      description="Configure a connection to start testing."
-      actionLabel="Configure"
+      title={ configureConnectionBannerTitle }
+      description={ configureConnectionBannerDescription }
+      actionLabel={ configureConnectionLabel }
       onActionClick={ onConfigureConnection }
     />;
   }

lib/components/TaskTesting/TaskTesting.js

@@ -32,6 +32,9 @@ export const NO_ELEMENT_TEXT = 'Select a task to start testing';
  * @param {Object} props.injector
  * @param {import('../../types').TaskExecutionApi} props.api
  * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
  * @param {Function} [props.onConfigureConnection]
  * @param {import('../../types').Config|undefined} [props.config]
  * @param {Function} [props.onConfigChanged=() => {}]
@@ -41,6 +44,9 @@ export default function TaskTesting({
   injector,
   api,
   isConnectionConfigured,
+  configureConnectionBannerTitle = 'Connection required',
+  configureConnectionBannerDescription = 'Configure a connection to start testing.',
+  configureConnectionLabel = 'Configure',
   onConfigureConnection,
   config,
   onConfigChanged = () => {},
@@ -322,6 +328,9 @@ export default function TaskTesting({
       <div className="task-testing__container--right">
         <Output
           isConnectionConfigured={ isConnectionConfigured }
+          configureConnectionBannerTitle={ configureConnectionBannerTitle }
+          configureConnectionBannerDescription={ configureConnectionBannerDescription }
+          configureConnectionLabel={ configureConnectionLabel }
           onConfigureConnection={ onConfigureConnection }
           isTaskExecuting={ isTaskExecuting }
           output={ output }