chore(pf5): upgrade Recording view to Patternfly 5

locales/en/common.json

@@ -52,6 +52,7 @@
   "OK": "OK",
   "PRESERVED_ARCHIVES": "Preserved Archives",
   "PRODUCTION": "PRODUCTION",
+  "REFRESH": "Refresh",
   "REMOVE": "Remove",
   "RENAME": "Rename",
   "RESET": "Reset",

locales/en/public.json

@@ -249,7 +249,8 @@
       "DISPLAY_SELECTED_DATETIME": "Displayed selected datetime",
       "TABS": "Select a date or time tab"
     },
-    "SELECTED_DATETIME": "Selected DateTime"
+    "SELECTED_DATETIME": "Selected Date and Time",
+    "SELECTED_TIMEZONE": "Selected Timezone"
   },
   "ERROR_BOUNDARY": {
     "ERROR_MESSAGE": "Reason: {{message}}",

src/app/CreateRecording/CreateRecording.tsx

@@ -15,7 +15,7 @@
  */
 
 import { TargetView } from '@app/TargetView/TargetView';
-import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
+import { Card, CardBody, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import * as React from 'react';
 import { CustomRecordingForm } from './CustomRecordingForm';
 import { SnapshotRecordingForm } from './SnapshotRecordingForm';
@@ -33,10 +33,10 @@ export const CreateRecording: React.FC = () => {
       <Card>
         <CardBody>
           <Tabs activeKey={activeTab} onSelect={onTabSelect}>
-            <Tab eventKey={0} title="Custom Flight Recording">
+            <Tab eventKey={0} title={<TabTitleText>Custom Flight Recording</TabTitleText>}>
               <CustomRecordingForm />
             </Tab>
-            <Tab eventKey={1} title="Snapshot Recording">
+            <Tab eventKey={1} title={<TabTitleText>Snapshot Recording</TabTitleText>}>
               <SnapshotRecordingForm />
             </Tab>
           </Tabs>

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -48,6 +48,7 @@ import {
   Split,
   SplitItem,
   Text,
+  TextContent,
   TextInput,
   TextVariants,
   Tooltip,
@@ -403,11 +404,13 @@ export const CustomRecordingForm: React.FC = () => {
 
   return (
     <>
-      <Text component={TextVariants.small}>
-        JDK Flight Recordings are compact records of events which have occurred within the Target JVM. Many event types
-        are built in to the JVM itself, while others are user defined.
-      </Text>
       <Form isHorizontal>
+        <TextContent>
+          <Text component={TextVariants.p}>
+            JDK Flight Recordings are compact records of events which have occurred within the Target JVM. Many event
+            types are built in to the JVM itself, while others are user defined.
+          </Text>
+        </TextContent>
         <FormGroup label="Name" isRequired fieldId="recording-name">
           <TextInput
             value={formData.name}
@@ -498,7 +501,7 @@ export const CustomRecordingForm: React.FC = () => {
               <HelperTextItem variant={!formData.template?.name ? ValidatedOptions.default : ValidatedOptions.success}>
                 {formData.template?.name
                   ? 'The Event Template to be applied in this Recording'
-                  : 'A Template must be selected'}
+                  : 'A Template must be selected.'}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
@@ -522,6 +525,12 @@ export const CustomRecordingForm: React.FC = () => {
               </Tooltip>
             }
           >
+            <RecordingLabelFields
+              labels={formData.labels}
+              setLabels={handleLabelsChange}
+              setValid={handleLabelValidationChange}
+              isDisabled={loading}
+            />
             <FormHelperText>
               <HelperText>
                 <HelperTextItem
@@ -534,12 +543,6 @@ export const CustomRecordingForm: React.FC = () => {
                 </HelperTextItem>
               </HelperText>
             </FormHelperText>
-            <RecordingLabelFields
-              labels={formData.labels}
-              setLabels={handleLabelsChange}
-              setValid={handleLabelValidationChange}
-              isDisabled={loading}
-            />
           </FormGroup>
         </ExpandableSection>
         <ExpandableSection
@@ -614,6 +617,7 @@ export const CustomRecordingForm: React.FC = () => {
               </SplitItem>
               <SplitItem>
                 <FormSelect
+                  className="recording-create__form_select"
                   value={formData.maxAgeUnit}
                   onChange={handleMaxAgeUnitChange}
                   aria-label="Max Age units Input"

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -18,7 +18,7 @@ import { authFailMessage, isAuthFail, missingSSLMessage } from '@app/ErrorView/t
 import { LoadingProps } from '@app/Shared/Components/types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { ActionGroup, Button, Form, Text, TextVariants } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { first } from 'rxjs';
@@ -109,12 +109,14 @@ export const SnapshotRecordingForm: React.FC<SnapshotRecordingFormProps> = (_) =
   return (
     <>
       <Form isHorizontal>
-        <Text component={TextVariants.p}>
-          A Snapshot Recording is one which contains all information about all events that have been captured in the
-          current session by <i>other,&nbsp; non-Snapshot</i> Recordings. Snapshots do not themselves define which
-          events are enabled, their thresholds, or any other options. A Snapshot is only ever in the STOPPED state from
-          the moment it is created.
-        </Text>
+        <TextContent>
+          <Text component={TextVariants.p}>
+            A Snapshot Recording is one which contains all information about all events that have been captured in the
+            current session by <i>other, non-Snapshot</i> Recordings. Snapshots do not themselves define which events
+            are enabled, their thresholds, or any other options. A Snapshot is only ever in the STOPPED state from the
+            moment it is created.
+          </Text>
+        </TextContent>
         <ActionGroup>
           <Button variant="primary" onClick={handleCreateSnapshot} isDisabled={loading} {...createButtonLoadingProps}>
             {loading ? 'Creating' : 'Create'}

src/app/DateTimePicker/DateTimePicker.tsx

@@ -22,8 +22,6 @@ import {
   Bullseye,
   Button,
   CalendarMonth,
-  Flex,
-  FlexItem,
   Form,
   FormGroup,
   Tab,
@@ -158,20 +156,16 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({ onSelect, onDism
         </Tab>
       </Tabs>
       <FormGroup label={t('DateTimePicker.SELECTED_DATETIME')}>
-        <Flex>
-          <FlexItem>
-            <TextInput
-              id="selected-datetime"
-              aria-label={t('DateTimePicker.ARIA_LABELS.DISPLAY_SELECTED_DATETIME') || ''}
-              className="datetime-picker__datetime-selected-display"
-              readOnly
-              value={selectedDatetimeDisplay}
-            />
-          </FlexItem>
-          <FlexItem>
-            <TimezonePicker menuAppendTo={document.body} onTimezoneChange={setTimezone} selected={timezone} isCompact />
-          </FlexItem>
-        </Flex>
+        <TextInput
+          id="selected-datetime"
+          aria-label={t('DateTimePicker.ARIA_LABELS.DISPLAY_SELECTED_DATETIME') || ''}
+          className="datetime-picker__datetime-selected-display"
+          readOnlyVariant="default"
+          value={selectedDatetimeDisplay}
+        />
+      </FormGroup>
+      <FormGroup label={t('DateTimePicker.SELECTED_TIMEZONE')}>
+        <TimezonePicker onTimezoneChange={setTimezone} selected={timezone} />
       </FormGroup>
       <ActionGroup style={{ marginTop: 0 }}>
         <Button variant="primary" onClick={handleSubmit}>

src/app/DateTimePicker/TimePicker.tsx

@@ -108,9 +108,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
                   onChange={onSecondSelect}
                 />
               </LevelItem>
-              {is24h ? (
-                <></>
-              ) : (
+              {is24h ? null : (
                 <LevelItem key={'meridiem'}>
                   <MeridiemPicker isAM={meridiemAM} onSelect={onMeridiemSelect} />
                 </LevelItem>
@@ -200,16 +198,14 @@ const TimeSpinner: React.FC<TimeSpinnerProps> = ({ variant, onChange, selected,
             {label}
           </Title>
         </StackItem>
-      ) : (
-        <></>
-      )}
+      ) : null}
       <StackItem key={`${variant}-increment`}>
         <Button
           className={css('datetime-picker__time-spin-box', 'up')}
           onClick={handleIncrement}
           aria-label={t(`TimeSpinner.INCREMENT_${variant.toUpperCase()}_VALUE`) || ''}
         >
-          <Icon size="md">
+          <Icon size="lg">
             <AngleUpIcon />
           </Icon>
         </Button>
@@ -232,7 +228,7 @@ const TimeSpinner: React.FC<TimeSpinnerProps> = ({ variant, onChange, selected,
           onClick={handleDecrement}
           aria-label={t(`TimeSpinner.DECREMENT_${variant.toUpperCase()}_VALUE`) || ''}
         >
-          <Icon size="md">
+          <Icon size="lg">
             <AngleDownIcon />
           </Icon>
         </Button>