feat(pci-load-balancer): add rename health monitor modal

packages/manager-react-components/src/components/notifications/useNotifications.ts

@@ -14,6 +14,7 @@ export interface Notification {
   content: ReactNode;
   type: NotificationType;
   dismissable?: boolean;
+  creationTimestamp: number;
 }
 
 export interface NotificationState {
@@ -44,7 +45,13 @@ export const useNotifications = create<NotificationState>((set, get) => ({
       uid: state.uid + 1,
       notifications: [
         ...state.notifications,
-        { uid: state.uid, content, type, dismissable },
+        {
+          uid: state.uid,
+          content,
+          type,
+          dismissable,
+          creationTimestamp: Date.now(),
+        },
       ],
     })),
   addSuccess: (content: ReactNode, dismissable = false) =>
@@ -61,7 +68,12 @@ export const useNotifications = create<NotificationState>((set, get) => ({
         ({ uid }) => uid !== toRemoveUid,
       ),
     })),
-  clearNotifications: () => set(() => ({ notifications: [] })),
+  clearNotifications: () =>
+    set((state) => ({
+      notifications: state.notifications.filter(
+        (notification) => Date.now() - notification.creationTimestamp < 1000,
+      ),
+    })),
 }));
 
 export default useNotifications;

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_de_DE.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Namen ändern",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Abbrechen",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Ändern"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_en_GB.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Change name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Cancel",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Edit"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_es_ES.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Cambiar el nombre",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nombre",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Cancelar",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Editar"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_CA.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_it_IT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifica il nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annullare",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modificare"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pl_PL.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Zmień nazwę",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nazwa",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Anuluj",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Zmień"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pt_PT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Alterar o nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Anular",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Alterar"
+}

packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts

@@ -117,3 +117,14 @@ export const editHealthMonitor = (
     body,
   );
 };
