Migrate APPM Publisher UI from antd v3 to v4

4.x.x
anjula-sack 4 years ago
parent b3f395b284
commit 4f8d29456b

@ -10,11 +10,12 @@
}, },
"license": "Apache License 2.0", "license": "Apache License 2.0",
"dependencies": { "dependencies": {
"@ant-design/compatible": "^1.0.0",
"@ant-design/dark-theme": "^0.2.2", "@ant-design/dark-theme": "^0.2.2",
"@ant-design/icons": "^4.0.6", "@ant-design/icons": "^4.0.6",
"@babel/polyfill": "^7.6.0", "@babel/polyfill": "^7.6.0",
"acorn": "^6.2.0", "acorn": "^6.2.0",
"antd": "^3.23.6", "antd": "^4.0.0",
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-eslint": "^9.0.0", "babel-eslint": "^9.0.0",
"d3": "^5.9.7", "d3": "^5.9.7",

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { notification, Menu, Icon } from 'antd'; import { LogoutOutlined } from '@ant-design/icons';
import { notification, Menu } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withConfigContext } from '../../../../components/ConfigContext'; import { withConfigContext } from '../../../../components/ConfigContext';
@ -70,7 +71,7 @@ class Logout extends React.Component {
return ( return (
<Menu> <Menu>
<Menu.Item key="1" onClick={this.handleSubmit}> <Menu.Item key="1" onClick={this.handleSubmit}>
<Icon type="logout" /> <LogoutOutlined />
Logout Logout
</Menu.Item> </Menu.Item>
</Menu> </Menu>

@ -17,7 +17,18 @@
*/ */
import React from 'react'; import React from 'react';
import { Layout, Menu, Icon, Drawer, Button } from 'antd';
import {
AndroidFilled,
AppstoreOutlined,
ControlOutlined,
PlusOutlined,
SettingOutlined,
UserOutlined,
} from '@ant-design/icons';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Layout, Menu, Drawer, Button } from 'antd';
import { Switch, Link } from 'react-router-dom'; import { Switch, Link } from 'react-router-dom';
import RouteWithSubRoutes from '../../components/RouteWithSubRoutes'; import RouteWithSubRoutes from '../../components/RouteWithSubRoutes';
import { Redirect } from 'react-router'; import { Redirect } from 'react-router';
@ -81,7 +92,7 @@ class Dashboard extends React.Component {
> >
<Menu.Item key="1"> <Menu.Item key="1">
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="appstore" /> <AppstoreOutlined />
Apps Apps
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -92,7 +103,7 @@ class Dashboard extends React.Component {
<SubMenu <SubMenu
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="plus" /> <PlusOutlined />
Add New App Add New App
</span> </span>
} }
@ -118,21 +129,20 @@ class Dashboard extends React.Component {
<SubMenu <SubMenu
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="control" /> <ControlOutlined />
Manage Manage
</span> </span>
} }
> >
<Menu.Item key="manage"> <Menu.Item key="manage">
<Link to="/publisher/manage"> <Link to="/publisher/manage">
<Icon type="setting" /> General <SettingOutlined /> General
</Link> </Link>
</Menu.Item> </Menu.Item>
{this.config.androidEnterpriseToken != null && ( {this.config.androidEnterpriseToken != null && (
<Menu.Item key="manage-android-enterprise"> <Menu.Item key="manage-android-enterprise">
<Link to="/publisher/manage/android-enterprise"> <Link to="/publisher/manage/android-enterprise">
<Icon type="android" theme="filled" /> Android <AndroidFilled /> Android Enterprise
Enterprise
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -142,7 +152,7 @@ class Dashboard extends React.Component {
className="profile" className="profile"
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="user" /> <UserOutlined />
{this.config.username} {this.config.username}
</span> </span>
} }
@ -157,7 +167,7 @@ class Dashboard extends React.Component {
<Layout className="mobile-layout"> <Layout className="mobile-layout">
<div className="mobile-menu-button"> <div className="mobile-menu-button">
<Button type="link" onClick={this.showMobileNavigationBar}> <Button type="link" onClick={this.showMobileNavigationBar}>
<Icon <LegacyIcon
type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'}
className="bar-icon" className="bar-icon"
/> />
@ -194,14 +204,14 @@ class Dashboard extends React.Component {
> >
<Menu.Item key="1"> <Menu.Item key="1">
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="appstore" /> <AppstoreOutlined />
Apps Apps
</Link> </Link>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="plus" /> <PlusOutlined />
Add New App Add New App
</span> </span>
} }
@ -223,7 +233,7 @@ class Dashboard extends React.Component {
</SubMenu> </SubMenu>
<Menu.Item key="2"> <Menu.Item key="2">
<Link to="/publisher/manage"> <Link to="/publisher/manage">
<Icon type="control" /> <ControlOutlined />
Manage Manage
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -238,7 +248,7 @@ class Dashboard extends React.Component {
<SubMenu <SubMenu
title={ title={
<span className="submenu-title-wrapper"> <span className="submenu-title-wrapper">
<Icon type="user" /> <UserOutlined />
</span> </span>
} }
> >

@ -17,7 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { Alert, Button, Col, Form, Input, Row, Select, Spin } from 'antd'; import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Alert, Button, Col, Input, Row, Select, Spin } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withConfigContext } from '../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../components/ConfigContext';
import { handleApiError } from '../../../../../../../../services/utils/errorHandler'; import { handleApiError } from '../../../../../../../../services/utils/errorHandler';

@ -17,11 +17,12 @@
*/ */
import React from 'react'; import React from 'react';
import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { import {
Button, Button,
Col, Col,
Form,
Icon,
Input, Input,
Row, Row,
Select, Select,
@ -280,7 +281,7 @@ class NewAppUploadForm extends React.Component {
} = this.state; } = this.state;
const uploadButton = ( const uploadButton = (
<div> <div>
<Icon type="plus" /> <PlusOutlined />
<div className="ant-upload-text">Select</div> <div className="ant-upload-text">Select</div>
</div> </div>
); );
@ -315,7 +316,7 @@ class NewAppUploadForm extends React.Component {
> >
{binaryFiles.length !== 1 && ( {binaryFiles.length !== 1 && (
<Button> <Button>
<Icon type="upload" /> Click to upload <UploadOutlined /> Click to upload
</Button> </Button>
)} )}
</Upload>, </Upload>,
@ -577,7 +578,7 @@ class NewAppUploadForm extends React.Component {
<Button <Button
type="dashed" type="dashed"
shape="circle" shape="circle"
icon="minus" icon={<MinusOutlined />}
onClick={() => { onClick={() => {
metaData.splice(index, 1); metaData.splice(index, 1);
this.setState({ this.setState({
@ -592,7 +593,7 @@ class NewAppUploadForm extends React.Component {
})} })}
<Button <Button
type="dashed" type="dashed"
icon="plus" icon={<PlusOutlined />}
onClick={this.addNewMetaData} onClick={this.addNewMetaData}
> >
Add Add

@ -17,7 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { Card, Button, Steps, Row, Col, Form, Result, Spin } from 'antd'; import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Steps, Row, Col, Result, Spin } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import NewAppDetailsForm from './components/NewAppDetailsForm'; import NewAppDetailsForm from './components/NewAppDetailsForm';

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
import AddNewAppForm from '../../components/AddNewAppForm'; import AddNewAppForm from '../../components/AddNewAppForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Authorized from '../../../../../../components/Authorized/Authorized'; import Authorized from '../../../../../../components/Authorized/Authorized';
@ -58,7 +59,7 @@ class AddNewCustomApp extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Add New Custom App</Breadcrumb.Item> <Breadcrumb.Item>Add New Custom App</Breadcrumb.Item>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { PageHeader, Typography, Breadcrumb, Icon, Result } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
import AddNewAppForm from '../../components/AddNewAppForm'; import AddNewAppForm from '../../components/AddNewAppForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Authorized from '../../../../../../components/Authorized/Authorized'; import Authorized from '../../../../../../components/Authorized/Authorized';
@ -52,7 +53,7 @@ class AddNewEnterpriseApp extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item> <Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
import AddNewAppForm from '../../components/AddNewAppForm'; import AddNewAppForm from '../../components/AddNewAppForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Authorized from '../../../../../../components/Authorized/Authorized'; import Authorized from '../../../../../../components/Authorized/Authorized';
@ -59,7 +60,7 @@ class AddNewPublicApp extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Add New Public App</Breadcrumb.Item> <Breadcrumb.Item>Add New Public App</Breadcrumb.Item>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Icon, PageHeader, Typography, Breadcrumb, Result } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb, Result } from 'antd';
import AddNewAppForm from '../../components/AddNewAppForm'; import AddNewAppForm from '../../components/AddNewAppForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Authorized from '../../../../../../components/Authorized/Authorized'; import Authorized from '../../../../../../components/Authorized/Authorized';
@ -55,7 +56,7 @@ class AddNewEnterpriseApp extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item> <Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item>

@ -17,7 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { Form, notification, Spin, Card, Row, Col } from 'antd'; import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { notification, Spin, Card, Row, Col } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { withConfigContext } from '../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../components/ConfigContext';

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Icon, PageHeader, Typography, Breadcrumb } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb } from 'antd';
import AddNewReleaseForm from './components/AddNewReleaseForm'; import AddNewReleaseForm from './components/AddNewReleaseForm';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -40,7 +41,7 @@ class AddNewRelease extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Add New Release</Breadcrumb.Item> <Breadcrumb.Item>Add New Release</Breadcrumb.Item>

@ -17,6 +17,7 @@
*/ */
import React from 'react'; import React from 'react';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { import {
Drawer, Drawer,
Select, Select,
@ -29,7 +30,6 @@ import {
Button, Button,
Spin, Spin,
message, message,
Icon,
Card, Card,
Badge, Badge,
Tooltip, Tooltip,
@ -48,7 +48,11 @@ import ManagedConfigurationsIframe from './components/ManagedConfigurationsIfram
import { handleApiError } from '../../../../../../../../../services/utils/errorHandler'; import { handleApiError } from '../../../../../../../../../services/utils/errorHandler';
import Authorized from '../../../../../../../../../components/Authorized/Authorized'; import Authorized from '../../../../../../../../../components/Authorized/Authorized';
import { isAuthorized } from '../../../../../../../../../services/utils/authorizationHandler'; import { isAuthorized } from '../../../../../../../../../services/utils/authorizationHandler';
import { MoreOutlined } from '@ant-design/icons'; import {
CheckCircleOutlined,
EditOutlined,
MoreOutlined,
} from '@ant-design/icons';
import DeleteApp from './components/DeleteApp'; import DeleteApp from './components/DeleteApp';
import RetireApp from './components/RetireApp'; import RetireApp from './components/RetireApp';
@ -58,7 +62,7 @@ const { Option } = Select;
const IconText = ({ type, text }) => ( const IconText = ({ type, text }) => (
<span> <span>
<Icon type={type} style={{ marginRight: 8 }} /> <LegacyIcon type={type} style={{ marginRight: 8 }} />
{text} {text}
</span> </span>
); );
@ -603,13 +607,12 @@ class AppDetailsDrawer extends React.Component {
title="Published" title="Published"
count={ count={
<Tooltip title="Published"> <Tooltip title="Published">
<Icon <CheckCircleOutlined
style={{ style={{
backgroundColor: '#52c41a', backgroundColor: '#52c41a',
borderRadius: '50%', borderRadius: '50%',
color: 'white', color: 'white',
}} }}
type="check-circle"
/> />
</Tooltip> </Tooltip>
} }
@ -698,7 +701,7 @@ class AppDetailsDrawer extends React.Component {
}} }}
onClick={this.enableDescriptionEdit} onClick={this.enableDescriptionEdit}
> >
<Icon type="edit" /> <EditOutlined />
</Text> </Text>
) )
} }
@ -754,7 +757,7 @@ class AppDetailsDrawer extends React.Component {
}} }}
onClick={this.enableCategoriesEdit} onClick={this.enableCategoriesEdit}
> >
<Icon type="edit" /> <EditOutlined />
</Text> </Text>
) )
} }
@ -821,7 +824,7 @@ class AppDetailsDrawer extends React.Component {
}} }}
onClick={this.enableTagsEdit} onClick={this.enableTagsEdit}
> >
<Icon type="edit" /> <EditOutlined />
</Text> </Text>
) )
} }

