Skip to content

Commit c3f78af

Browse files
AbhishekA1509AbhishekA1509
committed
Refactor date picker components and remove deprecated code
- Introduced a new DateTimePicker component to replace the existing SingleDatePicker and DayPickerRangeController. - Updated DeploymentMetrics and CustomLogsModal to utilize the new DateTimePicker for date selection. - Removed unused styles and components related to the old date picker implementation. - Added utility functions for generating date range options for the new date picker. - Cleaned up imports and adjusted type definitions to accommodate the new date handling logic.
1 parent e5a9b92 commit c3f78af

File tree

24 files changed

+244
-933
lines changed

24 files changed

+244
-933
lines changed

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"moment": "^2.29.4",
2424
"query-string": "^7.1.1",
2525
"react": "^17.0.2",
26-
"react-dates": "^21.8.0",
2726
"react-dom": "^17.0.2",
2827
"react-ga4": "^1.4.1",
2928
"react-gtm-module": "^2.0.11",
@@ -74,7 +73,6 @@
7473
"@types/jest": "^27.4.1",
7574
"@types/node": "20.11.0",
7675
"@types/react": "17.0.39",
77-
"@types/react-dates": "^21.8.6",
7876
"@types/react-dom": "17.0.13",
7977
"@types/react-router-dom": "^5.3.3",
8078
"@types/react-transition-group": "^4.4.4",

‎src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ import {
2323
ButtonStyleType,
2424
ButtonVariantType,
2525
ComponentSizeType,
26+
DATE_TIME_FORMATS,
2627
FeatureTitleWithInfo,
2728
GenericFilterEmptyState,
2829
} from '@devtron-labs/devtron-fe-common-lib'
2930

3031
import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-interactive.svg'
3132
import { ReactComponent as Key } from '../../../../assets/icons/ic-key-bulb.svg'
3233
import { ReactComponent as Edit } from '../../../../assets/icons/ic-pencil.svg'
33-
import { HEADER_TEXT, MomentDateFormat } from '../../../../config'
34+
import { HEADER_TEXT } from '../../../../config'
3435
import { APITokenListType, TokenListType } from './apiToken.type'
3536
import { isTokenExpired } from './apiToken.utils'
3637
import DeleteAPITokenModal from './DeleteAPITokenModal'
@@ -126,7 +127,9 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
126127
</div>
127128
<div className="dc__ellipsis-right">
128129
{list.lastUsedAt
129-
? moment(list.lastUsedAt).format(MomentDateFormat)
130+
? moment(list.lastUsedAt).format(
131+
DATE_TIME_FORMATS.WEEKDAY_WITH_DATE_MONTH_AND_YEAR,
132+
)
130133
: 'Never used'}
131134
</div>
132135
<div>{list.lastUsedByIp ? list.lastUsedByIp : '-'}</div>
@@ -136,7 +139,7 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
136139
) : (
137140
<>
138141
{isTokenExpired(list.expireAtInMs) ? 'Expired on ' : ''}
139-
{moment(list.expireAtInMs).format(MomentDateFormat)}
142+
{moment(list.expireAtInMs).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
140143
</>
141144
)}
142145
</div>

‎src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import APITokenList from './APITokenList'
3333
import CreateAPIToken from './CreateAPIToken'
3434
import EditAPIToken from './EditAPIToken'
3535
import { getGeneratedAPITokenList } from './service'
36+
import { ExpirationDateSelectOptionType } from './types'
3637

3738
import './apiToken.scss'
3839

