feat(plugins/plugin-client-common): wizard mini progress should use our Spinner component

this works better in a grid ui than the patternfly circular loop spinner

Author: starpit

plugins/plugin-client-common/src/components/Content/MiniProgressStepper.tsx

@@ -18,8 +18,9 @@ import React from 'react'
 import { i18n, pexecInCurrentTab } from '@kui-shell/core'
 
 import Tooltip from '../spi/Tooltip'
+import Spinner from '../Views/Terminal/Block/Spinner'
 import { emitLinkUpdate, subscribeToLinkUpdates, unsubscribeToLinkUpdates } from './LinkStatus'
-import { ProgressStepState, statusFromStatusVector, statusToClassName, statusToIcon } from './ProgressStepper'
+import { ProgressStepState, statusFromStatusVector, statusToClassName } from './ProgressStepper'
 
 import '../../../web/scss/components/Wizard/MiniProgressStepper.scss'
 
@@ -76,7 +77,7 @@ export class MiniProgressStep extends React.PureComponent<MiniProps, ProgressSte
   }
 
   private icon() {
-    return this.status === 'in-progress' ? statusToIcon(this.status) : <React.Fragment />
+    return this.status === 'in-progress' ? <Spinner /> : <React.Fragment />
   }
 
   private get tooltipText() {

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

@@ -22,6 +22,8 @@
 import React from 'react'
 import 'spinkit/spinkit.min.css'
 
+import '../../../../../web/scss/components/Terminal/Spinner.scss'
+
 interface Props {
   className?: string
 }

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

@@ -26,4 +26,3 @@
 @import 'Playground';
 @import 'Scrollback';
 @import 'SourceRef';
-@import 'Spinner';

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+@import '../Terminal/mixins';
 @import '../ProgressStepper/mixins';
 
 $small: 0.5rem;
@@ -22,6 +23,10 @@ $regular: 0.75rem;
 @include MiniProgressStepper {
   --pf-c-progress-stepper__step-icon--Width: #{$regular};
 
+  @include Spinner {
+    --sk-color: var(--color-yellow);
+  }
+
   @include Connector {
     align-items: center;
     height: $regular;