fix: sidecar Toolbar component renders empty if there is no Toolbar content

Fixes #4229

Author: myan9

packages/test/src/api/mmr.ts

@@ -514,6 +514,22 @@ export class TestMMR {
           .catch(Common.oops(this, true)))
     })
   }
+
+  public toolbarNotExist() {
+    const { command, testName } = this.param
+    describe(`mmr toolbar ${testName || command || ''} ${process.env.MOCHA_RUN_TARGET ||
+      ''}`, function(this: Common.ISuite) {
+      before(Common.before(this))
+      after(Common.after(this))
+
+      it(`should not show toolbar in sidecar `, () =>
+        CLI.command(command, this.app)
+          .then(ReplExpect.ok)
+          .then(SidecarExpect.open)
+          .then(() => this.app.client.waitForExist(Selectors.SIDECAR_TOOLBAR, CLI.waitTimeout, false))
+          .catch(Common.oops(this, true)))
+    })
+  }
 }
 
 interface Label {

plugins/plugin-client-common/src/components/Sidecar/ToolbarContainer.tsx

@@ -49,15 +49,20 @@ export default class ToolbarContainer extends React.PureComponent<Props, State>
   }
 
   public render() {
+    const toolbarButtons = this.props.buttons.concat(this.state.extraButtons || [])
+    const toolbarHasContent = this.state.toolbarText || toolbarButtons.length !== 0
+
     return (
       <div className="full-height">
-        <Toolbar
-          tab={this.props.tab}
-          response={this.props.response}
-          args={this.props.args}
-          toolbarText={this.state.toolbarText}
-          buttons={this.props.buttons.concat(this.state.extraButtons || [])}
-        />
+        {toolbarHasContent && (
+          <Toolbar
+            tab={this.props.tab}
+            response={this.props.response}
+            args={this.props.args}
+            toolbarText={this.state.toolbarText}
+            buttons={toolbarButtons}
+          />
+        )}
         <React.Suspense fallback={<div />}>{this.children()}</React.Suspense>
       </div>
     )

plugins/plugin-client-test/test/response/mmr-name.ts

@@ -45,6 +45,8 @@ testMetadataName.name({
   }
 })
 
+testMetadataName.toolbarNotExist()
+
 testPrettyName.name({
   nameHash: 'this is the namehash part',
   prettyName: 'this is the prettyName part',