chore(*): Prepare for upgrading to react 16 (#4947)

spinnaker · Mar 2, 2018 · 0b9ebba · 0b9ebba
1 parent 4c3cbb5
commit 0b9ebba
Show file tree

Hide file tree

Showing 31 changed files with 577 additions and 472 deletions.
diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/application/ALBListeners.tsx b/app/scripts/modules/amazon/src/loadBalancer/configure/application/ALBListeners.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Select from 'react-select';
+import Select, { Option } from 'react-select';
 import { SortableContainer, SortableElement, SortableHandle, arrayMove, SortEnd } from 'react-sortable-hoc';
 import { difference, flatten, get, uniq } from 'lodash';
 import { BindAll } from 'lodash-decorators';
@@ -295,7 +295,7 @@ class ALBListenersImpl extends React.Component<IWizardPageProps & FormikProps<IA
                           clearable={false}
                           required={true}
                           options={certificateOptions}
-                          onChange={(value: Select.Option<string>) => this.handleCertificateChanged(certificate, value.value)}
+                          onChange={(value: Option<string>) => this.handleCertificateChanged(certificate, value.value)}
                           value={certificate.name}
                         />
                     )}

diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/classic/Listeners.tsx b/app/scripts/modules/amazon/src/loadBalancer/configure/classic/Listeners.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Select from 'react-select';
+import Select, { Option } from 'react-select';
 import { get } from 'lodash';
 import { BindAll } from 'lodash-decorators';
 import { FormikProps } from 'formik';
@@ -94,7 +94,7 @@ class ListenersImpl extends React.Component<IWizardPageProps & FormikProps<IAmaz
     this.updateListeners();
   }
 
-  private handleListenerCertificateChanged(listener: IClassicListenerDescription, newCertificate: Select.Option<string>): void {
+  private handleListenerCertificateChanged(listener: IClassicListenerDescription, newCertificate: Option<string>): void {
     listener.sslCertificateName = newCertificate.value;
     this.updateListeners();
   }
@@ -196,7 +196,7 @@ class ListenersImpl extends React.Component<IWizardPageProps & FormikProps<IAmaz
                           clearable={false}
                           required={true}
                           options={certificateOptions}
-                          onChange={(value: Select.Option<string>) => this.handleListenerCertificateChanged(listener, value)}
+                          onChange={(value: Option<string>) => this.handleListenerCertificateChanged(listener, value)}
                           value={listener.sslCertificateName}
                         />
                       )}

diff --git a/app/scripts/modules/core/src/application/modal/PermissionsConfigurer.tsx b/app/scripts/modules/core/src/application/modal/PermissionsConfigurer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Select from 'react-select';
+import Select, { Creatable, Option } from 'react-select';
 import { intersection, uniq, without, cloneDeep, compact } from 'lodash';
 import { BindAll } from 'lodash-decorators';
 import { Button } from 'react-bootstrap';
