Skip to content

Commit

Permalink
chore: replace deprecated antd functionality (#745)
Browse files Browse the repository at this point in the history 
* chore: remove deprecated antd Tabs.TabPane

* chore: remove deprecated antd Tooltip.visible

* chore: remove deprecated antd Modal.visible

* chore: fix eslint errors
  • Loading branch information
@eglitise
eglitise authored Mar 29, 2023
1 parent f4bfcc6 commit c52844b
Show file tree
Hide file tree
Showing 9 changed files with 74 additions and 86 deletions.
2 changes: 1 addition & 1 deletion app/renderer/components/Inspector/Actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export default class Actions extends Component {
{!!pendingAction && <Modal
title={pendingAction.actionName}
okText={t('Execute Action')}
visible={!!pendingAction}
open={!!pendingAction}
onOk={() => this.executeCommand()}
onCancel={() => cancelPendingAction()}>
{
Expand Down
67 changes: 32 additions & 35 deletions app/renderer/components/Inspector/GestureEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { SCREENSHOT_INTERACTION_MODE, POINTER_TYPES,
percentageToPixels, pixelsToPercentage } from './shared';
import InspectorCSS from './Inspector.css';

const {TabPane} = Tabs;
const {Option} = Select;
const {Step} = Steps;
const ButtonGroup = Button.Group;
Expand Down Expand Up @@ -458,41 +457,39 @@ class GestureEditor extends Component {
onEdit={(targetKey, action) => action === ACTION_TYPES.ADD ? this.addPointer() : this.deletePointer(targetKey)}
hideAdd={pointers.length === 5}
centered={true}
tabBarGutter={10}>
{pointers.map((pointer) => (
<TabPane
tab={<Tooltip title={t('Edit')} mouseEnterDelay={1}>
<Input
key={pointer.id}
className={InspectorCSS['pointer-title']}
style={{ cursor: activeKey === pointer.id ? CURSOR.TEXT : CURSOR.POINTER, textDecorationColor: pointer.color}}
value={pointer.name}
defaultValue={pointer.name}
bordered={false}
maxLength={10}
onChange={(e) => {pointer.name = e.target.value; this.setState({pointers});}}/>
</Tooltip>}
key={pointer.id}>
<Row gutter={[24, 24]}>
{pointer.ticks.map((tick) =>
<Col xs={12} sm={12} md={12} lg={8} xl={6} xxl={4} key={`${tick.id}.col1`}>
<div>
{tickCard(tick)}
</div>
</Col>
)}
<Col xs={12} sm={12} md={12} lg={8} xl={6} xxl={4} key={`${pointer.id}.col1`}>
<Card className={InspectorCSS['tick-plus-card']} bordered={false}>
<center>
<Button className={InspectorCSS['tick-plus-btn']} icon={<PlusCircleOutlined/>}
onClick={() => this.addTick(pointer.id)} key={ACTION_TYPES.ADD}/>
</center>
</Card>
tabBarGutter={10}
items={pointers.map((pointer) => ({
label: <Tooltip title={t('Edit')} mouseEnterDelay={1}>
<Input
key={pointer.id}
className={InspectorCSS['pointer-title']}
style={{ cursor: activeKey === pointer.id ? CURSOR.TEXT : CURSOR.POINTER, textDecorationColor: pointer.color}}
value={pointer.name}
defaultValue={pointer.name}
bordered={false}
maxLength={10}
onChange={(e) => {pointer.name = e.target.value; this.setState({pointers});}}/>
</Tooltip>,
key: pointer.id,
children: <Row gutter={[24, 24]}>
{pointer.ticks.map((tick) =>
<Col xs={12} sm={12} md={12} lg={8} xl={6} xxl={4} key={`${tick.id}.col1`}>
<div>
{tickCard(tick)}
</div>
</Col>
</Row>
</TabPane>
))}
</Tabs>;
)}
<Col xs={12} sm={12} md={12} lg={8} xl={6} xxl={4} key={`${pointer.id}.col1`}>
<Card className={InspectorCSS['tick-plus-card']} bordered={false}>
<center>
<Button className={InspectorCSS['tick-plus-btn']} icon={<PlusCircleOutlined/>}
onClick={() => this.addTick(pointer.id)} key={ACTION_TYPES.ADD}/>
</center>
</Card>
</Col>
</Row>
}))}
/>;


const timeline = this.updateGestureForTimeline().map((pointer) =>
Expand Down
30 changes: 14 additions & 16 deletions app/renderer/components/Inspector/Inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@ import { BUTTON } from '../../../../gui-common/components/AntdTypes';

const {SELECT, SWIPE, TAP} = SCREENSHOT_INTERACTION_MODE;

const { TabPane } = Tabs;

const ButtonGroup = Button.Group;

const MIN_WIDTH = 1080;
Expand Down Expand Up @@ -252,8 +250,9 @@ export default class Inspector extends Component {
}
<Tabs activeKey={selectedInteractionMode}
size="small"
onChange={(tab) => selectInteractionMode(tab)}>
<TabPane tab={t('Source')} key={INTERACTION_MODE.SOURCE}>
onChange={(tab) => selectInteractionMode(tab)}
items={[{
label: t('Source'), key: INTERACTION_MODE.SOURCE, children:
<div className='action-row'>
<div className='action-col'>
<Card title={<span><FileTextOutlined /> {t('App Source')} </span>}
Expand Down Expand Up @@ -282,16 +281,16 @@ export default class Inspector extends Component {
</Card>
</div>
</div>
</TabPane>
<TabPane tab={t('Commands')} key={INTERACTION_MODE.ACTIONS}>
}, {
label: t('Commands'), key: INTERACTION_MODE.ACTIONS, children:
<Card
title={<span><ThunderboltOutlined /> {t('Execute Commands')}</span>}
className={InspectorStyles['interaction-tab-card']}>
<Actions {...this.props} />
</Card>
</TabPane>
<TabPane tab={t('Actions')} key={INTERACTION_MODE.GESTURES}>
{isGestureEditorVisible ?
}, {
label: t('Actions'), key: INTERACTION_MODE.GESTURES, children:
isGestureEditorVisible ?
<Card
title={<span><HighlightOutlined /> {t('Action Builder')}</span>}
className={InspectorStyles['interaction-tab-card']}>
Expand All @@ -303,16 +302,15 @@ export default class Inspector extends Component {
className={InspectorStyles['interaction-tab-card']}>
<SavedGestures {...this.props} />
</Card>
}
</TabPane>
<TabPane tab={t('Session Information')} key={INTERACTION_MODE.SESSION_INFO}>
}, {
label: t('Session Information'), key: INTERACTION_MODE.SESSION_INFO, children:
<Card
title={<span><InfoCircleOutlined /> {t('Session Information')}</span>}
className={InspectorStyles['interaction-tab-card']}>
<SessionInfo {...this.props} />
</Card>
</TabPane>
</Tabs>
}]}
/>
</div>
</div>;

Expand Down Expand Up @@ -367,7 +365,7 @@ export default class Inspector extends Component {
{main}
<Modal
title={t('Session Inactive')}
visible={showKeepAlivePrompt}
open={showKeepAlivePrompt}
onOk={() => keepSessionAlive()}
onCancel={() => quitSession()}
okText={t('Keep Session Running')}
Expand All @@ -377,7 +375,7 @@ export default class Inspector extends Component {
</Modal>
<Modal
title={t('methodCallResult', {methodName: visibleCommandMethod})}
visible={!!visibleCommandResult}
open={!!visibleCommandResult}
onOk={() => setVisibleCommandResult(null)}
onCancel={() => setVisibleCommandResult(null)}
>
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/components/Inspector/LocatorTestModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class LocatorTestModal extends Component {
} = this.props;

// Footer displays all the buttons at the bottom of the Modal
return <Modal visible={isLocatorTestModalVisible}
return <Modal open={isLocatorTestModalVisible}
title={t('Search for element')}
confirmLoading={isSearchingForElements}
onCancel={this.onCancel.bind(this)}
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/components/Inspector/Screenshot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ class Screenshot extends Component {
<p>{t('xCoordinate', {x})}</p>
<p>{t('yCoordinate', {y})}</p>
</div>}
{swipeInstructions && <Tooltip visible={true} title={swipeInstructions} placement="topLeft">{screenImg}</Tooltip>}
{swipeInstructions && <Tooltip open={true} title={swipeInstructions} placement="topLeft">{screenImg}</Tooltip>}
{!swipeInstructions && screenImg}
{screenshotInteractionMode === SELECT && this.containerEl && <HighlighterRects
{...this.props}
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/components/Inspector/SelectedElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ class SelectedElement extends Component {
</Row>
}
<Modal title={t('Send Keys')}
visible={sendKeysModalVisible}
open={sendKeysModalVisible}
okText={t('Send Keys')}
cancelText={t('Cancel')}
onCancel={hideSendKeysModal}
Expand Down
6 changes: 3 additions & 3 deletions app/renderer/components/Session/CapabilityEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default class CapabilityEditor extends Component {
{caps.map((cap, index) => <Row gutter={8} key={index}>
<Col span={7}>
<FormItem>
<Tooltip title={whitespaceMsg(cap.name)} visible={whitespaces.test(cap.name)}>
<Tooltip title={whitespaceMsg(cap.name)} open={whitespaces.test(cap.name)}>
<Input disabled={isEditingDesiredCaps} id={`desiredCapabilityName_${index}`} placeholder={t('Name')}
value={cap.name} onChange={(e) => setCapabilityParam(index, 'name', e.target.value)}
ref={index === numCaps - 1 ? this.latestCapField : ''}
Expand All @@ -121,7 +121,7 @@ export default class CapabilityEditor extends Component {
</Col>
<Col span={7}>
<FormItem>
<Tooltip title={whitespaceMsg(cap.value)} visible={whitespaces.test(cap.value)}>
<Tooltip title={whitespaceMsg(cap.value)} open={whitespaces.test(cap.value)}>
<CapabilityControl {...this.props} cap={cap} id={`desiredCapabilityValue_${index}`}
onSetCapabilityParam={(value) => setCapabilityParam(index, 'value', value)}
onPressEnter={(index === numCaps - 1) ? addCapability : () => {}}
Expand Down Expand Up @@ -164,7 +164,7 @@ export default class CapabilityEditor extends Component {
</Col>
<Col order={2} span={12} className={SessionStyles.capsFormattedCol}>
<FormattedCaps {...this.props} />
<Modal visible={showSaveAsModal}
<Modal open={showSaveAsModal}
title={t('Save Capability Set As')}
okText='Save'
cancelText='Cancel'
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/components/Session/CloudProviderSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default class CloudProviderSelector extends Component {

return <Modal key="modal"
className={SessionStyles.cloudProviderModal}
visible={isAddingCloudProvider}
open={isAddingCloudProvider}
onCancel={stopAddCloudProvider}
footer={footer}
title={t('Select Cloud Providers')}>
Expand Down
47 changes: 20 additions & 27 deletions app/renderer/components/Session/Session.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import CloudProviderSelector from './CloudProviderSelector';
import { LinkOutlined } from '@ant-design/icons';
import { BUTTON } from '../../../../gui-common/components/AntdTypes';

const {TabPane} = Tabs;

const ADD_CLOUD_PROVIDER = 'addCloudProvider';

export default class Session extends Component {
Expand Down Expand Up @@ -72,24 +70,20 @@ export default class Session extends Component {
<Spin spinning={!!sessionLoading} key="main">
<div className={SessionStyles.sessionContainer}>
<div id='serverTypeTabs' className={SessionStyles.serverTab}>
<Tabs activeKey={serverType} onChange={(tab) => this.handleSelectServerTab(tab)} className={SessionStyles.serverTabs}>
{[
<TabPane tab={t('Appium Server')} key="remote">
<ServerTabCustom {...this.props} />
</TabPane>,
..._(visibleProviders).map((providerName) => {
const provider = CloudProviders[providerName];
if (!provider) {
return true;
}
<Tabs activeKey={serverType} onChange={(tab) => this.handleSelectServerTab(tab)} className={SessionStyles.serverTabs} items={[{
label: t('Appium Server'), key: 'remote', children:
<ServerTabCustom {...this.props} />
},
..._(visibleProviders).map((providerName) => {
const provider = CloudProviders[providerName];
if (!provider) {
return true;
}

return <TabPane key={providerName} tab={<div>{provider.tabhead()}</div>}>
{provider.tab(this.props)}
</TabPane>;
}),
<TabPane tab={<span className='addCloudProviderTab'>{ t('Select Cloud Providers') }</span>} key={ADD_CLOUD_PROVIDER}></TabPane>
]}
</Tabs>
return {label: <div>{provider.tabhead()}</div>, key: providerName, children: provider.tab(this.props)};
}),
{label: <span className='addCloudProviderTab'>{ t('Select Cloud Providers') }</span>, key: ADD_CLOUD_PROVIDER}
]}/>
<AdvancedServerParams {...this.props} />
</div>

Expand All @@ -98,17 +92,16 @@ export default class Session extends Component {
<p>{t('sessionInProgress')}</p>
</div>}

{!newSessionBegan && <Tabs activeKey={tabKey} onChange={switchTabs} className={SessionStyles.scrollingTabCont}>
<TabPane tab={t('Desired Capabilities')} key='new' className={SessionStyles.scrollingTab}>
{!newSessionBegan && <Tabs activeKey={tabKey} onChange={switchTabs} className={SessionStyles.scrollingTabCont} items={[{
label: t('Desired Capabilities'), key: 'new', className: SessionStyles.scrollingTab, children:
<CapabilityEditor {...this.props} />
</TabPane>
<TabPane tab={t('Saved Capability Sets', {savedSessionsCount: savedSessions.length})} key='saved' className={SessionStyles.scrollingTab} disabled={savedSessions.length === 0}>
}, {
label: t('Saved Capability Sets', {savedSessionsCount: savedSessions.length}), key: 'saved', className: SessionStyles.scrollingTab, disabled: savedSessions.length === 0, children:
<SavedSessions {...this.props} />
</TabPane>
<TabPane tab={t('Attach to Session')} key='attach' className={SessionStyles.scrollingTab}>
}, {
label: t('Attach to Session'), key: 'attach', className: SessionStyles.scrollingTab, children:
<AttachToSession {...this.props} />
</TabPane>
</Tabs>}
}]}/>}

<div className={SessionStyles.sessionFooter}>
<div className={SessionStyles.desiredCapsLink}>
Expand Down

0 comments on commit c52844b

Please sign in to comment.