From d9dc9293ea0ba5b37067a9baab064a51738701bb Mon Sep 17 00:00:00 2001 From: ek-hystax <33006768+ek-hystax@users.noreply.github.com> Date: Tue, 17 Dec 2024 11:09:41 +0400 Subject: [PATCH] OS-3669. Update booking labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Add the "Until" label for current bookings to indicate the end time. 2. Replace the infinite symbol (∞) with the "Infinite" label for better readability. 3. Remove the "Duration" field for infinite upcoming bookings, as it is redundant. --- .../AvailableIn/AvailableIn.tsx | 35 ++++++++++++++++ .../CurrentBooking/AvailableIn/index.ts | 3 ++ .../CurrentBooking/CurrentBooking.tsx | 11 ++--- .../BookingTimeMeasure/BookingTimeMeasure.tsx | 29 ------------- .../BookingTimeMeasure/index.ts | 3 -- .../UpcomingBooking/Duration/Duration.tsx | 35 ++++++++++++++++ .../UpcomingBooking/Duration/index.ts | 3 ++ .../UpcomingBooking/UpcomingBooking.tsx | 41 ++++++++++++------- .../src/components/UpcomingBooking/index.ts | 3 +- ngui/ui/src/translations/en-US/app.json | 1 + ngui/ui/src/utils/constants.ts | 2 - 11 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 ngui/ui/src/components/CurrentBooking/AvailableIn/AvailableIn.tsx create mode 100644 ngui/ui/src/components/CurrentBooking/AvailableIn/index.ts delete mode 100644 ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/BookingTimeMeasure.tsx delete mode 100644 ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/index.ts create mode 100644 ngui/ui/src/components/UpcomingBooking/Duration/Duration.tsx create mode 100644 ngui/ui/src/components/UpcomingBooking/Duration/index.ts diff --git a/ngui/ui/src/components/CurrentBooking/AvailableIn/AvailableIn.tsx b/ngui/ui/src/components/CurrentBooking/AvailableIn/AvailableIn.tsx new file mode 100644 index 000000000..8ed9c0788 --- /dev/null +++ b/ngui/ui/src/components/CurrentBooking/AvailableIn/AvailableIn.tsx @@ -0,0 +1,35 @@ +import KeyValueLabel from "components/KeyValueLabel/KeyValueLabel"; +import { useFormatIntervalDuration } from "hooks/useFormatIntervalDuration"; +import { INTERVAL_DURATION_VALUE_TYPES } from "utils/datetime"; + +type AvailableInProps = { + remained: { + weeks: number; + days: number; + hours: number; + minutes: number; + seconds: number; + milliseconds: number; + }; +}; + +const AvailableIn = ({ remained }: AvailableInProps) => { + const formatInterval = useFormatIntervalDuration(); + + return ( + + ); +}; + +export default AvailableIn; diff --git a/ngui/ui/src/components/CurrentBooking/AvailableIn/index.ts b/ngui/ui/src/components/CurrentBooking/AvailableIn/index.ts new file mode 100644 index 000000000..ca485c37c --- /dev/null +++ b/ngui/ui/src/components/CurrentBooking/AvailableIn/index.ts @@ -0,0 +1,3 @@ +import AvailableIn from "./AvailableIn"; + +export default AvailableIn; diff --git a/ngui/ui/src/components/CurrentBooking/CurrentBooking.tsx b/ngui/ui/src/components/CurrentBooking/CurrentBooking.tsx index 8c70b7411..3f1dd05aa 100644 --- a/ngui/ui/src/components/CurrentBooking/CurrentBooking.tsx +++ b/ngui/ui/src/components/CurrentBooking/CurrentBooking.tsx @@ -1,16 +1,17 @@ +import { FormattedMessage } from "react-intl"; import JiraIssuesAttachments from "components/JiraIssuesAttachments"; import KeyValueLabel from "components/KeyValueLabel/KeyValueLabel"; -import { BookingTimeMeasure, getBookingTimeMeasuresDefinition } from "components/UpcomingBooking"; -import { INFINITY_SIGN } from "utils/constants"; +import { getBookingTimeMeasuresDefinition } from "components/UpcomingBooking"; +import AvailableIn from "./AvailableIn"; -// TODO: generalize Current and Upcoming bookings const CurrentBooking = ({ employeeName, acquiredSince, releasedAt, jiraIssues = [] }) => { - const { remained } = getBookingTimeMeasuresDefinition({ releasedAt, acquiredSince }); + const { remained, bookedUntil } = getBookingTimeMeasuresDefinition({ releasedAt, acquiredSince }); return ( <> - {remained !== INFINITY_SIGN && } + : bookedUntil} /> + {remained !== Infinity && } {jiraIssues.length > 0 && } ); diff --git a/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/BookingTimeMeasure.tsx b/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/BookingTimeMeasure.tsx deleted file mode 100644 index 25a16c1ba..000000000 --- a/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/BookingTimeMeasure.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import KeyValueLabel from "components/KeyValueLabel/KeyValueLabel"; -import { useFormatIntervalDuration } from "hooks/useFormatIntervalDuration"; -import { INFINITY_SIGN } from "utils/constants"; -import { INTERVAL_DURATION_VALUE_TYPES } from "utils/datetime"; - -const BookingTimeMeasure = ({ messageId, measure }) => { - const formatInterval = useFormatIntervalDuration(); - - return ( - - ); -}; - -export default BookingTimeMeasure; diff --git a/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/index.ts b/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/index.ts deleted file mode 100644 index e4faeda84..000000000 --- a/ngui/ui/src/components/UpcomingBooking/BookingTimeMeasure/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import BookingTimeMeasure from "./BookingTimeMeasure"; - -export default BookingTimeMeasure; diff --git a/ngui/ui/src/components/UpcomingBooking/Duration/Duration.tsx b/ngui/ui/src/components/UpcomingBooking/Duration/Duration.tsx new file mode 100644 index 000000000..9d2435a31 --- /dev/null +++ b/ngui/ui/src/components/UpcomingBooking/Duration/Duration.tsx @@ -0,0 +1,35 @@ +import KeyValueLabel from "components/KeyValueLabel/KeyValueLabel"; +import { useFormatIntervalDuration } from "hooks/useFormatIntervalDuration"; +import { INTERVAL_DURATION_VALUE_TYPES } from "utils/datetime"; + +type DurationProps = { + duration: { + weeks: number; + days: number; + hours: number; + minutes: number; + seconds: number; + milliseconds: number; + }; +}; + +const Duration = ({ duration }: DurationProps) => { + const formatInterval = useFormatIntervalDuration(); + + return ( + + ); +}; + +export default Duration; diff --git a/ngui/ui/src/components/UpcomingBooking/Duration/index.ts b/ngui/ui/src/components/UpcomingBooking/Duration/index.ts new file mode 100644 index 000000000..3a28ffcc7 --- /dev/null +++ b/ngui/ui/src/components/UpcomingBooking/Duration/index.ts @@ -0,0 +1,3 @@ +import Duration from "./Duration"; + +export default Duration; diff --git a/ngui/ui/src/components/UpcomingBooking/UpcomingBooking.tsx b/ngui/ui/src/components/UpcomingBooking/UpcomingBooking.tsx index 952c9a055..3289c546f 100644 --- a/ngui/ui/src/components/UpcomingBooking/UpcomingBooking.tsx +++ b/ngui/ui/src/components/UpcomingBooking/UpcomingBooking.tsx @@ -1,17 +1,24 @@ +import { FormattedMessage } from "react-intl"; import KeyValueLabel from "components/KeyValueLabel/KeyValueLabel"; -import { INFINITY_SIGN } from "utils/constants"; import { EN_FULL_FORMAT, format, secondsToMilliseconds, intervalToDuration } from "utils/datetime"; -import BookingTimeMeasure from "./BookingTimeMeasure"; +import Duration from "./Duration"; -const getInfiniteBookingTimeMeasuresDefinition = (acquiredSince) => ({ - duration: INFINITY_SIGN, - remained: INFINITY_SIGN, - bookedUntil: INFINITY_SIGN, - // TODO: generalize getBookedSince in InfiniteBookingTimeMeasures and FiniteBookingTimeMeasures - bookedSince: format(secondsToMilliseconds(acquiredSince), EN_FULL_FORMAT) -}); +type UpcomingBookingProps = { + employeeName: string; + acquiredSince: number; + releasedAt: number; +}; + +const getInfiniteBookingTimeMeasuresDefinition = (acquiredSince: number) => + ({ + duration: Infinity, + remained: Infinity, + bookedUntil: Infinity, + // TODO: generalize getBookedSince in InfiniteBookingTimeMeasures and FiniteBookingTimeMeasures + bookedSince: format(secondsToMilliseconds(acquiredSince), EN_FULL_FORMAT) + }) as const; -const getFiniteBookingTimeMeasuresDefinition = (acquiredSince, releasedAt) => { +const getFiniteBookingTimeMeasuresDefinition = (acquiredSince: number, releasedAt: number) => { const acquiredSinceInMilliseconds = secondsToMilliseconds(acquiredSince); const releasedAtInMilliseconds = secondsToMilliseconds(releasedAt); @@ -29,7 +36,13 @@ const getFiniteBookingTimeMeasuresDefinition = (acquiredSince, releasedAt) => { }; }; -export const getBookingTimeMeasuresDefinition = ({ releasedAt, acquiredSince }) => { +export const getBookingTimeMeasuresDefinition = ({ + releasedAt, + acquiredSince +}: { + releasedAt: number; + acquiredSince: number; +}) => { const timeMeasuresDefinition = releasedAt === 0 ? getInfiniteBookingTimeMeasuresDefinition(acquiredSince) @@ -37,15 +50,15 @@ export const getBookingTimeMeasuresDefinition = ({ releasedAt, acquiredSince }) return timeMeasuresDefinition; }; -const UpcomingBooking = ({ employeeName, acquiredSince, releasedAt }) => { +const UpcomingBooking = ({ employeeName, acquiredSince, releasedAt }: UpcomingBookingProps) => { const { bookedSince, bookedUntil, duration } = getBookingTimeMeasuresDefinition({ releasedAt, acquiredSince }); return ( <> - - + : bookedUntil} /> + {bookedUntil !== Infinity && } ); }; diff --git a/ngui/ui/src/components/UpcomingBooking/index.ts b/ngui/ui/src/components/UpcomingBooking/index.ts index b1dd46f2a..1db1d6b19 100644 --- a/ngui/ui/src/components/UpcomingBooking/index.ts +++ b/ngui/ui/src/components/UpcomingBooking/index.ts @@ -1,5 +1,4 @@ -import BookingTimeMeasure from "./BookingTimeMeasure"; import UpcomingBooking, { getBookingTimeMeasuresDefinition } from "./UpcomingBooking"; -export { BookingTimeMeasure, getBookingTimeMeasuresDefinition }; +export { getBookingTimeMeasuresDefinition }; export default UpcomingBooking; diff --git a/ngui/ui/src/translations/en-US/app.json b/ngui/ui/src/translations/en-US/app.json index 22b2b47f1..60e5ce9d8 100644 --- a/ngui/ui/src/translations/en-US/app.json +++ b/ngui/ui/src/translations/en-US/app.json @@ -903,6 +903,7 @@ "incorrectDateFormat": "Incorrect date format", "independentCompute": "Independent compute", "independentComputeTooltip": "Region is recommended for running new workloads that are mostly independent from the existing ones", + "infinite": "Infinite", "infinity": "Infinity", "info": "Info", "infrastructure": "Infrastructure", diff --git a/ngui/ui/src/utils/constants.ts b/ngui/ui/src/utils/constants.ts index 1f27179bc..0851c7844 100644 --- a/ngui/ui/src/utils/constants.ts +++ b/ngui/ui/src/utils/constants.ts @@ -515,8 +515,6 @@ export const ALERT_SEVERITY = Object.freeze({ WARNING: "warning" }); -export const INFINITY_SIGN = "∞"; - export const ENVIRONMENT_SOFTWARE_FIELD = "Software "; export const ENVIRONMENT_JIRA_TICKETS_FIELD = "Jira tickets "; export const ENVIRONMENT_TOUR_IDS_BY_DYNAMIC_FIELDS = Object.freeze({