@spinnaker/core 2026.2.2 → 2026.3.0

package/src/presentation/forms/inputs/ReactSelectInput.spec.tsx

@@ -0,0 +1,75 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { Creatable } from 'react-select';
+
+import { ReactSelectInput } from './ReactSelectInput';
+
+const noop = () => {};
+
+describe('<ReactSelectInput />', () => {
+  describe('CREATABLE mode', () => {
+    it('renders when used as a single-value select with a string value not present in options', () => {
+      // Regression test: single-select (non-multi) CREATABLE usage passes a plain string as
+      // `value`, not an array. This previously crashed with "value.filter is not a function"
+      // because CreatableSelect assumed `value` was always an array.
+      const render = () =>
+        mount(
+          <ReactSelectInput
+            name="account-type"
+            mode="CREATABLE"
+            stringOptions={['kubernetes', 'aws']}
+            value="some-custom-type"
+            onChange={noop}
+            clearable={false}
+          />,
+        );
+      expect(render).not.toThrow();
+    });
+
+    it('includes a created value not present in stringOptions among the rendered options', () => {
+      const wrapper = mount(
+        <ReactSelectInput
+          name="account-type"
+          mode="CREATABLE"
+          stringOptions={['kubernetes', 'aws']}
+          value="some-custom-type"
+          onChange={noop}
+          clearable={false}
+        />,
+      );
+      const values = wrapper.find(Creatable).prop('options') as Array<{ value: string }>;
+      expect(values.map((o) => o.value)).toContain('some-custom-type');
+    });
+
+    it('renders without a value', () => {
+      const render = () =>
+        mount(
+          <ReactSelectInput
+            name="account-type"
+            mode="CREATABLE"
+            stringOptions={['kubernetes', 'aws']}
+            value={undefined}
+            onChange={noop}
+            clearable={false}
+          />,
+        );
+      expect(render).not.toThrow();
+    });
+
+    it('still works for multi-select usage with an array value', () => {
+      const wrapper = mount(
+        <ReactSelectInput
+          name="account-types"
+          mode="CREATABLE"
+          multi={true}
+          stringOptions={['kubernetes', 'aws']}
+          value={['kubernetes', 'some-custom-type']}
+          onChange={noop}
+          clearable={false}
+        />,
+      );
+      const values = wrapper.find(Creatable).prop('options') as Array<{ value: string }>;
+      expect(values.map((o) => o.value)).toContain('some-custom-type');
+    });
+  });
+});

package/src/presentation/forms/inputs/ReactSelectInput.tsx

@@ -19,7 +19,7 @@ export interface IReactSelectInputProps<T = OptionValues>
 }
 
 // TODO: use standard css classes (from style guide?)
