feat: bug fix pack

pull/107/head 2.2.1
huoyong.msb 5 years ago
parent 2ffe59f992
commit 9efef03b92

@ -1,11 +1,7 @@
import React, { Component } from 'react'
import { PropTypes, connect, _ } from '../../family'
import InterfaceEditorToolbar from './InterfaceEditorToolbar'
import InterfaceSummary, {
BODY_OPTION,
REQUEST_PARAMS_TYPE,
rptFromStr2Num,
} from './InterfaceSummary'
import InterfaceSummary from './InterfaceSummary'
import PropertyList from './PropertyList'
import MoveInterfaceForm from './MoveInterfaceForm'
import { fetchRepository } from '../../actions/repository'
@ -57,8 +53,7 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
this.state = {
...InterfaceEditor.mapPropsToState(props),
summaryState: {
bodyOption: BODY_OPTION.FORM_DATA,
requestParamsType: REQUEST_PARAMS_TYPE.QUERY_PARAMS,
bodyOption: props.bodyOption,
},
moveInterfaceDialogOpen: false,
}
@ -117,7 +112,7 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
render() {
const { auth, repository, mod } = this.props
const { editable, itf } = this.state
const { id, locker } = this.state.itf
const { id, locker, bodyOption } = this.state.itf
if (!id) {
return null
}
@ -154,8 +149,8 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
repository={repository}
mod={mod}
interfaceId={itf.id}
bodyOption={this.state.summaryState.bodyOption}
requestParamsType={this.state.summaryState.requestParamsType}
bodyOption={bodyOption}
posFilter={this.state.summaryState.posFilter}
handleChangeProperty={this.handleChangeProperty}
handleDeleteMemoryProperty={this.handleDeleteMemoryProperty}
/>
@ -191,8 +186,6 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
this.handleAddMemoryProperties([property], cb)
}
handleAddMemoryProperties = (properties: any, cb: any) => {
const requestParamsType = this.state.summaryState.requestParamsType
const rpt = rptFromStr2Num(requestParamsType)
properties.forEach((item: any) => {
if (item.memory === undefined) {
@ -201,7 +194,6 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
if (item.id === undefined) {
item.id = _.uniqueId('memory-')
}
item.pos = rpt
})
const nextState = { properties: [...this.state.properties, ...properties] }
this.setState(nextState, () => {
@ -227,9 +219,7 @@ class InterfaceEditor extends Component<InterfaceEditorProps, InterfaceEditorSta
}
this.setState({ properties }, () => {
if (cb) {
cb()
}
cb && cb()
})
}
}

@ -9,29 +9,34 @@ import { CopyToClipboard } from '../utils/'
import { getRelativeUrl } from '../../utils/URLUtils'
import './InterfaceSummary.css'
import { showMessage, MSG_TYPE } from 'actions/common'
import { TextField, Select, InputLabel, Input, MenuItem } from '@material-ui/core'
import { TextField, Select, InputLabel, Input, MenuItem, FormControl, RadioGroup, FormControlLabel, Radio } from '@material-ui/core'
import Markdown from 'markdown-to-jsx'
export const BODY_OPTION = {
FORM_DATA: 'FORM_DATA',
FORM_URLENCODED: 'FORM_URLENCODED',
RAW: 'RAW',
BINARY: 'BINARY',
export enum BODY_OPTION {
FORM_DATA = 'FORM_DATA',
FORM_URLENCODED = 'FORM_URLENCODED',
RAW = 'RAW',
BINARY = 'BINARY',
}
export const REQUEST_PARAMS_TYPE = {
HEADERS: 'HEADERS',
QUERY_PARAMS: 'QUERY_PARAMS',
BODY_PARAMS: 'BODY_PARAMS',
}
export function rptFromStr2Num(rpt: any) {
let pos = 2
if (rpt === 'HEADERS') {
pos = 1
} else if (rpt === 'BODY_PARAMS') {
pos = 3
}
return pos
export const BODY_OPTION_LIST = [
{ label: 'form-data', value: BODY_OPTION.FORM_DATA },
{ label: 'x-www-form-urlencoded', value: BODY_OPTION.FORM_URLENCODED },
{ label: 'raw', value: BODY_OPTION.RAW },
{ label: 'binary', value: BODY_OPTION.BINARY },
]
/**
*
*/
export enum POS_TYPE {
QUERY = 2,
HEADER = 1,
BODY = 3,
PRE_REQUEST_SCRIPT = 4,
TEST = 5
}
function url2name(itf: any) {
// copy from http://gitlab.alibaba-inc.com/thx/magix-cli/blob/master/platform/rap.js#L306
const method = itf.method.toLowerCase()
@ -87,11 +92,11 @@ type InterfaceSummaryProps = {
[x: string]: any;
}
type InterfaceSummaryState = {
bodyOption?: any;
requestParamsType?: any;
method?: any;
status?: any;
[x: string]: any;
bodyOption?: any
method?: any
status?: any
posFilter: POS_TYPE
[x: string]: any
}
class InterfaceSummary extends Component<
InterfaceSummaryProps,
@ -103,38 +108,26 @@ class InterfaceSummary extends Component<
constructor(props: any) {
super(props)
this.state = {
bodyOption: BODY_OPTION.FORM_DATA,
requestParamsType:
props.itf.method === 'POST'
? REQUEST_PARAMS_TYPE.BODY_PARAMS
: REQUEST_PARAMS_TYPE.QUERY_PARAMS,
bodyOption: props?.itf?.bodyOption ?? BODY_OPTION.FORM_DATA,
posFilter: props?.itf?.method === 'POST' ? POS_TYPE.BODY : POS_TYPE.QUERY,
}
this.changeMethod = this.changeMethod.bind(this)
this.changeHandler = this.changeHandler.bind(this)
this.switchBodyOption = this.switchBodyOption.bind(this)
this.switchRequestParamsType = this.switchRequestParamsType.bind(this)
this.switchPos = this.switchPos.bind(this)
this.copyModelName = this.copyModelName.bind(this)
this.state.requestParamsType === REQUEST_PARAMS_TYPE.BODY_PARAMS &&
props.stateChangeHandler(this.state)
props.stateChangeHandler(this.state)
}
switchBodyOption(val: any) {
return () => {
this.setState(
{
bodyOption: val,
},
() => {
this.props.stateChangeHandler(this.state)
}
)
}
switchBodyOption(val: BODY_OPTION) {
this.setState({ bodyOption: val },
() => {
this.props.stateChangeHandler(this.state)
}
)
}
switchRequestParamsType(val: any) {
switchPos(val: POS_TYPE) {
return () => {
this.setState(
{
requestParamsType: val,
},
this.setState( { posFilter: val },
() => {
this.props.stateChangeHandler(this.state)
}
@ -178,7 +171,7 @@ class InterfaceSummary extends Component<
editable,
handleChangeInterface,
} = this.props
const { requestParamsType } = this.state
const { posFilter } = this.state
const keyMap = {
COPY_MODEL_NAME: ['ctrl+alt+c'],
}
@ -186,6 +179,7 @@ class InterfaceSummary extends Component<
const handlers = {
COPY_MODEL_NAME: this.copyModelName,
}
if (!itf.id) {
return null
}
@ -326,42 +320,27 @@ class InterfaceSummary extends Component<
{
editable && (
<ul className="nav nav-tabs" role="tablist">
<li
className="nav-item"
onClick={this.switchRequestParamsType(REQUEST_PARAMS_TYPE.HEADERS)}
>
<li className="nav-item" onClick={this.switchPos(POS_TYPE.HEADER)} >
<button
className={`nav-link ${
requestParamsType === REQUEST_PARAMS_TYPE.HEADERS ? 'active' : ''
}`}
className={`nav-link ${posFilter === POS_TYPE.HEADER ? 'active' : ''}`}
role="tab"
data-toggle="tab"
>
headers
Headers
</button>
</li>
<li
className="nav-item"
onClick={this.switchRequestParamsType(REQUEST_PARAMS_TYPE.QUERY_PARAMS)}
>
<li className="nav-item" onClick={this.switchPos(POS_TYPE.QUERY)} >
<button
className={`nav-link ${
requestParamsType === REQUEST_PARAMS_TYPE.QUERY_PARAMS ? 'active' : ''
}`}
className={`nav-link ${posFilter === POS_TYPE.QUERY ? 'active' : ''}`}
role="tab"
data-toggle="tab"
>
Query Params
</button>
</li>
<li
className="nav-item"
onClick={this.switchRequestParamsType(REQUEST_PARAMS_TYPE.BODY_PARAMS)}
>
<li className="nav-item" onClick={this.switchPos(POS_TYPE.BODY)} >
<button
className={`nav-link ${
requestParamsType === REQUEST_PARAMS_TYPE.BODY_PARAMS ? 'active' : ''
}`}
className={`nav-link ${posFilter === POS_TYPE.BODY ? 'active' : ''}`}
role="tab"
data-toggle="tab"
>
@ -372,60 +351,18 @@ class InterfaceSummary extends Component<
)
}
{
editable && requestParamsType === REQUEST_PARAMS_TYPE.BODY_PARAMS ? (
<div className="body-options">
<div className="form-check" onClick={this.switchBodyOption(BODY_OPTION.FORM_DATA)}>
<input
className="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio1"
value="option1"
/>
<label className="form-check-label" htmlFor="inlineRadio1">
form-data
</label>
</div>
<div
className="form-check"
onClick={this.switchBodyOption(BODY_OPTION.FORM_URLENCODED)}
editable && posFilter === POS_TYPE.BODY ? (
<FormControl component="fieldset">
<RadioGroup
aria-label="body type"
name="body-type"
value={this.state.bodyOption}
onChange={e => this.switchBodyOption(e.target.value as BODY_OPTION)}
row={true}
>
<input
className="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2"
/>
<label className="form-check-label" htmlFor="inlineRadio2">
x-www-form-urlencoded
</label>
</div>
<div className="form-check" onClick={this.switchBodyOption(BODY_OPTION.RAW)}>
<input
className="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio3"
value="option3"
/>
<label className="form-check-label" htmlFor="inlineRadio3">
raw
</label>
</div>
<div className="form-check" onClick={this.switchBodyOption(BODY_OPTION.BINARY)}>
<input
className="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio4"
value="option4"
/>
<label className="form-check-label" htmlFor="inlineRadio4">
binary
</label>
</div>
</div>
{BODY_OPTION_LIST.map(x => <FormControlLabel key={x.value} value={x.value} control={<Radio />} label={x.label} />)}
</RadioGroup>
</FormControl>
) : null
}
</div >

@ -12,40 +12,40 @@ import PropertyForm from './PropertyForm'
import Importer from './Importer'
import Previewer from './InterfacePreviewer'
import { GoPlus, GoTrashcan, GoQuestion, GoChevronDown, GoChevronRight } from 'react-icons/go'
import { rptFromStr2Num } from './InterfaceSummary'
import './PropertyList.css'
import { ButtonGroup, Button, Checkbox } from '@material-ui/core'
import { ButtonGroup, Button, Checkbox, Chip } from '@material-ui/core'
import classNames from 'classnames'
import _ from 'lodash'
import Mock from 'mockjs'
import JSON5 from 'json5'
import { elementInViewport } from 'utils/ElementInViewport'
import { POS_TYPE, BODY_OPTION } from './InterfaceSummary'
const mockProperty =
process.env.NODE_ENV === 'development'
? () =>
Mock.mock({
'scope|1': ['request', 'response'],
name: '@WORD(6)',
'type|1': ['String', 'Number', 'Boolean'],
'value|1': ['@INT', '@FLOAT', '@TITLE', '@NAME'],
description: '@CSENTENCE',
parentId: -1,
interfaceId: '@NATURAL',
moduleId: '@NATURAL',
repositoryId: '@NATURAL',
})
: () => ({
scope: 'response',
name: '',
type: 'String',
value: '',
description: '',
Mock.mock({
'scope|1': ['request', 'response'],
name: '@WORD(6)',
'type|1': ['String', 'Number', 'Boolean'],
'value|1': ['@INT', '@FLOAT', '@TITLE', '@NAME'],
description: '@CSENTENCE',
parentId: -1,
interfaceId: undefined,
moduleId: undefined,
repositoryId: undefined,
interfaceId: '@NATURAL',
moduleId: '@NATURAL',
repositoryId: '@NATURAL',
})
: () => ({
scope: 'response',
name: '',
type: 'String',
value: '',
description: '',
parentId: -1,
interfaceId: undefined,
moduleId: undefined,
repositoryId: undefined,
})
export const RequestPropertyListPreviewer = (props: any) => (
<Previewer {...props} />
@ -206,6 +206,7 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
handleChangeProperty,
handleChangePropertyField,
handleSortProperties,
bodyOption,
} = this.props
return (
isExpanding && (
@ -229,27 +230,27 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
>
<div className="td operations nowrap">
{(item.type === 'Object' || item.type === 'Array') &&
item.children &&
item.children.length ? (
<Link
to=""
onClick={e => {
e.preventDefault()
this.setState(prev => ({
...prev,
childrenExpandingIdList: childrenIsExpanding
? prev.childrenExpandingIdList.filter(id => id !== item.id)
: [...prev.childrenExpandingIdList, item.id],
}))
}}
>
{childrenIsExpanding ? (
<GoChevronDown className="fontsize-14 color-6" />
) : (
<GoChevronRight className="fontsize-14 color-6" />
)}
</Link>
) : null}
item.children &&
item.children.length ? (
<Link
to=""
onClick={e => {
e.preventDefault()
this.setState(prev => ({
...prev,
childrenExpandingIdList: childrenIsExpanding
? prev.childrenExpandingIdList.filter(id => id !== item.id)
: [...prev.childrenExpandingIdList, item.id],
}))
}}
>
{childrenIsExpanding ? (
<GoChevronDown className="fontsize-14 color-6" />
) : (
<GoChevronRight className="fontsize-14 color-6" />
)}
</Link>
) : null}
{editable && (
<>
{item.type === 'Object' || item.type === 'Array' ? (
@ -280,7 +281,9 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
{!editable ? (
<>
<CopyToClipboard text={item.name} type="right">
<span className="name-wrapper nowrap">{item.name}</span>
<span className="name-wrapper nowrap">
{item.name}{item.pos === POS_TYPE.BODY ? <BodyParamLabel type={bodyOption} /> : null}
</span>
</CopyToClipboard>
{item.scope === 'request' && item.depth === 0 ? (
<div style={{ margin: '1px 0 0 3px' }}>
@ -289,21 +292,21 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
) : null}
</>
) : (
<input
ref={(input: HTMLInputElement) => {
if (item.id === highlightId) {
this.focusNameInput = input
<input
ref={(input: HTMLInputElement) => {
if (item.id === highlightId) {
this.focusNameInput = input
}
}}
value={item.name}
onChange={e =>
handleChangePropertyField(item.id, 'name', e.target.value)
}
}}
value={item.name}
onChange={e =>
handleChangePropertyField(item.id, 'name', e.target.value)
}
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
</div>
<div className={`td payload required type depth-${item.depth} nowrap`}>
<Checkbox
@ -325,43 +328,43 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
<span className="nowrap">{item.type}</span>
</CopyToClipboard>
) : (
<select
value={item.type}
onChange={e => {
const type = e.target.value
if (isNoValueType(type)) {
handleChangeProperty(item.id, {
value: '',
type,
})
} else {
handleChangeProperty(item.id, { type })
}
}}
className="form-control editable"
>
{TYPES.map(type => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
)}
<select
value={item.type}
onChange={e => {
const type = e.target.value
if (isNoValueType(type)) {
handleChangeProperty(item.id, {
value: '',
type,
})
} else {
handleChangeProperty(item.id, { type })
}
}}
className="form-control editable"
>
{TYPES.map(type => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
)}
</div>
<div className="td payload rule nowrap">
{!editable ? (
<span className="nowrap">{item.rule}</span>
) : (
<input
value={item.rule || ''}
onChange={e =>
handleChangePropertyField(item.id, 'rule', e.target.value)
}
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
<input
value={item.rule || ''}
onChange={e =>
handleChangePropertyField(item.id, 'rule', e.target.value)
}
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
</div>
<div className="td payload value">
{!editable ? (
@ -369,18 +372,18 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
<span className="value-container">{getFormattedValue(item)}</span>
</CopyToClipboard>
) : (
<SmartTextarea
value={item.value || ''}
onChange={(e: any) =>
handleChangePropertyField(item.id, 'value', e.target.value)
}
disabled={isNoValueType(item.type) && !item.value}
rows="1"
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
<SmartTextarea
value={item.value || ''}
onChange={(e: any) =>
handleChangePropertyField(item.id, 'value', e.target.value)
}
disabled={isNoValueType(item.type) && !item.value}
rows="1"
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
</div>
<div className="td payload desc">
{!editable ? (
@ -388,17 +391,17 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
<span>{item.description}</span>
</CopyToClipboard>
) : (
<SmartTextarea
value={item.description || ''}
onChange={(e: any) =>
handleChangePropertyField(item.id, 'description', e.target.value)
}
rows="1"
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
<SmartTextarea
value={item.description || ''}
onChange={(e: any) =>
handleChangePropertyField(item.id, 'description', e.target.value)
}
rows="1"
className="form-control editable"
spellCheck={false}
placeholder=""
/>
)}
</div>
</div>
{item.children && item.children.length ? (
@ -412,6 +415,7 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
handleChangePropertyField={handleChangePropertyField}
handleSortProperties={handleSortProperties}
property={item}
bodyOption={bodyOption}
isExpanding={childrenIsExpanding}
/>
) : null}
@ -424,6 +428,12 @@ class SortableTreeTableRow extends Component<SortableTreeTableRowProps, Sortable
)
}
}
function BodyParamLabel({ type }: { type: BODY_OPTION }) {
return (
<Chip label={type} className="ml1" size="small" />
)
}
class SortableTreeTable extends Component<any, any> {
render() {
const {
@ -436,6 +446,7 @@ class SortableTreeTable extends Component<any, any> {
handleChangeProperty,
handleChangePropertyField,
handleSortProperties,
bodyOption,
} = this.props
return (
<div className={`SortableTreeTable ${editable ? 'editable' : ''}`}>
@ -451,6 +462,7 @@ class SortableTreeTable extends Component<any, any> {
interfaceId={interfaceId}
property={root}
isExpanding={true}
bodyOption={bodyOption}
/>
</div>
)
@ -471,7 +483,7 @@ class PropertyList extends PureComponent<any, any> {
editable: PropTypes.bool.isRequired,
/** optional */
bodyOption: PropTypes.string,
requestParamsType: PropTypes.string,
posFilter: PropTypes.number,
}
static contextTypes = {
handleAddMemoryProperty: PropTypes.func.isRequired,
@ -495,17 +507,18 @@ class PropertyList extends PureComponent<any, any> {
repository = {},
mod = {},
interfaceId,
bodyOption,
posFilter,
} = this.props
if (!interfaceId) {
return null
}
const { editable, requestParamsType } = this.props // itf.locker && (itf.locker.id === auth.id)
const { editable } = this.props // itf.locker && (itf.locker.id === auth.id)
let scopedProperties = properties
.map((property: any) => ({ ...property }))
.filter((property: any) => property.scope === scope)
const pos = rptFromStr2Num(requestParamsType)
if (scope === 'request' && editable) {
scopedProperties = scopedProperties.filter((s: any) => s.pos === pos)
scopedProperties = scopedProperties.filter((s: any) => s.pos === posFilter)
}
return (
@ -534,6 +547,7 @@ class PropertyList extends PureComponent<any, any> {
<div className="body">
<SortableTreeTable
root={Tree.arrayToTree(scopedProperties)}
bodyOption={bodyOption}
editable={editable}
highlightId={this.state.highlightId}
interfaceId={interfaceId}

@ -9,7 +9,6 @@ import {
connectRouter,
LOCATION_CHANGE,
} from 'connected-react-router'
import loggerMiddleware from './loggerMiddleware'
import createSagaMiddleware from 'redux-saga'
import URI from 'urijs'
@ -110,7 +109,7 @@ const Family: {
})) ||
compose
const middlewares = logger
? [loggerMiddleware, routerMiddleware, apiMiddleware, sagaMiddleware]
? [routerMiddleware, apiMiddleware, sagaMiddleware] // 真的不需要这个logger d- o-b|||
: [routerMiddleware, apiMiddleware, sagaMiddleware]
const store = createStore<any, any, any, any>(
combineReducers({ ..._reducers, router: connectRouter(history) }),

@ -262,7 +262,6 @@ const relatives = {
}
},
*[DO_UPDATE_USER_SETTING](action: DoUpdateUserSettingAction) {
console.log('什么鬼啊')
const { key, value, cb } = action.payload
yield put(updateUserSetting(key, value) as AnyAction)
const opAction = yield take(UPDATE_USER_SETTING_SUCCESS)

Loading…
Cancel
Save