Skip to content

Commit f455ae0

Browse files
PatrikMatiaskoPatrikMatiasko
committed
removed react-bootstrap & boostrap
1 parent 0b2bd45 commit f455ae0

25 files changed

Lines changed: 165 additions & 805 deletions

File tree

‎src/app/clientApp/Devices/Detail/FirstTimeOnboardingModal/FirstTimeOnboardingModal.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
22
import { useIntl } from 'react-intl'
33
import isFunction from 'lodash/isFunction'
44

5-
import Modal from '../../../../../components/Atomic/Modal'
5+
import Modal, { ModalFooter } from '../../../../../components/Atomic/Modal'
66
import Button from '../../../../../components/Atomic/Button'
77
import { messages as t } from '../../Devices.i18n'
88
import { Props, defaultProps } from './FirstTimeOnboardingModal.types'
@@ -19,11 +19,13 @@ const FirstTimeOnboardingModal: FC<Props> = (props) => {
1919
}
2020

2121
const renderFooter = () => (
22-
<div className='w-100 d-flex justify-content-end'>
23-
<Button dataTestId={firstTimeModalButton} onClick={handleSubmit} variant='primary'>
24-
{_(t.ok)}
25-
</Button>
26-
</div>
22+
<ModalFooter
23+
right={
24+
<Button dataTestId={firstTimeModalButton} onClick={handleSubmit} variant='primary'>
25+
{_(t.ok)}
26+
</Button>
27+
}
28+
/>
2729
)
2830

2931
return (

‎src/app/clientApp/Devices/Detail/IncompleteOnboardingDataModal/IncompleteOnboardingDataModal.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { validate as isValidUUID } from 'uuid'
66
import isEmpty from 'lodash/isEmpty'
77
import { motion, AnimatePresence } from 'framer-motion'
88

9-
import Modal from '../../../../../components/Atomic/Modal'
9+
import Modal, { ModalFooter } from '../../../../../components/Atomic/Modal'
1010
import Button from '../../../../../components/Atomic/Button'
1111
import { WellKnownConfigType } from '../../../../../common/hooks'
1212
import FormLabel from '../../../../../components/Atomic/FormLabel'
@@ -201,18 +201,19 @@ const IncompleteOnboardingDataModal: FC<Props> = (props) => {
201201
}, [onboardingData])
202202

203203
const renderFooter = () => (
204-
<div className='w-100 d-flex justify-content-between align-items-center'>
205-
<div />
206-
<div className='modal-buttons'>
207-
<Button className='modal-button' onClick={handleClose} variant='secondary'>
208-
{_(t.cancel)}
209-
</Button>
210-
211-
<Button className='modal-button' disabled={hasError} onClick={handleSubmit} variant='primary'>
212-
{_(t.onboardDevice)}
213-
</Button>
214-
</div>
215-
</div>
204+
<ModalFooter
205+
right={
206+
<div className='modal-buttons'>
207+
<Button className='modal-button' onClick={handleClose} variant='secondary'>
208+
{_(t.cancel)}
209+
</Button>
210+
211+
<Button className='modal-button' disabled={hasError} onClick={handleSubmit} variant='primary'>
212+
{_(t.onboardDevice)}
213+
</Button>
214+
</div>
215+
}
216+
/>
216217
)
217218

218219
return <Modal onClose={onClose} renderBody={renderBody} renderFooter={renderFooter} show={show} title={_(t.onboardIncompleteModalTitle)} />

‎src/app/clientApp/Devices/DevicesDPSModal/DevicesDPSModal.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC, useMemo, useState } from 'react'
22
import { useIntl } from 'react-intl'
33
import isFunction from 'lodash/isFunction'
44

5-
import Modal from '../../../../components/Atomic/Modal'
5+
import Modal, { ModalFooter } from '../../../../components/Atomic/Modal'
66
import Button from '../../../../components/Atomic/Button'
77
import FormGroup from '../../../../components/Atomic/FormGroup'
88
import FormLabel from '../../../../components/Atomic/FormLabel'
@@ -63,18 +63,19 @@ const DevicesDPSModal: FC<Props> = (props) => {
6363
}
6464