-// Currently the form-control class is needed for ng-invalid, but messes up the rendering of react-select
+// Currently the form-control class is needed for invalid styles, but messes up the rendering of react-select
 export const reactSelectValidationErrorStyle = {
   borderColor: 'var(--color-danger)',
   WebkitBoxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
@@ -89,7 +89,7 @@ export function ReactSelectInput<T = string>(props: IReactSelectInputProps<T>) {
 
   const commonProps = { className, style, ignoreAccents, ...fieldProps, ...otherProps } as any;
 
-  const SelectElement = ({ options }: { options: any[] }) =>
+  const renderSelectElement = (options: ReactSelectProps<any>['options']) =>
     mode === 'TETHERED' ? (
       <TetheredSelect {...commonProps} options={options} />
     ) : mode === 'VIRTUALIZED' ? (
@@ -101,11 +101,9 @@ export function ReactSelectInput<T = string>(props: IReactSelectInputProps<T>) {
     );
 
   if (isStringArray(stringOptions)) {
-    return (
-      <StringsAsOptions strings={stringOptions}>{(options) => <SelectElement options={options} />}</StringsAsOptions>
-    );
+    return <StringsAsOptions strings={stringOptions}>{(options) => renderSelectElement(options)}</StringsAsOptions>;
   } else {
-    return <SelectElement options={optionOptions} />;
+    return renderSelectElement(optionOptions);
   }
 }
 
@@ -114,7 +112,8 @@ function CreatableSelect(props: IReactSelectInputProps<any>) {
   const options = React.useMemo(() => {
     const options = props.options ?? [];
     const optionsValues = options.map((o) => o.value);
-    const createdOptions = ((props.value as string[]) ?? [])
+    const currentValues = Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
+    const createdOptions = currentValues
       .filter((val) => !optionsValues.includes(val))
       .map((opt) => ({ label: opt, value: opt }));
     return options.concat(createdOptions);

package/src/presentation/forms/inputs/interface.ts

@@ -32,6 +32,7 @@ export interface IFormInputValidation {
 
 /** These props are used by Form Input components, such as TextInput */
 export interface IFormInputProps extends Partial<IControlledInputProps> {
+  'aria-label'?: string;
   validation?: IFormInputValidation;
   inputClassName?: string;
 }

package/src/presentation/forms/inputs/utils.spec.ts

@@ -0,0 +1,61 @@
+import { validationClassName } from './utils';
+
+import '../../main.less';
+
+const dangerBorderColor = 'rgb(255, 0, 0)';
+
+function renderedBorderColor(validation: any, inputClassName = ''): string {
+  const input = document.createElement('input');
+  input.className = `form-control ${inputClassName} ${validationClassName(validation)}`;
+  document.body.appendChild(input);
+
+  const borderColor = window.getComputedStyle(input).borderColor;
+  input.remove();
+  return borderColor;
+}
+
+describe('validationClassName', () => {
+  let previousDangerColor: string;
+
+  beforeAll(() => {
+    previousDangerColor = document.documentElement.style.getPropertyValue('--color-danger');
+    document.documentElement.style.setProperty('--color-danger', dangerBorderColor);
+  });
+
+  afterAll(() => {
+    document.documentElement.style.setProperty('--color-danger', previousDangerColor);
+  });
+
+  it('does not return validation state classes before the field is touched', () => {
+    expect(validationClassName({ touched: false, category: 'error' } as any)).toBe('');
+    expect(validationClassName({ touched: false, category: 'warning' } as any)).toBe('');
+  });
+
+  it('returns neutral validation state classes after the field is touched', () => {
+    expect(
+      validationClassName({ touched: true, category: 'error' } as any)
+        .split(' ')
+        .sort(),
+    ).toEqual(['dirty', 'invalid']);
+    expect(
+      validationClassName({ touched: true, category: 'warning' } as any)
+        .split(' ')
+        .sort(),
+    ).toEqual(['dirty', 'warning']);
+  });
+
+  it('does not visually invalidate untouched errors or warnings', () => {
+    expect(renderedBorderColor({ touched: false, category: 'error' })).not.toBe(dangerBorderColor);
+    expect(renderedBorderColor({ touched: false, category: 'warning' })).not.toBe(dangerBorderColor);
+  });
+
+  it('visually invalidates touched errors', () => {
+    expect(renderedBorderColor({ touched: true, category: 'error' })).toBe(dangerBorderColor);
+  });
+
+  it('does not visually invalidate untouched highlighted errors', () => {
+    expect(renderedBorderColor({ touched: false, category: 'error' }, 'highlight-pristine')).not.toBe(
+      dangerBorderColor,
+    );
+  });
+});

package/src/presentation/forms/inputs/utils.ts

@@ -7,10 +7,11 @@ import { noop } from '../../../utils';
 export const orEmptyString = (val: any) => (isNil(val) ? '' : val);
 
 export const validationClassName = (validation = {} as IFormInputValidation) => {
+  const touched = !!validation.touched;
   return classNames({
-    'ng-dirty': !!validation.touched,
-    'ng-invalid': validation.category === 'error',
-    'ng-warning': validation.category === 'warning',
+    dirty: touched,
+    invalid: touched && validation.category === 'error',
+    warning: touched && validation.category === 'warning',
   });
 };
 

package/src/presentation/index.ts

@@ -11,7 +11,6 @@ export { Icon, Illustration } from '@spinnaker/presentation';
 export * from './LabelComponent';
 export * from './labeledValues';
 export * from './LinkWithClipboard';
-export * from './linkWithClipboard.component';
 export * from './Markdown';
 export * from './modal';
 export * from './navigation';

package/src/presentation/main.less

@@ -123,11 +123,6 @@ html {
       border-color: var(--color-accent);
     }
   }
-  .select2-container .select2-choices .select2-search-field input,
-  .select2-container .select2-choice,
-  .select2-container .select2-choices {
-    font-family: 'Source Sans 3', sans-serif;
-  }
 }
 
 .insight {
@@ -162,11 +157,6 @@ html {
       h3 {
         font-size: 120%;
       }
-      filter-section {
-        h4 {
-          font-size: 110%;
-        }
-      }
     }
     .content {
       padding-bottom: 20px;
@@ -297,11 +287,6 @@ html {
     @media (max-width: 390px) {
       width: 100%;
     }
-
-    react-ui-view-adapter {
-      width: 100%;
-      overflow-x: visible !important;
-    }
   }
   .nav-content {
     margin-right: 25px;
@@ -689,11 +674,6 @@ body > .container {
   }
 }
 
-/* This class is used to override the uibModal default z-index value of 1050 */
-.modal-z-index {
-  z-index: var(--layer-critical) !important;
-}
-
 .modal-pages {
   width: 1200px;
   .modal-page {
@@ -758,36 +738,6 @@ select:invalid {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--color-danger-light);
 }
 
-.form-control {
-  &.ng-invalid {
-    &.ng-dirty,
-    &.ng-invalid-validate-min,
-    &.ng-invalid-validate-max,
-    &.ng-invalid-required,
-    &.highlight-pristine {
-      border-color: var(--color-danger);
-      .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); // Redeclare so transitions work
-      &:focus {
-        border-color: var(--color-danger);
-        @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--color-danger-light);
-        .box-shadow(@shadow);
-      }
-    }
-  }
-}
-
-.highlight-pristine {
-  .ng-invalid {
-    border-color: var(--color-danger);
-    .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); // Redeclare so transitions work
-    &:focus {
-      border-color: var(--color-danger);
-      @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--color-danger-light);
-      .box-shadow(@shadow);
-    }
-  }
-}
-
 .table {
   &.packed {
     margin-bottom: 0;
@@ -1282,6 +1232,10 @@ html {
   padding: 0;
 }
 
+#spinnaker-root {
+  height: 100%;
+}
+
 .spinnaker-container {
   @media (min-width: 768px) and (max-width: 1200px) {
     .container {
@@ -1314,6 +1268,20 @@ html {
       }
       position: relative;
     }
+    > .spinnaker-main-view {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: 100%;
+      min-height: 0;
+      min-width: 0;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      position: relative;
+    }
     .scrollable-columns {
       background-color: var(--color-alabaster);
       flex: 1 1 auto;
@@ -1335,69 +1303,11 @@ html {
           display: flex;
           overflow: visible;
         }
-        react-ui-view-adapter {
-          display: flex;
-          width: 100%;
-          overflow-x: hidden;
-          // >div {
-          //   display: flex;
-          //   width: 100%;
-          //   overflow-x: hidden;
-          // }
-        }
       }
     }
   }
 }
 
-.ui-select-multiple {
-  .select2-drop {
-    width: calc(~'100% - 40px');
-    margin-left: 1px;
-  }
-}
-.select2-results {
-  .select2-disabled {
-    background-color: transparent;
-    opacity: 0.5;
-    &:hover,
-    &.select2-highlighted {
-      background-color: transparent;
-    }
-    .select2-result-label {
-      cursor: default;
-      background-color: transparent;
-    }
-  }
-}
-
-ul.select2-results {
-  max-height: 225px;
-}
-
-.select2.select2-container {
-  &.ng-invalid-required {
-    a.select2-default {
-      border: 1px solid var(--color-danger);
-    }
-  }
-}
-
-.select2-container.input-sm.direction-up {
-  .select2-drop-active {
-    border-top: 1px solid var(--color-accent);
-    padding-top: 3px;
-    margin-bottom: 3px;
-  }
-  .select2-choice {
-    border-bottom-color: var(--color-accent);
-  }
-}
-
-body > .select2-container.open {
-  z-index: 10003;
-}
-
 .tooltip,
 .popover {
   font-family: 'Source Sans 3', sans-serif;
@@ -1414,14 +1324,6 @@ body > .select2-container.open {
   }
 }
 
-.checkbox {
-  help-field {
-    .help-contents {
-      margin-left: 20px;
-    }
-  }
-}
-
 .checkbox-inline + .checkbox-inline,
 .radio-inline + .radio-inline {
   margin-left: 0 !important;

package/src/presentation/modal/ErrorModalService.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { toMarkdown } from '../Markdown';
+import { ModalBody } from './ModalBody';
+import { ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import type { IModalComponentProps } from './showModal';
+import { showModal } from './showModal';
+
+export interface IErrorModalProps {
+  buttonText?: string;
+  header?: string;
+  body: string | JSX.Element;
+}
+
+const ErrorModal = ({
+  body,
+  buttonText = 'Close',
+  dismissModal,
+  header = 'Something went wrong :(',
+}: IErrorModalProps & IModalComponentProps) => (
+  <>
+    <ModalHeader>{header}</ModalHeader>
+    <ModalBody>{React.isValidElement(body) ? body : toMarkdown(body as string)}</ModalBody>
+    <ModalFooter
+      primaryActions={
+        <button className="btn btn-default" type="button" onClick={() => dismissModal()}>
+          {buttonText}
+        </button>
+      }
+    />
+  </>
+);
+
+export class ErrorModalService {
+  public static error(params: IErrorModalProps): PromiseLike<any> {
+    return showModal(ErrorModal, params);
+  }
+}

package/src/presentation/modal/index.ts

@@ -1,4 +1,5 @@
 export * from './Modal';
+export * from './ErrorModalService';
 export * from './ModalHeader';
 export * from './ModalBody';
 export * from './ModalFooter';

package/src/presentation/modal/showModal.tsx

@@ -1,4 +1,3 @@
-import { UIRouterContextComponent } from '@uirouter/react-hybrid';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -84,9 +83,7 @@ export const showModal = <P, C = any, D = any>(
     function render() {
       ReactDOM.render(
         <Modal isOpen={show} onRequestClose={handleRequestClose} onAfterClose={onAfterClose} {...modalProps}>
-          <UIRouterContextComponent>
-            <ModalComponent {...componentProps} dismissModal={handleDismiss} closeModal={handleClose} />
-          </UIRouterContextComponent>
+          <ModalComponent {...componentProps} dismissModal={handleDismiss} closeModal={handleClose} />
         </Modal>,
         mountNode,
       );

package/src/presentation/navigation/PageNavigator.spec.tsx

@@ -0,0 +1,76 @@
+import { UIRouterContext, UIRouterReact } from '@uirouter/react';
+import { mount } from 'enzyme';
+import $ from 'jquery';
+import React from 'react';
+
+import { PageNavigator } from './PageNavigator';
+import { PageSection } from './PageSection';
+
+describe('PageNavigator', () => {
+  let host: HTMLElement;
+  let router: UIRouterReact;
+
+  beforeEach(() => {
+    router = new UIRouterReact();
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    $.fx.off = false;
+    router.dispose();
+    host.remove();
+  });
+
+  it('scrolls to the selected section in direct React usage', () => {
+    $.fx.off = true;
+    const wrapper = mount(
+      <UIRouterContext.Provider value={router}>
+        <div className="container" style={{ height: 60, overflowY: 'scroll' }}>
+          <PageNavigator scrollableContainer=".container">
+            <PageSection pageKey="one" label="One">
+              <div style={{ height: 100 }} />
+            </PageSection>
+            <PageSection pageKey="two" label="Two">
+              <div style={{ height: 100 }} />
+            </PageSection>
+          </PageNavigator>
+        </div>
+      </UIRouterContext.Provider>,
+      { attachTo: host },
+    );
+    wrapper.update();
+
+    const secondNavigationLink = wrapper.find('.page-navigation a').at(1);
+    expect(secondNavigationLink.exists()).toBe(true);
+    expect(() => secondNavigationLink.simulate('click')).not.toThrow();
+    expect(host.querySelector('[data-page-id="two"]').classList.contains('highlighted')).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('loads navigation styles for direct React usage', () => {
+    const wrapper = mount(
+      <UIRouterContext.Provider value={router}>
+        <div className="container" style={{ height: 60, overflowY: 'scroll' }}>
+          <PageNavigator scrollableContainer=".container">
+            <PageSection pageKey="one" label="One">
+              <div style={{ height: 100 }} />
+            </PageSection>
+          </PageNavigator>
+        </div>
+      </UIRouterContext.Provider>,
+      { attachTo: host },
+    );
+    wrapper.update();
+
+    const navigation = wrapper.find('.page-navigation').getDOMNode<HTMLElement>();
+    const heading = wrapper.find('h4.sticky-header').getDOMNode<HTMLElement>();
+
+    expect(window.getComputedStyle(navigation).listStyleType).toBe('none');
+    expect(window.getComputedStyle(navigation).textTransform).toBe('uppercase');
+    expect(window.getComputedStyle(heading).paddingTop).toBe('10px');
+
+    wrapper.unmount();
+  });
+});

package/src/presentation/navigation/PageNavigator.tsx

@@ -1,10 +1,13 @@
 import { isFunction, throttle } from 'lodash';
 import React from 'react';
 
-import type { CoreReactInject } from '../../reactShims/react.injector';
+import type { IRouterInjectedProps } from '../../navigation/routerContext';
+import { withRouter } from '../../navigation/routerContext';
 import { ScrollToService } from '../../utils/scrollTo/scrollTo.service';
 import { UUIDGenerator } from '../../utils/uuid.service';
 
+import './pageNavigation.less';
+
 export interface INavigationPage {
   key: string;
   label: string;
@@ -16,7 +19,6 @@ export interface IPageNavigatorProps {
   scrollableContainer: string;
   deepLinkParam?: string;
   hideNavigation?: boolean;
-  reactInjector: CoreReactInject;
 }
 
 export interface IPageNavigatorState {
@@ -25,12 +27,12 @@ export interface IPageNavigatorState {
   pages: INavigationPage[];
 }
 
-export class PageNavigator extends React.Component<IPageNavigatorProps, IPageNavigatorState> {
+class PageNavigatorComponent extends React.Component<IPageNavigatorProps & IRouterInjectedProps, IPageNavigatorState> {
   private element: JQuery;
   private container: any;
   private navigator: any;
 
-  constructor(props: IPageNavigatorProps) {
+  constructor(props: IPageNavigatorProps & IRouterInjectedProps) {
     super(props);
     this.state = {
       id: UUIDGenerator.generateUuid(),
@@ -49,8 +51,8 @@ export class PageNavigator extends React.Component<IPageNavigatorProps, IPageNav
       );
     }
     this.navigator = this.element.find('.page-navigation');
-    if (deepLinkParam && this.props.reactInjector.$stateParams[deepLinkParam]) {
-      this.setCurrentSection(this.props.reactInjector.$stateParams[deepLinkParam]);
+    if (deepLinkParam && this.props.stateParams[deepLinkParam]) {
+      this.setCurrentSection(this.props.stateParams[deepLinkParam]);
     }
 
     const pages = React.Children.map(children, (child: any) => {
@@ -124,7 +126,7 @@ export class PageNavigator extends React.Component<IPageNavigatorProps, IPageNav
   private syncLocation(key: string): void {
     const { deepLinkParam } = this.props;
     if (deepLinkParam) {
-      this.props.reactInjector.$state.go('.', { [deepLinkParam]: key }, { notify: false, location: 'replace' });
+      this.props.stateService.go('.', { [deepLinkParam]: key }, { notify: false, location: 'replace' });
     }
   }
 
@@ -184,3 +186,6 @@ export class PageNavigator extends React.Component<IPageNavigatorProps, IPageNav
     );
   }
 }
+
+export const PageNavigator = withRouter(PageNavigatorComponent);
+PageNavigator.displayName = 'PageNavigator';

package/src/presentation/navigation/pageNavigation.less

@@ -1,6 +1,5 @@
 @import (reference) '../less/imports/commonImports.less';
 
-page-navigator,
 .page-navigator {
   display: flex;
   .page-navigation {
@@ -30,7 +29,6 @@ page-navigator,
       }
     }
   }
-  page-section,
   .page-section {
     display: flex;
     .page-subheading {
@@ -65,6 +63,34 @@ page-navigator,
   }
 }
 
+.application-config-page,
+.application-config-page > .page-navigator {
+  width: 100%;
+}
+
+.application-config-page {
+  .page-navigator > .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .page-navigator > .row > .hidden-sm.hidden-xs {
+    max-width: 240px;
+    padding-left: 0;
+    padding-right: 5px;
+    width: 240px;
+  }
+
+  .page-navigator > .row > .col-sm-12 {
+    max-width: none;
+    width: calc(100% - 240px);
+  }
+
+  .application-feature-description {
+    margin-left: 20px;
+  }
+}
+
 @keyframes highlighted {
   0% {
     opacity: 0.25;

package/src/presentation/percent.filter.js

@@ -1,11 +1,5 @@
 'use strict';
 
-import { module } from 'angular';
-
-export const CORE_PRESENTATION_PERCENT_FILTER = 'spinnaker.deck.core.filter.percent';
-export const name = CORE_PRESENTATION_PERCENT_FILTER; // for backwards compatibility
-module(CORE_PRESENTATION_PERCENT_FILTER, []).filter('decimalToPercent', function () {
-  return function (decimal) {
-    return `${Math.round(decimal * 100)}%`;
-  };
-});
+export function decimalToPercent(decimal) {
+  return `${Math.round(decimal * 100)}%`;
+}