feat(plugins/plugin-client-common): allow wizard header to be collapsed

1) hide description
2) reduce font size and margins a bit

Ideally, it would be nice to pin this content and let the wizard content scroll. Given the current DOM structure, where the markdown is rendered deeply inside of Blocks etc.... this will be too hard for this PR. So let's start with at least allowing the user to reduce the amount of space taken up by the wizard header.

Author: starpit

packages/test/src/api/Wizard.ts

@@ -16,8 +16,8 @@
 
 export default class Wizard {
   public readonly wizard = '.kui--wizard'
-  private readonly title = '.pf-c-wizard__title'
-  private readonly _description = '.pf-c-wizard__description'
+  private readonly title = '.kui--wizard-header-title'
+  private readonly _description = '.kui--wizard-header-description'
   private readonly _navItem = '.pf-c-wizard__nav-item'
   private readonly _navItemTitle = '.pf-c-wizard__nav-link'
   public readonly isCurrentStep = 'pf-m-current'

plugins/plugin-client-common/src/components/Content/Markdown/components/Wizard/index.tsx

@@ -24,10 +24,12 @@ import { onTabSwitch, offTabSwitch } from '../tabbed'
 import { OrderedGraph, blocks, compile, order, sequence } from '../code/graph'
 
 import Card from '../../../../spi/Card'
+import Icons from '../../../../spi/Icons'
 import { MiniProgressStepper, StepperProps } from '../../../MiniProgressStepper'
 import { ProgressStepState, statusFromStatusVector } from '../../../ProgressStepper'
 import { subscribeToLinkUpdates, unsubscribeToLinkUpdates } from '../../../LinkStatus'
 
+import '../../../../../../web/scss/components/Wizard/_index.scss'
 import '../../../../../../web/scss/components/Wizard/PatternFly.scss'
 
 const PatternFlyWizard = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.Wizard })))
@@ -37,6 +39,9 @@ type Status = ProgressStepState['status']
 type Props = WizardProps & { uuid: string }
 
 export interface State {
+  /** Is the wizard in "collapsed" mode, where we only show the title and progress bar? */
+  collapsedHeader: boolean
+
   /** Graph of code blocks across all steps */
   graph: OrderedGraph
 
@@ -85,6 +90,7 @@ export default class Wizard extends React.PureComponent<Props, State> {
     return {
       status,
       choices,
+      collapsedHeader: !state ? false : state.collapsedHeader,
       codeBlocksPerStep: noChangeToCodeBlocks ? state.codeBlocksPerStep : codeBlocksPerStep,
       graph: noChangeToCodeBlocks ? state.graph : order(sequence(codeBlocks.filter(Boolean)))
     }
@@ -189,6 +195,43 @@ export default class Wizard extends React.PureComponent<Props, State> {
     return (props.children || []).slice(1)
   }
 
+  private readonly _toggleCollapsedHeader = () =>
+    this.setState(curState => ({ collapsedHeader: !curState.collapsedHeader }))
+
+  private headerActions() {
+    return (
+      <div className="kui--wizard-header-action-buttons">
+        <a className="kui--wizard-collapse-button kui--block-action" onClick={this._toggleCollapsedHeader}>
+          <Icons icon={this.state.collapsedHeader ? 'WindowMaximize' : 'WindowMinimize'} />
+        </a>
+      </div>
+    )
+  }
+
+  private title() {
+    const label = this.props['data-kui-title'].trim()
+    return (
+      <div className="kui--wizard-header-title" aria-label={label}>
+        {label}
+      </div>
+    )
+  }
+
+  private description() {
+    return <div className="kui--wizard-header-description">{this.props.children[0]}</div>
+  }
+
+  private header() {
+    return (
+      <div className="kui--wizard-header kui--inverted-color-context">
+        {this.headerActions()}
+        {this.title()}
+        {this.description()}
+        {this.progress()}
+      </div>
+    )
+  }
+
   private wizard() {
     const steps = Wizard.children(this.props).map((_, stepIdx) => ({
       name: _.props['data-kui-title'],
@@ -198,25 +241,18 @@ export default class Wizard extends React.PureComponent<Props, State> {
       component: <Card className="kui--markdown-tab-card">{_.props && _.props.children}</Card>
     }))
 
-    const progress = this.progress()
-
     // onGoToStep={this._onWizardStepChange} onNext={this._onWizardStepChange} onBack={this._onWizardStepChange}
     return (
-      <PatternFlyWizard
-        hideClose
-        steps={steps.length === 0 ? [{ name: '', component: '' }] : steps}
-        className="kui--wizard"
-        data-hide-cancel={true}
-        data-bottom-margin={!progress /* no bottom margin if we're showing a progress bar */}
-        footer={this.footer()}
-        title={this.props['data-kui-title'].trim()}
-        description={
-          <React.Fragment>
-            {this.props.children[0]}
-            {progress}
-          </React.Fragment>
-        }
-      />
+      <div className="kui--wizard" data-collapsed-header={this.state.collapsedHeader || undefined}>
+        {this.header()}
+        <div className="kui--wizard-main-content">
+          <PatternFlyWizard
+            steps={steps.length === 0 ? [{ name: '', component: '' }] : steps}
+            data-hide-cancel={true}
+            footer={this.footer()}
+          />
+        </div>
+      </div>
     )
   }
 

plugins/plugin-client-common/web/scss/components/Wizard/_index.scss

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * 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 'mixins';
+@import '../Terminal/mixins';
+
+@include Wizard {
+  display: flex;
+  flex-direction: column;
+
+  @include CollapsedHeader {
+    @include WizardHeader {
+      padding: 1.75em;
+      @include WizardDescription {
+        font-size: $terminal-font-size;
+        max-height: 2em;
+        max-width: $max-column-width;
+        overflow: hidden;
+
+        .paragraph {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    @include WizardTitle {
+      font-size: var(--pf-global--FontSize--xl);
+      margin-bottom: 0.5em;
+    }
+  }
+}
+
+@include WizardHeaderActionButtons {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
+
+@include WizardHeader {
+  position: relative;
+  padding: 2em;
+}
+
+@include WizardTitle {
+  font-size: var(--pf-global--FontSize--3xl);
+  margin-bottom: 1em;
+}

plugins/plugin-client-common/web/scss/components/Wizard/_mixins.scss

@@ -20,14 +20,38 @@
   }
 }
 
+@mixin WizardTitle {
+  .kui--wizard-header-title {
+    @content;
+  }
+}
+
 @mixin WizardHeader {
-  .pf-c-wizard__header {
+  .kui--wizard-header {
+    @content;
+  }
+}
+
+@mixin CollapsedHeader {
+  &[data-collapsed-header] {
+    @content;
+  }
+}
+
+@mixin WizardHeaderActionButtons {
+  .kui--wizard-header-action-buttons {
     @content;
   }
 }
 
 @mixin WizardDescription {
-  .pf-c-wizard__description {
+  .kui--wizard-header-description {
+    @content;
+  }
+}
+
+@mixin WizardMainContent {
+  .kui--wizard-main-content {
     @content;
   }
 }