@@ -26,13 +26,13 @@ export interface IPermissionsConfigurerProps {
 
 export interface IPermissionsConfigurerState {
   permissionRows: IPermissionRow[];
-  roleOptions: Select.Option[];
+  roleOptions: Option[];
 }
 
 @BindAll()
 export class PermissionsConfigurer extends React.Component<IPermissionsConfigurerProps, IPermissionsConfigurerState> {
 
-  private static accessTypes: Select.Option[] = [
+  private static accessTypes: Option[] = [
     { value: 'READ', label: 'Read only' },
     { value: 'READ,WRITE', label: 'Read and write' },
   ];
@@ -79,7 +79,7 @@ export class PermissionsConfigurer extends React.Component<IPermissionsConfigure
     return permissionRows;
   }
 
-  private getRoleOptions(permissions: IPermissions): Select.Option[] {
+  private getRoleOptions(permissions: IPermissions): Option[] {
     const availableRoles = ReactInjector.authenticationService.getAuthenticatedUser().roles;
     return without(
       availableRoles || [],
@@ -139,16 +139,16 @@ export class PermissionsConfigurer extends React.Component<IPermissionsConfigure
         compact(this.props.permissions.WRITE).length === 0;
   }
 
-  private handleRoleSelect(rowIndex: number): (option: Select.Option) => void {
-    return (option: Select.Option) => {
+  private handleRoleSelect(rowIndex: number): (option: Option) => void {
+    return (option: Option) => {
       const permissionRows = cloneDeep(this.state.permissionRows);
       permissionRows[rowIndex].group = option.value as string;
       this.props.onPermissionsChange(this.buildPermissions(permissionRows));
     };
   }
 
-  private handleAccessTypeSelect(rowIndex: number): (option: Select.Option) => void {
-    return (option: Select.Option) => {
+  private handleAccessTypeSelect(rowIndex: number): (option: Option) => void {
+    return (option: Option) => {
       const permissionRows = cloneDeep(this.state.permissionRows);
       permissionRows[rowIndex].access = option.value as string;
       this.props.onPermissionsChange(this.buildPermissions(permissionRows));
@@ -180,7 +180,7 @@ export class PermissionsConfigurer extends React.Component<IPermissionsConfigure
             return (
               <div key={row.group || i} className="permissions-row clearfix">
                 <div className="col-md-5 permissions-group">
-                  <Select.Creatable
+                  <Creatable
                     clearable={false}
                     value={{ value: row.group, label: row.group }}
                     options={this.state.roleOptions}

diff --git a/app/scripts/modules/core/src/application/search/PaginationControls.tsx b/app/scripts/modules/core/src/application/search/PaginationControls.tsx
@@ -1,29 +1,47 @@
 import * as React from 'react';
 import { SelectCallback, Pagination } from 'react-bootstrap';
-
+import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';
 export interface IPaginationControlsProps {
   onPageChanged: SelectCallback;
   activePage: number;
   totalPages: number;
 }
 
 export const PaginationControls = ({ onPageChanged, activePage, totalPages }: IPaginationControlsProps) => {
-  const ButtonComponent = (props: any) => {
-    const { eventKey, children, ...restProps } = props;
-    return <a {...restProps}>{children}</a>
-  };
+  const Item = (props: { value: string, disabled?: boolean, isActive?: boolean, onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void }) => (
+      <li className={`${props.isActive ? 'active' : ''} ${props.disabled ? 'disabled' : ''}`}>
+        <a className={`${!props.disabled ? 'clickable' : ''}`} onClick={props.onClick}>{props.value}</a>
+      </li>
+  );
 
+  const Paging = createUltimatePagination({
+  WrapperComponent: Pagination,
+  itemTypeToComponent: {
+    [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
+      <Item value={value} isActive={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
+      <Item value={`\u2026`} disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.FIRST_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Item value={`\u00ab`} disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Item value={`\u2039`} disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Item value={`\u203a`} disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.LAST_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Item value={`\u00bb`} disabled={isActive} onClick={onClick} />
+    ),
+  },
+})
   return (
-    <Pagination
-      buttonComponentClass={ButtonComponent}
-      className="clickable"
-      ellipsis={true}
-      next={true}
-      prev={true}
-      onSelect={onPageChanged}
-      activePage={activePage}
-      items={totalPages}
-      maxButtons={10}
+    <Paging
+      onChange={onPageChanged}
+      currentPage={activePage}
+      totalPages={totalPages}
     />
   )
 };
diff --git a/app/scripts/modules/core/src/application/search/react-ultimate-pagination.d.ts b/app/scripts/modules/core/src/application/search/react-ultimate-pagination.d.ts
@@ -0,0 +1,34 @@
+declare module 'react-ultimate-pagination' {
+  export interface ItemTypeToComponent {
+    PAGE: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+    ELLIPSIS: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+    FIRST_PAGE_LINK: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+    PREVIOUS_PAGE_LINK: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+    NEXT_PAGE_LINK: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+    LAST_PAGE_LINK: React.ComponentType<{ value: any, isActive: boolean, onClick: any }>;
+  }
+
+  export interface IUltimatePaginationProps {
+    currentPage: number;
+    totalPages: number;
+    boundaryPagesRange?: number;
+    siblingPagesRange?: number;
+    hideEllipsis?: boolean;
+    hidePreviousAndNextPageLinks?: boolean;
+    hideFirstAndLastPageLinks?: boolean;
+    onChange?: Function;
+    disabled?: boolean;
+  }
+
+  export function createUltimatePagination(options: {itemTypeToComponent: ItemTypeToComponent, WrapperComponent: React.ComponentClass = 'div'}): React.ComponentClass<IUltimatePaginationProps>;
+  export interface ItemTypes {
+    PAGE: 'PAGE';
+    ELLIPSIS: 'ELLIPSIS';
+    FIRST_PAGE_LINK: 'FIRST_PAGE_LINK';
+    PREVIOUS_PAGE_LINK: 'PREVIOUS_PAGE_LINK';
+    NEXT_PAGE_LINK: 'NEXT_PAGE_LINK';
+    LAST_PAGE_LINK: 'LAST_PAGE_LINK';
+  }
+
+  export declare const ITEM_TYPES: ItemTypes;
+}
diff --git a/app/scripts/modules/core/src/header/SpinnakerHeader.tsx b/app/scripts/modules/core/src/header/SpinnakerHeader.tsx
@@ -17,8 +17,8 @@ export interface ISpinnakerHeaderState {
 @BindAll()
 export class SpinnakerHeader extends React.Component<{}, ISpinnakerHeaderState> {
 
-  constructor() {
-    super();
+  constructor(props: {}) {
+    super(props);
     this.state = {
       navExpanded: !this.isDevicePhoneOrSmaller()
     };

diff --git a/app/scripts/modules/core/src/instance/Instances.tsx b/app/scripts/modules/core/src/instance/Instances.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { Transition } from '@uirouter/core';
 import { BindAll } from 'lodash-decorators';
 import { Subscription } from 'rxjs';
@@ -19,8 +20,8 @@ export interface IInstancesState {
 export class Instances extends React.Component<IInstancesProps, IInstancesState> {
   // context from enclosing UIView
   public static contextTypes = {
-    router: React.PropTypes.object,
-    parentUIViewAddress: React.PropTypes.object,
+    router: PropTypes.object,
+    parentUIViewAddress: PropTypes.object,
   };
 
   private subscription: Subscription;

diff --git a/app/scripts/modules/core/src/loadBalancer/LoadBalancersTag.spec.tsx b/app/scripts/modules/core/src/loadBalancer/LoadBalancersTag.spec.tsx
@@ -50,7 +50,7 @@ describe('<LoadBalancersTag />', () => {
     component = mount(<LoadBalancersTag {...props}/>);
 
     $scope.$digest();
-    expect(component.find('span.btn-load-balancer').length).toBe(1);
+    expect(component.render().find('span.btn-load-balancer').length).toBe(1);
   });
 
   it('extracts two load balancers from data', (done) => {
@@ -71,11 +71,12 @@ describe('<LoadBalancersTag />', () => {
     // Make sure the application dataSource promises resolve
     $scope.$digest();
 
+    component.update();
     const popover = component.find(HoverablePopover);
     expect(popover.length).toBe(1);
 
     // Wait for the popover to show
-    (popover.getNode() as any).showHide$.take(1).toPromise().then(() => {
+    (popover.instance() as any).showHide$.take(1).toPromise().then(() => {
       const menuChildren = popoverContainerEl.querySelector('.popover-content div.menu-load-balancers').children;
 
       expect(menuChildren.length).toBe(3);

diff --git a/app/scripts/modules/core/src/navigation/stateHelper.provider.ts b/app/scripts/modules/core/src/navigation/stateHelper.provider.ts
@@ -1,5 +1,5 @@
 import { copy, module } from 'angular';
-import { StateRegistry, StateDeclaration } from '@uirouter/core';
+import { StateRegistry } from '@uirouter/core';
 import { INestedState } from './state.provider';
 
 export class StateHelper implements ng.IServiceProvider {
@@ -17,7 +17,7 @@ export class StateHelper implements ng.IServiceProvider {
     }
     if (!this.registeredStates.includes(newState.name)) {
       this.registeredStates.push(newState.name);
-      this.$stateRegistryProvider.register(newState as StateDeclaration);
+      this.$stateRegistryProvider.register(newState as any);
     }
 
     if (newState.children && newState.children.length) {

diff --git a/app/scripts/modules/core/src/navigation/urlBuilder.service.ts b/app/scripts/modules/core/src/navigation/urlBuilder.service.ts
@@ -1,7 +1,7 @@
 import { isDate, isObject, isUndefined } from 'lodash';
 import { module } from 'angular';
 
-import { StateService } from '@uirouter/angularjs';
+import { StateService } from '@uirouter/core';
 import { ITask } from 'core/domain';
 import { urlBuilderRegistry } from './urlBuilder.registry';
 import { NamingService } from 'core/naming/naming.service';

diff --git a/...scripts/modules/core/src/pipeline/config/stages/manualJudgment/ManualJudgmentApproval.tsx b/...scripts/modules/core/src/pipeline/config/stages/manualJudgment/ManualJudgmentApproval.tsx
@@ -1,6 +1,6 @@
 import { IPromise } from 'angular';
 import * as React from 'react';
-import * as Select from 'react-select';
+import Select, { Option } from 'react-select';
 import 'react-select/dist/react-select.css';
 import { BindAll } from 'lodash-decorators';
 
@@ -59,7 +59,7 @@ export class ManualJudgmentApproval extends React.Component<IManualJudgmentAppro
       (this.state.submitting && this.state.judgmentDecision === decision);
   }
 
-  private handleJudgementChanged(option: Select.Option): void {
+  private handleJudgementChanged(option: Option): void {
     this.setState({ judgmentInput: { value: option.value as string } });
   }
 
@@ -75,7 +75,7 @@ export class ManualJudgmentApproval extends React.Component<IManualJudgmentAppro
     const stage: IExecutionStage = this.props.stage,
           status: string = stage.status;
 
-    const options: Select.Option[] = (stage.context.judgmentInputs || [])
+    const options: Option[] = (stage.context.judgmentInputs || [])
       .map((o: {value: string}) => { return { value: o.value, label: o.value }; });
 
     const showOptions = !['SKIPPED', 'SUCCEEDED'].includes(status) && (!stage.context.judgmentStatus || status === 'RUNNING');

diff --git a/app/scripts/modules/core/src/pipeline/create/CreatePipelineModal.tsx b/app/scripts/modules/core/src/pipeline/create/CreatePipelineModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Modal } from 'react-bootstrap';
-import * as Select from 'react-select';
+import Select, { Option } from 'react-select';
 import { BindAll } from 'lodash-decorators';
 import { $log } from 'ngimport';
 import { IHttpPromiseCallbackArg } from 'angular';
@@ -30,7 +30,7 @@ export interface ICreatePipelineModalState {
   command: ICreatePipelineCommand;
   existingNames: string[];
   configs: Partial<IPipeline>[];
-  configOptions: Select.Option[];
+  configOptions: Option[];
   templates: IPipelineTemplate[]
   useTemplate: boolean;
   useManagedTemplate: boolean;
@@ -82,7 +82,7 @@ export class CreatePipelineModal extends React.Component<ICreatePipelineModalPro
     const defaultConfig = this.getDefaultConfig();
     const { application } = this.props;
     const configs: Partial<IPipeline>[] = [defaultConfig].concat(get(application, 'pipelineConfigs.data', []));
-    const configOptions: Select.Option[] = configs.map(config => ({ value: config.name, label: config.name }));
+    const configOptions: Option[] = configs.map(config => ({ value: config.name, label: config.name }));
     const existingNames: string[] = [defaultConfig]
       .concat(get(application, 'pipelineConfigs.data', []))
       .concat(get(application, 'strategyConfigs.data', []))
@@ -187,15 +187,15 @@ export class CreatePipelineModal extends React.Component<ICreatePipelineModalPro
     this.props.showCallback(false);
   }
 
-  private handleTypeChange(option: Select.Option): void {
+  private handleTypeChange(option: Option): void {
     this.setState({ command: Object.assign({}, this.state.command, { strategy: option.value }) });
   }
 
   private handleNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
     this.setState({ command: Object.assign({}, this.state.command, { name: e.target.value }) });
   }
 
-  private handleConfigChange(option: Select.Option): void {
+  private handleConfigChange(option: Option): void {
     const config = this.state.configs.find(t => t.name === option.value);
     this.setState({ command: Object.assign({}, this.state.command, { config }) });
   }
@@ -233,7 +233,7 @@ export class CreatePipelineModal extends React.Component<ICreatePipelineModalPro
     this.loadPipelineTemplateFromSource(templateSourceUrl);
   }
 
-  private configOptionRenderer(option: Select.Option) {
+  private configOptionRenderer(option: Option) {
     const config = this.state.configs.find(t => t.name === option.value);
     return (
       <div>

diff --git a/app/scripts/modules/core/src/pipeline/create/ManagedTemplateSelector.tsx b/app/scripts/modules/core/src/pipeline/create/ManagedTemplateSelector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Select from 'react-select';
+import Select, { Option } from 'react-select';
 import { IPipelineTemplate } from 'core/pipeline/config/templates/pipelineTemplate.service';
 import { BindAll } from 'lodash-decorators';
 
@@ -29,19 +29,19 @@ export class ManagedTemplateSelector extends React.Component<IManagedTemplateSel
     );
   }
 
-  private createOptionsFromTemplates(): Select.Option[] {
+  private createOptionsFromTemplates(): Option[] {
     return this.props.templates.map(t => ({ label: t.metadata.name, value: t.id }));
   }
 
-  private handleTemplateSelect(option: Select.Option): void {
+  private handleTemplateSelect(option: Option): void {
     let selectedTemplate: IPipelineTemplate;
     if (option) {
       selectedTemplate = this.props.templates.find(t => t.id === option.value);
     }
     this.props.onChange(selectedTemplate);
   }
 
-  private templateOptionRenderer(option: Select.Option) {
+  private templateOptionRenderer(option: Option) {
     const template = this.props.templates.find(t => t.id === option.value);
     return (
       <div>