@@ -48,7 +49,7 @@ const ApiTokens = () => {
4849
const [errorStatusCode, setErrorStatusCode] = useState(0)
4950
const [showGenerateModal, setShowGenerateModal] = useState(false)
5051
const [showRegenerateTokenModal, setShowRegenerateTokenModal] = useState(false)
51-
const [selectedExpirationDate, setSelectedExpirationDate] = useState<{ label: string; value: number }>({
52+
const [selectedExpirationDate, setSelectedExpirationDate] = useState<ExpirationDateSelectOptionType>({
5253
label: '30 days',
5354
value: 30,
5455
})

‎src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
/* eslint-disable jsx-a11y/label-has-associated-control */
1919
import { useEffect, useState } from 'react'
2020
import { useHistory, useRouteMatch } from 'react-router-dom'
21-
import { Moment } from 'moment'
21+
import dayjs from 'dayjs'
2222

2323
import {
2424
CustomInput,
@@ -49,6 +49,7 @@ import ExpirationDate from './ExpirationDate'
4949
import GenerateActionButton from './GenerateActionButton'
5050
import GenerateModal from './GenerateModal'
5151
import { createGeneratedAPIToken } from './service'
52+
import { ExpirationDateSelectOptionType } from './types'
5253
import { ValidationRules } from './validationRules'
5354

5455
const showStatus = !!importComponentFromFELibrary('StatusHeaderCell', null, 'function')
@@ -103,7 +104,7 @@ const CreateAPIToken = ({
103104
isSaveDisabled,
104105
allowManageAllAccess,
105106
} = usePermissionConfiguration()
106-
const [customDate, setCustomDate] = useState<Moment>(null)
107+
const [customDate, setCustomDate] = useState<Date>(dayjs().add(1, 'day').toDate())
107108
const [tokenResponse, setTokenResponse] = useState<TokenResponseType>({
108109
success: false,
109110
token: '',
@@ -147,11 +148,11 @@ const CreateAPIToken = ({
147148
}
148149
}
149150

150-
const onCustomDateChange = (event) => {
151-
setCustomDate(event)
151+
const onCustomDateChange = (date: Date) => {
152+
setCustomDate(date)
152153
setFormData({
153154
...formData,
154-
expireAtInMs: event.valueOf(),
155+
expireAtInMs: date.valueOf(),
155156
dateType: 'Custom',
156157
})
157158

@@ -167,12 +168,15 @@ const CreateAPIToken = ({
167168
history.push(`${match.path.split('create')[0]}list`)
168169
}
169170

170-
const onChangeSelectFormData = (selectedOption: { label: string; value: number }) => {
171+
const onChangeSelectFormData = (selectedOption: ExpirationDateSelectOptionType) => {
171172
setSelectedExpirationDate(selectedOption)
173+
const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value)
174+
172175
setFormData({
173176
...formData,
174-
expireAtInMs: selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value),
175-
dateType: selectedOption.label,
177+
expireAtInMs:
178+
typeof selectedOption.value === 'number' ? parsedMilliseconds : selectedOption.value.valueOf(),
179+
dateType: selectedOption.label as string,
176180
})
177181
}
178182

@@ -283,7 +287,7 @@ const CreateAPIToken = ({
283287
placeholder="Enter a description to remember where you have used this token"
284288
error={formDataErrorObj.invalidDescription && formDataErrorObj.invalidDescriptionMessage}
285289
/>
286-
<label className="form__row">
290+
<div className="form__row">
287291
<div className="flex left">
288292
<ExpirationDate
289293
selectedExpirationDate={selectedExpirationDate}
@@ -299,7 +303,7 @@ const CreateAPIToken = ({
299303
Custom expiration can't be blank. Please select a date.
300304
</span>
301305
)}
302-
</label>
306+
</div>
303307
<div className="dc__border-top" />
304308
<PermissionConfigurationForm showUserPermissionGroupSelector isAddMode />
305309
</div>

‎src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
/* eslint-disable jsx-a11y/label-has-associated-control */
1818
import React, { useEffect, useMemo, useState } from 'react'
1919
import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
20+
import dayjs from 'dayjs'
2021
import moment from 'moment'
2122

2223
import {
@@ -26,6 +27,7 @@ import {
2627
ButtonVariantType,
2728
ClipboardButton,
2829
CustomInput,
30+
DATE_TIME_FORMATS,
2931
ErrorScreenManager,
3032
Icon,
3133
InfoBlock,
@@ -39,7 +41,6 @@ import {
3941
} from '@devtron-labs/devtron-fe-common-lib'
4042

4143
import { importComponentFromFELibrary } from '../../../../components/common'
42-
import { MomentDateFormat } from '../../../../config'
4344
import { API_COMPONENTS } from '../../../../config/constantMessaging'
4445
import { createOrUpdateUser, getUserById } from '../authorization.service'
4546
import { getDefaultUserStatusAndTimeout } from '../libUtils'
@@ -89,7 +90,7 @@ const EditAPIToken = ({
8990
const { serverMode } = useMainContext()
9091
const [loader, setLoader] = useState(false)
9192

92-
const [customDate, setCustomDate] = useState<number>(undefined)
93+
const [customDate, setCustomDate] = useState<Date>(dayjs().add(1, 'day').toDate())
9394
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
9495
const [invalidDescription, setInvalidDescription] = useState(false)
9596

@@ -177,7 +178,7 @@ const EditAPIToken = ({
177178
return (
178179
<span className="fw-6 cn-9">
179180
This token {isTokenExpired(editData.expireAtInMs) ? 'expired' : 'expires'} on&nbsp;
180-
{moment(editData.expireAtInMs).format(MomentDateFormat)}.
181+
{moment(editData.expireAtInMs).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}.
181182
</span>
182183
)
183184
}

‎src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,45 +17,56 @@
1717
/* eslint-disable react/prop-types */
1818
import moment from 'moment'
1919

20-
import { InfoBlock, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
20+
import {
21+
ComponentSizeType,
22+
DATE_TIME_FORMATS,
23+
DateTimePicker,
24+
InfoBlock,
25+
SelectPicker,
26+
} from '@devtron-labs/devtron-fe-common-lib'
2127

22-
import { SingleDatePickerComponent } from '../../../../components/common'
23-
import { MomentDateFormat } from '../../../../config'
2428
import { getDateInMilliseconds, getOptions } from './apiToken.utils'
29+
import { ExpirationDateProps } from './types'
2530

26-
const ExpirationDate = ({ selectedExpirationDate, onChangeSelectFormData, handleDatesChange, customDate }) => (
31+
const ExpirationDate = ({
32+
selectedExpirationDate,
33+
onChangeSelectFormData,
34+
handleDatesChange,
35+
customDate,
36+
}: ExpirationDateProps) => (
2737
<div className="w-100">
2838
<div className="flex left bottom dc__gap-16">
2939
<div className="w-200">
30-
<SelectPicker
40+
<SelectPicker<number | Date, false>
3141
label="Expiration"
3242
required
3343
inputId="token-expiry-duration"
3444
value={selectedExpirationDate}
3545
options={getOptions(customDate)}
3646
classNamePrefix="select-token-expiry-duration"
3747
onChange={onChangeSelectFormData}
48+
size={ComponentSizeType.large}
3849
/>
3950
</div>
4051

4152
{selectedExpirationDate.label !== 'Custom' && selectedExpirationDate.label !== 'No expiration' && (
4253
<span className="fs-13 fw-4 cn-9">
4354
<span>This token will expire on</span>&nbsp;
44-
{moment(getDateInMilliseconds(selectedExpirationDate.value)).format(MomentDateFormat)}
55+
{moment(getDateInMilliseconds(selectedExpirationDate.value)).format(
56+
DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM,
57+
)}
4558
</span>
4659
)}
4760
{selectedExpirationDate.label === 'No expiration' && (
4861
<span className="ml-16 fs-13 fw-4 cn-9">The token will never expire!</span>
4962
)}
5063
{selectedExpirationDate.label === 'Custom' && (
51-
<div className="w-200 ml-16">
52-
<SingleDatePickerComponent
53-
date={customDate}
54-
handleDatesChange={handleDatesChange}
55-
readOnly
56-
isTodayBlocked
57-
/>
58-
</div>
64+
<DateTimePicker
65+
id="expiration-date-picker"
66+
date={customDate}
67+
onChange={handleDatesChange}
68+
isTodayBlocked
69+
/>
5970
)}
6071
</div>
6172
{selectedExpirationDate.label === 'No expiration' && (

‎src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ExpirationDate from './ExpirationDate'
2626
import GenerateActionButton from './GenerateActionButton'
2727
import GenerateModal from './GenerateModal'
2828
import { updateGeneratedAPIToken } from './service'
29+
import { ExpirationDateProps, ExpirationDateSelectOptionType } from './types'
2930

3031
const RegeneratedModal = ({
3132
close,
@@ -38,7 +39,7 @@ const RegeneratedModal = ({
3839
}: RegenerateModalType) => {
3940
const [loader, setLoader] = useState(false)
4041
const [showGenerateModal, setShowGenerateModal] = useState(false)
41-
const [selectedExpirationDate, setSelectedExpirationDate] = useState<{ label: string; value: number }>({
42+
const [selectedExpirationDate, setSelectedExpirationDate] = useState<ExpirationDateSelectOptionType>({
4243
label: '30 days',
4344
value: 30,
4445
})
@@ -48,18 +49,22 @@ const RegeneratedModal = ({
4849
)
4950
const [invalidCustomDate, setInvalidCustomDate] = useState(false)
5051

51-
const onChangeSelectFormData = (selectedOption: { label: string; value: number }) => {
52-
setRegeneratedExpireAtInMs(selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value))
52+
const onChangeSelectFormData: ExpirationDateProps['onChangeSelectFormData'] = (selectedOption) => {
53+
const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value)
54+
55+
setRegeneratedExpireAtInMs(
56+
typeof selectedOption.value === 'number' ? parsedMilliseconds : selectedOption.value.valueOf(),
57+
)
5358
setSelectedExpirationDate(selectedOption)
5459

5560
if (selectedOption.label === 'Custom' && invalidCustomDate) {
5661
setInvalidCustomDate(false)
5762
}
5863
}
5964

60-
const handleDatesChange = (event): void => {
61-
setCustomDate(event)
62-
setRegeneratedExpireAtInMs(event.valueOf())
65+
const handleDatesChange = (date: Date): void => {
66+
setCustomDate(date)
67+
setRegeneratedExpireAtInMs(date.valueOf())
6368

6469
if (invalidCustomDate) {
6570
setInvalidCustomDate(false)

‎src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import React from 'react'
1818

1919
import { GenericModalProps } from '@devtron-labs/devtron-fe-common-lib'
2020

21+
import { ExpirationDateSelectOptionType } from './types'
22+
2123
export interface FormType {
2224
name: string
2325
description: string
@@ -36,8 +38,8 @@ export interface GenerateTokenType {
3638
showGenerateModal: boolean
3739
setShowGenerateModal: React.Dispatch<React.SetStateAction<boolean>>
3840
handleGenerateTokenActionButton: () => void
39-
setSelectedExpirationDate
40-
selectedExpirationDate
41+
setSelectedExpirationDate: React.Dispatch<React.SetStateAction<ExpirationDateSelectOptionType>>
42+
selectedExpirationDate: ExpirationDateSelectOptionType
4143
reload: () => void
4244
}
4345

@@ -95,8 +97,8 @@ export interface RegenerateModalType {
9597
close: () => void
9698
setShowRegeneratedModal: React.Dispatch<React.SetStateAction<boolean>>
9799
editData: EditDataType
98-
customDate: number
99-
setCustomDate: React.Dispatch<React.SetStateAction<number>>
100+
customDate: Date
101+
setCustomDate: React.Dispatch<React.SetStateAction<Date>>
100102
reload: () => void
101103
redirectToTokenList: () => void
102104
}

‎src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.utils.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
18+
1719
import { TokenListType } from './apiToken.type'
1820

19-
export function getOptions(customDate) {
20-
return [
21-
{ value: 7, label: '7 days' },
22-
{ value: 30, label: '30 days' },
23-
{ value: 60, label: '60 days' },
24-
{ value: 90, label: '90 days' },
25-
{ value: customDate, label: 'Custom' },
26-
{ value: 0, label: 'No expiration' },
27-
]
28-
}
21+
export const getOptions = (customDate: Date): SelectPickerOptionType<number | Date>[] => [
22+
{ value: 7, label: '7 days' },
23+
{ value: 30, label: '30 days' },
24+
{ value: 60, label: '60 days' },
25+
{ value: 90, label: '90 days' },
26+
{ value: customDate, label: 'Custom' },
27+
{ value: 0, label: 'No expiration' },
28+
]
2929

3030
const millisecondsInDay = 86400000
3131

‎src/Pages/GlobalConfigurations/Authorization/APITokens/types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
2+
3+
export type ExpirationDateSelectOptionType = SelectPickerOptionType<number | Date>
4+
5+
export interface ExpirationDateProps {
6+
selectedExpirationDate: ExpirationDateSelectOptionType
7+
onChangeSelectFormData: (value: ExpirationDateSelectOptionType) => void
8+
handleDatesChange: (date: Date) => void
9+
customDate: Date
10+
}

0 commit comments

Comments
 (0)