OS-3669. Update booking labels

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.

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 (
+    <KeyValueLabel
+      keyMessageId="availableIn"
+      value={formatInterval({
+        formatTo: [
+          INTERVAL_DURATION_VALUE_TYPES.WEEKS,
+          INTERVAL_DURATION_VALUE_TYPES.DAYS,
+          INTERVAL_DURATION_VALUE_TYPES.HOURS,
+          INTERVAL_DURATION_VALUE_TYPES.MINUTES
+        ],
+        duration: remained
+      })}
+    />
+  );
+};
+
+export default AvailableIn;

ngui/ui/src/components/CurrentBooking/AvailableIn/index.ts

@@ -0,0 +1,3 @@
+import AvailableIn from "./AvailableIn";
+
+export default AvailableIn;

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 (
     <>
       <KeyValueLabel keyMessageId="user" value={employeeName} />
-      {remained !== INFINITY_SIGN && <BookingTimeMeasure messageId="availableIn" measure={remained} />}
+      <KeyValueLabel keyMessageId="until" value={bookedUntil === Infinity ? <FormattedMessage id="infinite" /> : bookedUntil} />
+      {remained !== Infinity && <AvailableIn remained={remained} />}
       {jiraIssues.length > 0 && <JiraIssuesAttachments issues={jiraIssues} />}
     </>
   );

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 (
+    <KeyValueLabel
+      keyMessageId="duration"
+      value={formatInterval({
+        formatTo: [
+          INTERVAL_DURATION_VALUE_TYPES.WEEKS,
+          INTERVAL_DURATION_VALUE_TYPES.DAYS,
+          INTERVAL_DURATION_VALUE_TYPES.HOURS,
+          INTERVAL_DURATION_VALUE_TYPES.MINUTES
+        ],
+        duration
+      })}
+    />
+  );
+};
+
+export default Duration;

ngui/ui/src/components/UpcomingBooking/Duration/index.ts

@@ -0,0 +1,3 @@
+import Duration from "./Duration";
+
+export default Duration;

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,23 +36,29 @@ const getFiniteBookingTimeMeasuresDefinition = (acquiredSince, releasedAt) => {
   };
 };
 
-export const getBookingTimeMeasuresDefinition = ({ releasedAt, acquiredSince }) => {
+export const getBookingTimeMeasuresDefinition = ({
+  releasedAt,
+  acquiredSince
+}: {
+  releasedAt: number;
+  acquiredSince: number;
+}) => {
   const timeMeasuresDefinition =
     releasedAt === 0
       ? getInfiniteBookingTimeMeasuresDefinition(acquiredSince)
       : getFiniteBookingTimeMeasuresDefinition(acquiredSince, releasedAt);
   return timeMeasuresDefinition;
 };
 
-const UpcomingBooking = ({ employeeName, acquiredSince, releasedAt }) => {
+const UpcomingBooking = ({ employeeName, acquiredSince, releasedAt }: UpcomingBookingProps) => {
   const { bookedSince, bookedUntil, duration } = getBookingTimeMeasuresDefinition({ releasedAt, acquiredSince });
 
   return (
     <>
       <KeyValueLabel keyMessageId="user" value={employeeName} />
       <KeyValueLabel keyMessageId="since" value={bookedSince} />
-      <KeyValueLabel keyMessageId="until" value={bookedUntil} />
-      <BookingTimeMeasure messageId="duration" measure={duration} />
+      <KeyValueLabel keyMessageId="until" value={bookedUntil === Infinity ? <FormattedMessage id="infinite" /> : bookedUntil} />
+      {bookedUntil !== Infinity && <Duration duration={duration} />}
     </>
   );
 };

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;

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",

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({