From 4472ebc4142a3499499d8bec3230ab43747f19dd Mon Sep 17 00:00:00 2001 From: Cameron Dawson Date: Tue, 1 Oct 2019 10:08:06 -0700 Subject: [PATCH] Bug 1507903 - Stop using react-select component --- package.json | 5 +- ui/job-view/CustomJobActions.jsx | 65 ++++++----- yarn.lock | 192 +------------------------------ 3 files changed, 39 insertions(+), 223 deletions(-) diff --git a/package.json b/package.json index a191c6146..0bf85cc38 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "react-linkify": "0.2.2", "react-redux": "7.1.1", "react-router-dom": "5.0.1", - "react-select": "3.0.4", "react-split-pane": "0.1.87", "react-table": "6.10.3", "react-tabs": "3.0.0", @@ -67,9 +66,9 @@ "taskcluster-client-web": "8.1.1", "taskcluster-lib-scopes": "10.0.2", "taskcluster-lib-urls": "12.0.0", + "victory": "33.0.5", "webpack": "4.39.3", - "webpack-cli": "3.3.8", - "victory": "33.0.5" + "webpack-cli": "3.3.8" }, "devDependencies": { "@neutrinojs/eslint": "9.0.0-rc.3", diff --git a/ui/job-view/CustomJobActions.jsx b/ui/job-view/CustomJobActions.jsx index c17d69a8f..dd4451997 100644 --- a/ui/job-view/CustomJobActions.jsx +++ b/ui/job-view/CustomJobActions.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; -import Select from 'react-select'; import PropTypes from 'prop-types'; import Ajv from 'ajv'; import jsonSchemaDefaults from 'json-schema-defaults'; +import keyBy from 'lodash/keyBy'; // js-yaml is missing the `browser` entry from the package definition, // so we have to explicitly import the dist file otherwise we get the // node version which pulls in a number of unwanted polyfills. See: @@ -13,17 +13,20 @@ import { slugid } from 'taskcluster-client-web'; import tcLibUrls from 'taskcluster-lib-urls'; import { Button, + DropdownToggle, Label, Modal, ModalHeader, ModalBody, ModalFooter, + UncontrolledDropdown, } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCheckSquare } from '@fortawesome/free-regular-svg-icons'; import { formatTaskclusterError } from '../helpers/errorMessage'; import TaskclusterModel from '../models/taskcluster'; +import DropdownMenuItems from '../shared/DropdownMenuItems'; import { notify } from './redux/stores/notifications'; @@ -38,8 +41,7 @@ class CustomJobActions extends React.PureComponent { originalTask: null, validate: null, actions: null, - selectedActionOption: '', - actionOptions: {}, + selectedAction: {}, schema: '', payload: '', }; @@ -58,21 +60,18 @@ class CustomJobActions extends React.PureComponent { } = results; if (actions.length) { - const actionOptions = actions.map(action => ({ - value: action, - label: action.title, - })); + const mappedActions = keyBy(actions, 'name'); + const selectedAction = actions[0]; this.setState( { originalTask, originalTaskId, - actions, + actions: mappedActions, staticActionVariables, - actionOptions, - selectedActionOption: actionOptions[0], + selectedAction, }, - () => this.updateSelectedAction(actions[0]), + () => this.updateSelectedAction(selectedAction), ); } else { notify( @@ -87,10 +86,13 @@ class CustomJobActions extends React.PureComponent { this.setState({ decisionTaskId }); } - onChangeAction = actionOption => { - if (actionOption.value) { - this.setState({ selectedActionOption: actionOption }); - this.updateSelectedAction(actionOption.value); + onChangeAction = actionName => { + const { actions } = this.state; + const selectedAction = actions[actionName]; + + if (actionName) { + this.setState({ selectedAction }); + this.updateSelectedAction(selectedAction); } }; @@ -121,11 +123,10 @@ class CustomJobActions extends React.PureComponent { decisionTaskId, originalTaskId, originalTask, - selectedActionOption, + selectedAction: action, staticActionVariables, } = this.state; const { notify, currentRepo } = this.props; - const action = selectedActionOption.value; let input = null; if (validate && payload) { @@ -194,16 +195,8 @@ class CustomJobActions extends React.PureComponent { render() { const { isLoggedIn, toggle } = this.props; - const { - triggering, - selectedActionOption, - schema, - actions, - actionOptions, - payload, - } = this.state; + const { triggering, selectedAction, schema, actions, payload } = this.state; const isOpen = true; - const selectedAction = selectedActionOption.value; return ( @@ -220,14 +213,20 @@ class CustomJobActions extends React.PureComponent {
-