6565
const renderFooter = () => (
66-
<div className='w-100 d-flex justify-content-end'>
67-
<div />
68-
<div className='modal-buttons'>
69-
<Button className='modal-button' onClick={handleClose} variant='secondary'>
70-
{_(t.cancel)}
71-
</Button>
66+
<ModalFooter
67+
right={
68+
<div className='modal-buttons'>
69+
<Button className='modal-button' onClick={handleClose} variant='secondary'>
70+
{_(t.cancel)}
71+
</Button>
7272

73-
<Button className='modal-button' disabled={hasError || inputValue === ''} onClick={handleSubmit} variant='primary'>
74-
{_(t.save)}
75-
</Button>
76-
</div>
77-
</div>
73+
<Button className='modal-button' disabled={hasError || inputValue === ''} onClick={handleSubmit} variant='primary'>
74+
{_(t.save)}
75+
</Button>
76+
</div>
77+
}
78+
/>
7879
)
7980

8081
return (

‎src/app/clientApp/Devices/List/DevicesListHeader/DevicesListHeader.styles.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { css } from '@emotion/react'
2+
3+
export const list = css`
4+
display: flex;
5+
align-items: center;
6+
`
7+
8+
export const leftSpace = css`
9+
margin-left: 12px;
10+
`

‎src/app/clientApp/Devices/List/DevicesListHeader/DevicesListHeader.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ import { messages as t } from '../../Devices.i18n'
88

99
import FindNewDeviceByIp from '../FindNewDeviceByIp'
1010
import { Props } from './DevicesListHeader.types'
11+
import * as styles from './DevicesListHeader.styles'
1112

1213
const DevicesListHeader: FC<Props> = memo((props) => {
1314
const { loading, refresh, openTimeoutModal, handleFlushDevices, i18n } = props
1415
const { formatMessage: _ } = useIntl()
1516

1617
return (
17-
<div className='d-flex align-items-center'>
18+
<div css={styles.list}>
1819
<FindNewDeviceByIp disabled={loading} />
1920
<SplitButton
21+
css={styles.leftSpace}
2022
disabled={loading}
2123
icon={<IconRefresh />}
2224
items={[
@@ -30,7 +32,7 @@ const DevicesListHeader: FC<Props> = memo((props) => {
3032
>
3133
{_(t.discovery)}
3234
</SplitButton>
33-
<Button className='m-l-10' disabled={loading} icon={<IconTrash />} onClick={handleFlushDevices}>
35+
<Button css={styles.leftSpace} disabled={loading} icon={<IconTrash />} onClick={handleFlushDevices}>
3436
{i18n.flushCache}
3537
</Button>
3638
</div>

‎src/app/clientApp/Devices/List/DevicesTimeoutModal/DevicesTimeoutModal.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl'
33
import { useDispatch, useSelector } from 'react-redux'
44
import isFunction from 'lodash/isFunction'
55

6-
import Modal, { ModalStrippedLine } from '../../../../../components/Atomic/Modal'
6+
import Modal, { ModalFooter, ModalStrippedLine } from '../../../../../components/Atomic/Modal'
77
import { messages as t } from '../../Devices.i18n'
88
import Button from '../../../../../components/Atomic/Button'
99
import TimeoutControl from '../../../../../components/Atomic/TimeoutControl'
@@ -50,17 +50,19 @@ const DevicesTimeoutModal: FC<Props> = (props) => {
5050
}
5151

5252
const renderFooter = () => (
53-
<div className='w-100 d-flex justify-content-end'>
54-
<div className='modal-buttons'>
55-
<Button className='modal-button' onClick={() => (onClose ? onClose() : undefined)} variant='secondary'>
56-
{_(t.cancel)}
57-
</Button>
53+
<ModalFooter
54+
right={
55+
<div className='modal-buttons'>
56+
<Button className='modal-button' onClick={() => (onClose ? onClose() : undefined)} variant='secondary'>
57+
{_(t.cancel)}
58+
</Button>
5859

59-
<Button className='modal-button' disabled={ttlHasError} onClick={handleSubmit} variant='primary'>
60-
{_(t.save)}
61-
</Button>
62-
</div>
63-
</div>
60+
<Button className='modal-button' disabled={ttlHasError} onClick={handleSubmit} variant='primary'>
61+
{_(t.save)}
62+
</Button>
63+
</div>
64+
}
65+
/>
6466
)
6567

6668
return (

‎src/app/clientApp/Devices/List/FindNewDeviceByIp/FindNewDeviceByIp.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl'
33
import { useDispatch } from 'react-redux'
44

55
import Button from '../../../../../components/Atomic/Button'
6-
import Modal from '../../../../../components/Atomic/Modal'
6+
import Modal, { ModalFooter } from '../../../../../components/Atomic/Modal'
77
import Notification from '../../../../../components/Atomic/Notification/Toast'
88
import { convertSize, IconPlus } from '../../../../../components/Atomic/Icon'
99
import FormGroup from '../../../../../components/Atomic/FormGroup'
@@ -17,7 +17,7 @@ import { Props } from './FindNewDeviceByIp.types'
1717
import * as styles from '../../Detail/IncompleteOnboardingDataModal/IncompleteOnboardingDataModal.styles'
1818
import notificationId from '../../../notificationId'
1919

20-
const FindNewDeviceByIp: FC<Props> = ({ disabled }) => {
20+
const FindNewDeviceByIp: FC<Props> = ({ disabled, className }) => {
2121
const [fetching, setFetching] = useState<boolean>(false)
2222
const [show, setShow] = useState<boolean>(false)
2323
const [error, setError] = useState<boolean>(false)
@@ -102,10 +102,9 @@ const FindNewDeviceByIp: FC<Props> = ({ disabled }) => {
102102
}
103103
}
104104

105-
const renderFooter = () => {
106-
return (
107-
<div className='w-100 d-flex justify-content-between align-items-center'>
108-
<div />
105+
const renderFooter = () => (
106+
<ModalFooter
107+
right={
109108
<div className='modal-buttons'>
110109
<Button className='modal-button' disabled={fetching} onClick={onClose} variant='secondary'>
111110
{_(t.cancel)}
@@ -115,13 +114,13 @@ const FindNewDeviceByIp: FC<Props> = ({ disabled }) => {
115114
{_(t.addDevice)}
116115
</Button>
117116
</div>
118-
</div>
119-
)
120-
}
117+
}
118+
/>
119+
)
121120

122121
return (
123122
<>
124-
<Button className='m-r-10' disabled={disabled} icon={<IconPlus {...convertSize(20)} />} onClick={() => setShow(true)}>
123+
<Button className={className} disabled={disabled} icon={<IconPlus {...convertSize(20)} />} onClick={() => setShow(true)}>
125124
{_(t.deviceByIp)}
126125
</Button>
127126

‎src/app/clientApp/Devices/List/FindNewDeviceByIp/FindNewDeviceByIp.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export type Props = {
2+
className?: string
23
disabled: boolean
34
}

‎src/app/clientApp/Devices/Resources/DevicesResources/DevicesResources.styles.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { css } from '@emotion/react'
2+
3+
export const switchRow = css`
4+
display: flex;
5+
align-items: center;
6+
justify-content: flex-end;
7+
padding-bottom: 24px;
8+
`

‎src/app/clientApp/Devices/Resources/DevicesResources/DevicesResources.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { FC, useMemo } from 'react'
22
import { useIntl } from 'react-intl'
3-
import classNames from 'classnames'
43

54
import Switch from '../../../../../components/Atomic/Switch'
65
import { useLocalStorage } from '../../../../../common/hooks'
@@ -17,14 +16,12 @@ import { canBeResourceEdited, canCreateResource, getLastPartOfAResourceHref } fr
1716
import { messages as t } from '../../Devices.i18n'
1817
import { Props } from './DevicesResources.types'
1918
import { messages as app } from '../../../App/App.i18n'
19+
import * as styles from './DevicesResources.styles'
2020

2121
export const DevicesResources: FC<Props> = ({ data, deviceId, deviceStatus, isActiveTab, isOwned, loading, onCreate, onDelete, onUpdate, pageSize }) => {
2222
const { formatMessage: _ } = useIntl()
2323
const [treeViewActive, setTreeViewActive] = useLocalStorage('treeViewActive', false)
2424
const isUnregistered = devicesStatuses.UNREGISTERED === deviceStatus
25-
const greyedOutClassName = classNames({
26-
'grayed-out': isUnregistered,
27-
})
2825

2926
const columns = useMemo(
3027
() => [
@@ -235,17 +232,14 @@ export const DevicesResources: FC<Props> = ({ data, deviceId, deviceStatus, isAc
235232

236233
return (
237234
<>
238-
<div className={classNames('d-flex justify-content-between align-items-center', greyedOutClassName)}>
239-
<div />
240-
<div className='d-flex justify-content-end align-items-center' style={{ paddingBottom: 24 }}>
241-
<Switch
242-
checked={treeViewActive}
243-
disabled={isUnregistered}
244-
id='toggle-tree-view'
245-
label={_(t.treeView)}
246-
onChange={() => setTreeViewActive(!treeViewActive)}
247-
/>
248-
</div>
235+
<div css={styles.switchRow}>
236+
<Switch
237+
checked={treeViewActive}
238+
disabled={isUnregistered}
239+
id='toggle-tree-view'
240+
label={_(t.treeView)}
241+
onChange={() => setTreeViewActive(!treeViewActive)}
242+
/>
249243
</div>
250244

251245
{treeViewActive ? (

0 commit comments

Comments
 (0)