fix(plugins/plugin-client-common): Improve rendering of Source Reference UI

This PR addresses both issues described in the associated issue.

Fixes #6582

Author: starpit

plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx

@@ -252,15 +252,17 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
 
   /** render sourceRef content. Currently only use SimpleEditor. */
   protected sourceRefContent(content: string, contentType: string) {
-    return (
-      <SimpleEditor
-        tabUUID={getPrimaryTabId(this.props.tab)}
-        content={content.replace(/\n$/, '')} /* monaco's renderFinalNewline option doesn't seem to do what we need */
-        contentType={contentType}
-        className="kui--source-ref-editor kui--inverted-color-context"
-        fontSize={12}
-        simple
-      />
+    return () => (
+      <React.Suspense fallback={<div />}>
+        <SimpleEditor
+          tabUUID={getPrimaryTabId(this.props.tab)}
+          content={content.replace(/\n$/, '')} /* monaco's renderFinalNewline option doesn't seem to do what we need */
+          contentType={contentType}
+          className="kui--source-ref-editor kui--inverted-color-context"
+          fontSize={12}
+          simple
+        />
+      </React.Suspense>
     )
   }
 

plugins/plugin-client-common/src/components/spi/Accordion/impl/Carbon.tsx

@@ -51,7 +51,7 @@ export default class CarbonAccordion extends React.PureComponent<Props, State> {
               eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))
             }}
           >
-            {this.props.content[idx]}
+            {this.props.content[idx]()}
           </AccordionItem>
         ))}
       </Accordion>

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

@@ -38,26 +38,34 @@ export default class PatternFlyAccordion extends React.PureComponent<Props, Stat
     }
   }
 
+  private content(idx: number) {
+    const isHidden = this.state.expandedIdx !== idx
+    return <AccordionContent isHidden={isHidden}>{!isHidden && this.props.content[idx]()}</AccordionContent>
+  }
+
   public render() {
     return (
       <Accordion
         asDefinitionList={false}
         className={`kui--accordion ${this.props.isWidthConstrained ? 'flex-fill' : ''}`}
       >
         {this.props.names.map((name, idx) => (
-          <AccordionItem key={idx}>
-            <AccordionToggle
-              id={idx.toString()}
-              onClick={() => {
-                this.setState(curState => ({ expandedIdx: curState.expandedIdx !== idx ? idx : -1 }))
-                eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))
-              }}
-              isExpanded={this.state.expandedIdx === idx}
-            >
-              {this.state.expandedIdx !== idx ? strings('Show X', name) : strings('Hide X', name)}
-            </AccordionToggle>
-            <AccordionContent isHidden={this.state.expandedIdx !== idx}>{this.props.content[idx]}</AccordionContent>
-          </AccordionItem>
+          <div key={idx} className="kui--accordion-item">
+            {/*          ^^^^^^^^^ AccordionItem does not accept className */}
+            <AccordionItem>
+              <AccordionToggle
+                id={idx.toString()}
+                onClick={() => {
+                  this.setState(curState => ({ expandedIdx: curState.expandedIdx !== idx ? idx : -1 }))
+                  eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))
+                }}
+                isExpanded={this.state.expandedIdx === idx}
+              >
+                {this.state.expandedIdx !== idx ? strings('Show X', name) : strings('Hide X', name)}
+              </AccordionToggle>
+              {this.content(idx)}
+            </AccordionItem>
+          </div>
         ))}
       </Accordion>
     )

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

@@ -18,10 +18,19 @@ import { Tab } from '@kui-shell/core'
 
 interface Props {
   className?: string
-  names: string[]
-  content: React.ReactNode[]
   isWidthConstrained?: boolean
   tab: Tab
+
+  /** The titles of the accordion entries */
+  names: string[]
+
+  /**
+   * The content for the accordion entries. These are intentionally
+   * delayed via the `() => ...`, to avoid rendering the content for
+   * all accordion elements up front. See https://github.com/IBM/kui/issues/6582
+   *
+   */
+  content: (() => React.ReactNode)[]
 }
 
 export default Props

plugins/plugin-client-common/web/scss/components/Accordion/PatternFly.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import '_mixins';
+@import 'mixins';
 
 @include Accordion {
   margin: 0.5rem 0 0;
@@ -37,6 +37,7 @@
 }
 
 @include AccordionContentBody {
+  padding: 0;
   &:before {
     display: none;
   }