@ -17,7 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { Avatar, Table, Tag, Icon, Badge, Alert, Tooltip } from 'antd'; import { CheckCircleOutlined } from '@ant-design/icons';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Avatar, Table, Tag, Badge, Alert, Tooltip } from 'antd';
import axios from 'axios'; import axios from 'axios';
import pSBC from 'shade-blend-color'; import pSBC from 'shade-blend-color';
import './styles.css'; import './styles.css';
@ -69,13 +71,12 @@ const columns = [
}} }}
count={ count={
<Tooltip title="Published"> <Tooltip title="Published">
<Icon <CheckCircleOutlined
style={{ style={{
backgroundColor: '#52c41a', backgroundColor: '#52c41a',
borderRadius: '50%', borderRadius: '50%',
color: 'white', color: 'white',
}} }}
type="check-circle"
/> />
</Tooltip> </Tooltip>
} }
@ -147,7 +148,7 @@ const columns = [
} }
return ( return (
<span style={{ fontSize: 20, color: color, textAlign: 'center' }}> <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
<Icon type={icon} theme={theme} /> <LegacyIcon type={icon} theme={theme} />
</span> </span>
); );
}, },

@ -17,16 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { import { Form } from '@ant-design/compatible';
Card, import '@ant-design/compatible/assets/index.css';
Col, import { Card, Col, Row, Typography, Divider, Select, Button } from 'antd';
Row,
Typography,
Divider,
Select,
Button,
Form,
} from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withConfigContext } from '../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../components/ConfigContext';
import { handleApiError } from '../../../../../../../../services/utils/errorHandler'; import { handleApiError } from '../../../../../../../../services/utils/errorHandler';
@ -196,7 +189,8 @@ class FiltersForm extends React.Component {
permission="/permission/admin/app-mgt/publisher/application/update" permission="/permission/admin/app-mgt/publisher/application/update"
yes={ yes={
<div> <div>
<Form.Item label="Categories"> <p>Categories:</p>
<Form.Item>
{getFieldDecorator('categories', { {getFieldDecorator('categories', {
rules: [ rules: [
{ {
@ -221,7 +215,8 @@ class FiltersForm extends React.Component {
</Select>, </Select>,
)} )}
</Form.Item> </Form.Item>
<Form.Item label="Tags"> <p>Tags:</p>
<Form.Item>
{getFieldDecorator('tags', { {getFieldDecorator('tags', {
rules: [ rules: [
{ {
@ -244,10 +239,11 @@ class FiltersForm extends React.Component {
</div> </div>
} }
/> />
<p>Device Type:</p>
<Authorized <Authorized
permission="/permission/admin/device-mgt/admin/device-type/view" permission="/permission/admin/device-mgt/admin/device-type/view"
yes={ yes={
<Form.Item label="Device Type"> <Form.Item>
{getFieldDecorator('deviceType', { {getFieldDecorator('deviceType', {
rules: [ rules: [
{ {
@ -271,7 +267,8 @@ class FiltersForm extends React.Component {
</Form.Item> </Form.Item>
} }
/> />
<Form.Item label="App Type"> <p>App Type:</p>
<Form.Item>
{getFieldDecorator('appType', {})( {getFieldDecorator('appType', {})(
<Select style={{ width: '100%' }} placeholder="Select app type"> <Select style={{ width: '100%' }} placeholder="Select app type">
<Option value="ENTERPRISE">Enterprise</Option> <Option value="ENTERPRISE">Enterprise</Option>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Row, Typography, Icon } from 'antd'; import { TeamOutlined } from '@ant-design/icons';
import { Row, Typography } from 'antd';
import StarRatings from 'react-star-ratings'; import StarRatings from 'react-star-ratings';
import './styles.css'; import './styles.css';
import axios from 'axios'; import axios from 'axios';
@ -118,7 +119,7 @@ class DetailedRating extends React.Component {
/> />
<br /> <br />
<Text type="secondary" className="people-count"> <Text type="secondary" className="people-count">
<Icon type="team" /> {totalCount} total <TeamOutlined /> {totalCount} total
</Text> </Text>
</div> </div>
<div className="bar-containers"> <div className="bar-containers">

@ -17,6 +17,7 @@
*/ */
import React from 'react'; import React from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Modal, Button, Tag, List, Typography } from 'antd'; import { Modal, Button, Tag, List, Typography } from 'antd';
import pSBC from 'shade-blend-color'; import pSBC from 'shade-blend-color';
import { withConfigContext } from '../../../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@ -47,7 +48,11 @@ class LifeCycleDetailsModal extends React.Component {
const { lifecycle } = this.props; const { lifecycle } = this.props;
return ( return (
<div> <div>
<Button size="small" icon="question-circle" onClick={this.showModal}> <Button
size="small"
icon={<QuestionCircleOutlined />}
onClick={this.showModal}
>
Learn more Learn more
</Button> </Button>
<Modal <Modal

@ -17,6 +17,7 @@
*/ */
import React from 'react'; import React from 'react';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { import {
Typography, Typography,
Tag, Tag,
@ -25,7 +26,6 @@ import {
Modal, Modal,
notification, notification,
Steps, Steps,
Icon,
Alert, Alert,
Tabs, Tabs,
} from 'antd'; } from 'antd';
@ -239,7 +239,7 @@ class LifeCycle extends React.Component {
{lifecycleSteps.map((step, index) => ( {lifecycleSteps.map((step, index) => (
<Step <Step
key={index} key={index}
icon={<Icon type={step.icon} />} icon={<LegacyIcon type={step.icon} />}
title={step.title} title={step.title}
disabled={current !== step.step} disabled={current !== step.step}
description={ description={

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Modal, Button, Icon, notification } from 'antd'; import { DeleteOutlined } from '@ant-design/icons';
import { Modal, Button, notification } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler'; import { handleApiError } from '../../../../../../../../../../services/utils/errorHandler';
import { withConfigContext } from '../../../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../../../components/ConfigContext';
@ -77,7 +78,7 @@ class DeleteRelease extends React.Component {
type="danger" type="danger"
onClick={this.showModal} onClick={this.showModal}
> >
<Icon type="delete" /> Delete <DeleteOutlined /> Delete
</Button> </Button>
</> </>
); );

@ -17,16 +17,22 @@
*/ */
import React from 'react'; import React from 'react';
import {
EditOutlined,
MinusOutlined,
PlusOutlined,
UploadOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { import {
Modal, Modal,
Button, Button,
Icon,
notification, notification,
Spin, Spin,
Tooltip, Tooltip,
Upload, Upload,
Input, Input,
Form,
Divider, Divider,
Row, Row,
Col, Col,
@ -397,7 +403,7 @@ class EditReleaseModal extends React.Component {
const config = this.props.context; const config = this.props.context;
const uploadButton = ( const uploadButton = (
<div> <div>
<Icon type="plus" /> <PlusOutlined />
<div className="ant-upload-text">Select</div> <div className="ant-upload-text">Select</div>
</div> </div>
); );
@ -417,7 +423,7 @@ class EditReleaseModal extends React.Component {
type="primary" type="primary"
onClick={this.showModal} onClick={this.showModal}
> >
<Icon type="edit" /> Edit <EditOutlined /> Edit
</Button> </Button>
</Tooltip> </Tooltip>
<Modal <Modal
@ -450,7 +456,7 @@ class EditReleaseModal extends React.Component {
> >
{binaryFiles.length !== 1 && ( {binaryFiles.length !== 1 && (
<Button> <Button>
<Icon type="upload" /> Change <UploadOutlined /> Change
</Button> </Button>
)} )}
</Upload>, </Upload>,
@ -676,7 +682,7 @@ class EditReleaseModal extends React.Component {
<Button <Button
type="dashed" type="dashed"
shape="circle" shape="circle"
icon="minus" icon={<MinusOutlined />}
onClick={() => { onClick={() => {
metaData.splice(index, 1); metaData.splice(index, 1);
this.setState({ this.setState({
@ -691,7 +697,7 @@ class EditReleaseModal extends React.Component {
})} })}
<Button <Button
type="dashed" type="dashed"
icon="plus" icon={<PlusOutlined />}
onClick={this.addNewMetaData} onClick={this.addNewMetaData}
> >
Add Add

@ -17,16 +17,9 @@
*/ */
import React from 'react'; import React from 'react';
import { import { Icon as LegacyIcon } from '@ant-design/compatible';
Divider, import { ShopOutlined } from '@ant-design/icons';
Row, import { Divider, Row, Col, Typography, Button, Tooltip, Alert } from 'antd';
Col,
Typography,
Button,
Icon,
Tooltip,
Alert,
} from 'antd';
import StarRatings from 'react-star-ratings'; import StarRatings from 'react-star-ratings';
import Reviews from './components/Reviews'; import Reviews from './components/Reviews';
import '../../../../../../../../App.css'; import '../../../../../../../../App.css';
@ -98,7 +91,7 @@ class ReleaseView extends React.Component {
<br /> <br />
<Text>Platform : </Text> <Text>Platform : </Text>
<span style={{ fontSize: 20, color: color, textAlign: 'center' }}> <span style={{ fontSize: 20, color: color, textAlign: 'center' }}>
<Icon type={icon} theme={theme} /> <LegacyIcon type={icon} theme={theme} />
</span> </span>
<Divider type="vertical" /> <Divider type="vertical" />
<Text>Version : {release.version}</Text> <Text>Version : {release.version}</Text>
@ -140,7 +133,7 @@ class ReleaseView extends React.Component {
style={{ float: 'right' }} style={{ float: 'right' }}
htmlType="button" htmlType="button"
type="primary" type="primary"
icon="shop" icon={<ShopOutlined />}
disabled={!isAppInstallable} disabled={!isAppInstallable}
onClick={() => { onClick={() => {
window.open( window.open(

@ -17,11 +17,11 @@
*/ */
import React from 'react'; import React from 'react';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { import {
Card, Card,
Tag, Tag,
message, message,
Icon,
Input, Input,
notification, notification,
Divider, Divider,
@ -157,11 +157,10 @@ class ManageCategories extends React.Component {
<> <>
<Divider type="vertical" /> <Divider type="vertical" />
<Tooltip title="edit"> <Tooltip title="edit">
<Icon <EditOutlined
onClick={() => { onClick={() => {
this.openEditModal(categoryName); this.openEditModal(categoryName);
}} }}
type="edit"
/> />
</Tooltip> </Tooltip>
<Divider type="vertical" /> <Divider type="vertical" />
@ -182,7 +181,7 @@ class ManageCategories extends React.Component {
okText="Yes" okText="Yes"
cancelText="No" cancelText="No"
> >
<Icon type="delete" /> <DeleteOutlined />
</Popconfirm> </Popconfirm>
</Tooltip> </Tooltip>
</> </>
@ -399,7 +398,7 @@ class ManageCategories extends React.Component {
{!isAddNewVisible && ( {!isAddNewVisible && (
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
<Button <Button
icon="plus" icon={<PlusOutlined />}
// type="primary" // type="primary"
size="small" size="small"
onClick={() => { onClick={() => {
@ -456,7 +455,7 @@ class ManageCategories extends React.Component {
onClick={this.showInput} onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }} style={{ background: '#fff', borderStyle: 'dashed' }}
> >
<Icon type="plus" /> New Category <PlusOutlined /> New Category
</Tag> </Tag>
)} )}
</TweenOneGroup> </TweenOneGroup>

@ -17,11 +17,11 @@
*/ */
import React from 'react'; import React from 'react';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { import {
Card, Card,
Tag, Tag,
message, message,
Icon,
Input, Input,
notification, notification,
Divider, Divider,
@ -151,11 +151,10 @@ class ManageTags extends React.Component {
<> <>
<Divider type="vertical" /> <Divider type="vertical" />
<Tooltip title="edit"> <Tooltip title="edit">
<Icon <EditOutlined
onClick={() => { onClick={() => {
this.openEditModal(tagName); this.openEditModal(tagName);
}} }}
type="edit"
/> />
</Tooltip> </Tooltip>
<Divider type="vertical" /> <Divider type="vertical" />
@ -176,7 +175,7 @@ class ManageTags extends React.Component {
okText="Yes" okText="Yes"
cancelText="No" cancelText="No"
> >
<Icon type="delete" /> <DeleteOutlined />
</Popconfirm> </Popconfirm>
</Tooltip> </Tooltip>
</> </>
@ -390,7 +389,7 @@ class ManageTags extends React.Component {
{!isAddNewVisible && ( {!isAddNewVisible && (
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
<Button <Button
icon="plus" icon={<PlusOutlined />}
// type="primary" // type="primary"
size="small" size="small"
onClick={() => { onClick={() => {
@ -447,7 +446,7 @@ class ManageTags extends React.Component {
onClick={this.showInput} onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }} style={{ background: '#fff', borderStyle: 'dashed' }}
> >
<Icon type="plus" /> New Tag <PlusOutlined /> New Tag
</Tag> </Tag>
)} )}
</TweenOneGroup> </TweenOneGroup>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { PageHeader, Typography, Breadcrumb, Row, Col, Icon } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Typography, Breadcrumb, Row, Col } from 'antd';
import ManageCategories from './components/Categories'; import ManageCategories from './components/Categories';
import ManageTags from './components/Tags'; import ManageTags from './components/Tags';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -40,7 +41,7 @@ class Manage extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Manage</Breadcrumb.Item> <Breadcrumb.Item>Manage</Breadcrumb.Item>

@ -18,13 +18,13 @@
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
import { DeleteOutlined, HomeOutlined } from '@ant-design/icons';
import { import {
Tag, Tag,
notification, notification,
Table, Table,
Typography, Typography,
Divider, Divider,
Icon,
Popconfirm, Popconfirm,
Button, Button,
} from 'antd'; } from 'antd';
@ -239,7 +239,7 @@ class Pages extends React.Component {
<Button <Button
disabled={page.id === this.state.homePageId} disabled={page.id === this.state.homePageId}
className="btn-warning" className="btn-warning"
icon="home" icon={<HomeOutlined />}
type="link" type="link"
onClick={() => { onClick={() => {
this.updateHomePage(page.id); this.updateHomePage(page.id);
@ -259,7 +259,7 @@ class Pages extends React.Component {
> >
<span className="action"> <span className="action">
<Text type="danger"> <Text type="danger">
<Icon type="delete" /> delete <DeleteOutlined /> delete
</Text> </Text>
</span> </span>
</Popconfirm> </Popconfirm>

@ -17,6 +17,7 @@
*/ */
import React from 'react'; import React from 'react';
import { SyncOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { withConfigContext } from '../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../components/ConfigContext';
@ -69,7 +70,7 @@ class SyncAndroidApps extends React.Component {
loading={loading} loading={loading}
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
type="primary" type="primary"
icon="sync" icon={<SyncOutlined />}
> >
Sync{loading && 'ing...'} Sync{loading && 'ing...'}
</Button> </Button>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { PageHeader, Breadcrumb, Divider, Icon, Result } from 'antd'; import { HomeOutlined } from '@ant-design/icons';
import { PageHeader, Breadcrumb, Divider, Result } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import SyncAndroidApps from './components/SyncAndroidApps'; import SyncAndroidApps from './components/SyncAndroidApps';
import { withConfigContext } from '../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../components/ConfigContext';
@ -41,7 +42,7 @@ class ManageAndroidEnterprise extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Manage</Breadcrumb.Item> <Breadcrumb.Item>Manage</Breadcrumb.Item>

@ -17,7 +17,8 @@
*/ */
import React from 'react'; import React from 'react';
import { Modal, Icon, Table, Avatar } from 'antd'; import { PlusOutlined } from '@ant-design/icons';
import { Modal, Table, Avatar } from 'antd';
import '../../styles.css'; import '../../styles.css';
import { withConfigContext } from '../../../../../../../../../../../../components/ConfigContext'; import { withConfigContext } from '../../../../../../../../../../../../components/ConfigContext';
@ -84,7 +85,7 @@ class AddAppsToClusterModal extends React.Component {
<div className="btn-add-new-wrapper"> <div className="btn-add-new-wrapper">
<div className="btn-add-new"> <div className="btn-add-new">
<button className="btn" onClick={this.showModal}> <button className="btn" onClick={this.showModal}>
<Icon style={{ position: 'relative' }} type="plus" /> <PlusOutlined style={{ position: 'relative' }} />
</button> </button>
</div> </div>
<div className="title">Add app</div> <div className="title">Add app</div>

@ -17,11 +17,18 @@
*/ */
import React from 'react'; import React from 'react';
import {
CaretDownOutlined,
CaretLeftFilled,
CaretRightFilled,
CaretUpOutlined,
CloseCircleFilled,
DeleteOutlined,
} from '@ant-design/icons';
import { import {
Button, Button,
Col, Col,
Divider, Divider,
Icon,
message, message,
notification, notification,
Popconfirm, Popconfirm,
@ -304,7 +311,7 @@ class Cluster extends React.Component {
this.swapProduct(index, index - 1); this.swapProduct(index, index - 1);
}} }}
> >
<Icon type="caret-left" theme="filled" /> <CaretLeftFilled />
</button> </button>
)} )}
</div> </div>
@ -324,7 +331,7 @@ class Cluster extends React.Component {
}} }}
className="btn btn-right" className="btn btn-right"
> >
<Icon type="caret-right" theme="filled" /> <CaretRightFilled />
</button> </button>
</div> </div>
<div className="delete-btn"> <div className="delete-btn">
@ -334,7 +341,7 @@ class Cluster extends React.Component {
this.removeProduct(index); this.removeProduct(index);
}} }}
> >
<Icon type="close-circle" theme="filled" /> <CloseCircleFilled />
</button> </button>
</div> </div>
</> </>
@ -363,7 +370,7 @@ class Cluster extends React.Component {
<Tooltip title="Move Up"> <Tooltip title="Move Up">
<Button <Button
type="link" type="link"
icon="caret-up" icon={<CaretUpOutlined />}
size="large" size="large"
onClick={() => { onClick={() => {
this.props.swapClusters(index, index - 1); this.props.swapClusters(index, index - 1);
@ -374,7 +381,7 @@ class Cluster extends React.Component {
<Tooltip title="Move Down"> <Tooltip title="Move Down">
<Button <Button
type="link" type="link"
icon="caret-down" icon={<CaretDownOutlined />}
size="large" size="large"
onClick={() => { onClick={() => {
this.props.swapClusters(index, index + 1); this.props.swapClusters(index, index + 1);
@ -391,7 +398,7 @@ class Cluster extends React.Component {
> >
<Button <Button
type="danger" type="danger"
icon="delete" icon={<DeleteOutlined />}
shape="circle" shape="circle"
htmlType="button" htmlType="button"
/> />

@ -17,12 +17,12 @@
*/ */
import React from 'react'; import React from 'react';
import { HomeOutlined, PlusOutlined } from '@ant-design/icons';
import { import {
PageHeader, PageHeader,
Typography, Typography,
Breadcrumb, Breadcrumb,
Button, Button,
Icon,
Col, Col,
Row, Row,
notification, notification,
@ -326,7 +326,7 @@ class Page extends React.Component {
<Breadcrumb style={{ paddingBottom: 16 }}> <Breadcrumb style={{ paddingBottom: 16 }}>
<Breadcrumb.Item> <Breadcrumb.Item>
<Link to="/publisher/apps"> <Link to="/publisher/apps">
<Icon type="home" /> Home <HomeOutlined /> Home
</Link> </Link>
</Breadcrumb.Item> </Breadcrumb.Item>
<Breadcrumb.Item>Manage</Breadcrumb.Item> <Breadcrumb.Item>Manage</Breadcrumb.Item>
@ -406,7 +406,7 @@ class Page extends React.Component {
<Button <Button
type="dashed" type="dashed"
shape="round" shape="round"
icon="plus" icon={<PlusOutlined />}
size="large" size="large"
onClick={() => { onClick={() => {
this.toggleAddNewClusterVisibility(true); this.toggleAddNewClusterVisibility(true);

@ -17,12 +17,13 @@
*/ */
import React from 'react'; import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { import {
Typography, Typography,
Row, Row,
Col, Col,
Form,
Icon,
Input, Input,
Button, Button,
message, message,
@ -156,7 +157,7 @@ class NormalLoginForm extends React.Component {
})( })(
<Input <Input
style={{ height: 32 }} style={{ height: 32 }}
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username" placeholder="Username"
/>, />,
)} )}
@ -167,7 +168,7 @@ class NormalLoginForm extends React.Component {
})( })(
<Input <Input
style={{ height: 32 }} style={{ height: 32 }}
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password" type="password"
placeholder="Password" placeholder="Password"
/>, />,

Loading…
Cancel
Save