+
+export const renameHealthMonitor = (
+  projectId: string,
+  region: string,
+  healthMonitorId: string,
+  name: string,
+) =>
+  v6.put(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/healthMonitor/${healthMonitorId}`,
+    { name },
+  );

packages/manager/apps/pci-load-balancer/src/api/hook/useHealthMonitor.tsx

@@ -4,6 +4,7 @@ import {
   deleteHealthMonitor,
   editHealthMonitor,
   getHealthMonitor,
+  renameHealthMonitor,
   THealthMonitorFormState,
 } from '../data/health-monitor';
 import queryClient from '@/queryClient';
@@ -120,3 +121,29 @@ export const useEditHealthMonitor = ({
     ...mutation,
   };
 };
+
+type RenameHealthMonitorProps = EditHealthMonitorProps;
+
+export const useRenameHealthMonitor = ({
+  projectId,
+  region,
+  healthMonitorId,
+  onError,
+  onSuccess,
+}: RenameHealthMonitorProps) => {
+  const mutation = useMutation({
+    mutationFn: async (name: string) =>
+      renameHealthMonitor(projectId, region, healthMonitorId, name),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['health-monitor'],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    renameHealthMonitor: (name: string) => mutation.mutate(name),
+    ...mutation,
+  };
+};

packages/manager/apps/pci-load-balancer/src/components/form/HealthMonitorForm.page.tsx

@@ -84,7 +84,7 @@ export default function HealthMonitorForm({
 
   const [isNameTouched, setIsNameTouched] = useState(false);
 
-  const validateField = (name: keyof THealthMonitorFormState, value: any) => {
+  const validateField = (name: keyof THealthMonitorFormState, value) => {
     const newErrors: THealthMonitorFormErrors = { ...errors };
 
     if (name === 'name' && isNameTouched) {
@@ -210,7 +210,7 @@ export default function HealthMonitorForm({
       </section>
 
       <div className="min-w-[20rem] md:w-1/4 sm:w-1">
-        <OsdsFormField className="my-8" error={errors.name}>
+        <OsdsFormField className="my-8">
           <LabelComponent
             text={t('octavia_load_balancer_health_monitor_form_name')}
             hasError={!!errors.name}
@@ -227,9 +227,20 @@ export default function HealthMonitorForm({
             onKeyDown={() => handle.keyDown('name')}
           />
 
-          <OsdsText slot="helper" color={ODS_THEME_COLOR_INTENT.text}>
-            {t('octavia_load_balancer_health_monitor_form_name_help')}
-          </OsdsText>
+          <div slot="helper">
+            <OsdsText className="block" color={ODS_THEME_COLOR_INTENT.error}>
+              {errors.name}
+            </OsdsText>
+            <OsdsText
+              color={
+                errors.name
+                  ? ODS_THEME_COLOR_INTENT.error
+                  : ODS_THEME_COLOR_INTENT.text
+              }
+            >
+              {t('octavia_load_balancer_health_monitor_form_name_help')}
+            </OsdsText>
+          </div>
         </OsdsFormField>
 
         <OsdsFormField className="my-8">
@@ -297,18 +308,34 @@ export default function HealthMonitorForm({
                   handle.change('expectedCode', event.detail.value)
                 }
               />
-              <OsdsText slot="helper" color={ODS_THEME_COLOR_INTENT.text}>
-                {t(
-                  'octavia_load_balancer_health_monitor_form_expected_code_help',
-                )}
-              </OsdsText>
+
+              <div slot="helper">
+                <OsdsText
+                  className="block"
+                  color={ODS_THEME_COLOR_INTENT.error}
+                >
+                  {errors.expectedCode}
+                </OsdsText>
+                <OsdsText
+                  color={
+                    errors.expectedCode
+                      ? ODS_THEME_COLOR_INTENT.error
+                      : ODS_THEME_COLOR_INTENT.text
+                  }
+                >
+                  {t(
+                    'octavia_load_balancer_health_monitor_form_expected_code_help',
+                  )}
+                </OsdsText>
+              </div>
             </OsdsFormField>
           </div>
         )}
 
         <div>
           <QuantitySelector
-            className="flex flex-row w-[100%] my-8"
+            className="w-[100%] my-8"
+            contentClassName="flex justify-between items-center"
             label={LABELS.MAX_RETRIES_DOWN}
             value={formState?.maxRetriesDown}
             min={BOUNDS.MAX_RETRIES_DOWN.MIN}
@@ -320,7 +347,8 @@ export default function HealthMonitorForm({
           />
 
           <QuantitySelector
-            className="flex flex-row w-[100%] my-8"
+            className="w-[100%] my-8"
+            contentClassName="flex justify-between items-center"
             label={LABELS.DELAY}
             value={formState?.delay}
             min={BOUNDS.DELAY.MIN}
@@ -331,7 +359,8 @@ export default function HealthMonitorForm({
           />
 
           <QuantitySelector
-            className="flex flex-row w-[100%] my-8"
+            className="w-[100%] my-8"
+            contentClassName="flex justify-between items-center"
             label={LABELS.MAX_RETRIES}
             labelHelpText={t(
               'octavia_load_balancer_health_monitor_form_max_retries_tooltip',
@@ -343,7 +372,8 @@ export default function HealthMonitorForm({
           />
 
           <QuantitySelector
-            className="flex flex-row w-[100%] my-8"
+            className="w-[100%] my-8"
+            contentClassName="flex justify-between items-center"
             label={LABELS.TIMEOUT}
             labelHelpText={t(
               'octavia_load_balancer_health_monitor_form_timeout_tooltip',

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/HealthMonitor.tsx

@@ -119,7 +119,7 @@ export default function HealthMonitor() {
                     color={ODS_THEME_COLOR_INTENT.primary}
                     size={ODS_BUTTON_SIZE.sm}
                     variant={ODS_BUTTON_VARIANT.ghost}
-                    href=""
+                    href={useHref('edit-name')}
                   >
                     <OsdsIcon
                       size={ODS_ICON_SIZE.xxs}
@@ -135,7 +135,7 @@ export default function HealthMonitor() {
               title={t(
                 'octavia_load_balancer_health_monitor_detail_overview_info_type',
               )}
-              value={healthMonitor?.monitorType}
+              value={healthMonitor?.monitorType.toUpperCase()}
             />
 
             {[HEALTH_MONITOR_TYPE.HTTP, HEALTH_MONITOR_TYPE.HTTPS].includes(

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/create/HealthMonitorCreate.page.tsx

@@ -91,7 +91,7 @@ export default function HealthMonitorCreatePage() {
         associatedPool={pool}
         formState={formState}
         isPending={isPoolPending || isCreationPending}
-        onCancel={() => navigate('../health-monitor')}
+        onCancel={() => navigate('../general-information')}
         onChange={setFormState}
         onSubmit={createHealthMonitor}
         submitLabel={t(