feat(pci-load-balancer): add l7 rule edit page

ref: DTCORE-2645
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_de_DE.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "Ihre L7 Rule wurde erfolgreich geändert!"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_en_GB.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "Your L7 rule has been modified."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_es_ES.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "¡Su L7 rule se ha modificado correctamente!"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_fr_CA.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "Votre L7 rule a été modifée avec succès !"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_fr_FR.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "Votre L7 rule a été modifée avec succès !"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_it_IT.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "La L7 rule è stata modificata correttamente."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_pl_PL.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "Twoja L7 rule została zmodyfikowana."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/edit/Messages_pt_PT.json

@@ -0,0 +1,3 @@
+{
+  "octavia_load_balancer_edit_l7_rule_success": "A sua L7 rule foi modificada com sucesso!"
+}

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

@@ -39,7 +39,7 @@ export const deleteL7Rule = async (
   return data;
 };
 
-export const createRule = async (
+export const createL7Rule = async (
   projectId: string,
   region: string,
   policyId: string,
@@ -51,3 +51,34 @@ export const createRule = async (
   );
   return data;
 };
+
+export const updateL7Rule = async (
+  projectId: string,
+  region: string,
+  policyId: string,
+  rule: TL7Rule,
+) => {
+  const { data } = await v6.put(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/l7Policy/${policyId}/l7Rule/${rule.id}`,
+    {
+      ruleType: rule.ruleType,
+      compareType: rule.compareType,
+      key: rule.key,
+      value: rule.value,
+      invert: rule.invert,
+    },
+  );
+  return data;
+};
+
+export const getL7Rule = async (
+  projectId: string,
+  region: string,
+  policyId: string,
+  ruleId: string,
+): Promise<TL7Rule> => {
+  const { data } = await v6.get<TL7Rule>(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/l7Policy/${policyId}/l7Rule/${ruleId}`,
+  );
+  return data;
+};

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

@@ -4,13 +4,14 @@ import { applyFilters, Filter } from '@ovh-ux/manager-core-api';
 import { useMemo } from 'react';
 import { paginateResults, sortResults } from '@/helpers';
 import {
-  createRule,
+  createL7Rule,
   deleteL7Rule,
+  getL7Rule,
   getL7Rules,
   TL7Rule,
+  updateL7Rule,
 } from '@/api/data/l7Rules';
 import queryClient from '@/queryClient';
-import { createPolicy, TL7Policy } from '@/api/data/l7Policies';
 
 export const useGetAllL7Rules = (
   projectId: string,
@@ -96,7 +97,7 @@ type CreateRuleProps = {
   onSuccess: () => void;
 };
 
-export const useCreateRule = ({
+export const useCreateL7Rule = ({
   projectId,
   policyId,
   region,
@@ -105,7 +106,7 @@ export const useCreateRule = ({
 }: CreateRuleProps) => {
   const mutation = useMutation({
     mutationFn: async (rule: TL7Rule) =>
-      createRule(projectId, region, policyId, rule),
+      createL7Rule(projectId, region, policyId, rule),
     onError,
     onSuccess: async () => {
       await queryClient.invalidateQueries({
@@ -115,7 +116,49 @@ export const useCreateRule = ({
     },
   });
   return {
-    createRule: (rule: TL7Rule) => mutation.mutate(rule),
+    createL7Rule: (rule: TL7Rule) => mutation.mutate(rule),
     ...mutation,
   };
 };
+
+type UpdateRuleProps = {
+  projectId: string;
+  policyId: string;
+  region: string;
+  onError: (cause: Error) => void;
+  onSuccess: () => void;
+};
+
+export const useUpdateL7Rule = ({
+  projectId,
+  policyId,
+  region,
+  onError,
+  onSuccess,
+}: UpdateRuleProps) => {
+  const mutation = useMutation({
+    mutationFn: async (rule: TL7Rule) =>
+      updateL7Rule(projectId, region, policyId, rule),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['l7Rules', projectId],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    updateL7Rule: (rule: TL7Rule) => mutation.mutate(rule),
+    ...mutation,
+  };
+};
+export const useGetL7Rule = (
+  projectId: string,
+  policyId: string,
+  region: string,
+  ruleId: string,
+) =>
+  useQuery({
+    queryKey: ['l7Rules', projectId, policyId, region, ruleId],
+    queryFn: () => getL7Rule(projectId, region, policyId, ruleId),
+  });

packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/rules/RuleForm.component.tsx

@@ -47,14 +47,19 @@ export default function RuleForm({
 
   useEffect(() => {
     if (rule) {
-      setFormState(() => rule);
+      setFormState((state) => ({
+        ...state,
+        ...rule,
+      }));
     }
   }, [rule]);
+
   const isDisabled =
     !formState.ruleType ||
     !formState.value ||
     !formState.key ||
     !formState.compareType;
+
   const [isTouched, setIsTouched] = useState({
     ruleType: false,
     compareType: false,
@@ -122,6 +127,14 @@ export default function RuleForm({
     formState.ruleType,
     formState.compareType,
   ]);
+
+  const listCompareType = useMemo(() => {
+    if (formState.ruleType) {
+      return COMPARE_TYPES_AVAILABILITY_BY_TYPE[formState.ruleType];
+    }
+    return [];
+  }, [formState.ruleType]);
+
   return (
     <div className="w-[20rem]">
       <OsdsFormField
@@ -188,6 +201,7 @@ export default function RuleForm({
         <OsdsSelect
           value={formState.compareType}
           inline
+          key={formState.ruleType}
           error={isTouched.compareType && !formState.compareType}
           onOdsBlur={() => {
             setIsTouched((state) => ({
@@ -205,16 +219,11 @@ export default function RuleForm({
           <span slot="placeholder">
             {t('octavia_load_balancer_create_l7_rule_compare_type_default')}
           </span>
-          {(COMPARE_TYPES_AVAILABILITY_BY_TYPE[formState?.ruleType] || []).map(
-            (compareType) => (
-              <OsdsSelectOption
-                key={compareType.value}
-                value={compareType.value}
-              >
-                {compareType.label}
-              </OsdsSelectOption>
-            ),
-          )}
+          {listCompareType.map((compareType) => (
+            <OsdsSelectOption key={compareType.value} value={compareType.value}>
+              {compareType.label}
+            </OsdsSelectOption>
+          ))}
         </OsdsSelect>
         {formState.compareType && (
           <OsdsText slot="helper" color={ODS_THEME_COLOR_INTENT.text}>
@@ -328,8 +337,7 @@ export default function RuleForm({
           disabled={isDisabled || undefined}
           onClick={() => onSubmit(formState)}
         >
-          {submitButtonText ||
-            t('octavia_load_balancer_create_l7_policy_submit')}
+          {submitButtonText || t('octavia_load_balancer_create_l7_rule_submit')}
         </OsdsButton>
       </div>
     </div>

packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/create/Create.page.tsx

@@ -5,14 +5,14 @@ import { useNotifications } from '@ovh-ux/manager-react-components';
 import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 import { OsdsSpinner } from '@ovhcloud/ods-components/react';
 import RuleForm from '@/components/detail/listeners/l7/rules/RuleForm.component';
-import { useCreateRule } from '@/api/hook/useL7Rule';
+import { useCreateL7Rule } from '@/api/hook/useL7Rule';
 
 export default function CreatePage() {
   const { addSuccess, addError } = useNotifications();
   const navigate = useNavigate();
   const { t } = useTranslation('l7/rules/create');
   const { projectId, policyId, region } = useParams();
-  const { createRule, isPending: isPendingCreate } = useCreateRule({
+  const { createL7Rule, isPending: isPendingCreate } = useCreateL7Rule({
     projectId,
     policyId,
     region,
@@ -47,7 +47,7 @@ export default function CreatePage() {
         <RuleForm
           rule={null}
           onCancel={() => navigate('..')}
-          onSubmit={createRule}
+          onSubmit={createL7Rule}
           submitButtonText={t(
             'octavia_load_balancer_create_l7_rule_submit_creation',
           )}

packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/edit/Edit.page.tsx

@@ -0,0 +1,61 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Translation } from 'react-i18next';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import RuleForm from '@/components/detail/listeners/l7/rules/RuleForm.component';
+import { useGetL7Rule, useUpdateL7Rule } from '@/api/hook/useL7Rule';
+
+export default function UpdatePage() {
+  const { addSuccess, addError } = useNotifications();
+  const navigate = useNavigate();
+  const { projectId, policyId, region, ruleId } = useParams();
+  const { updateL7Rule, isPending: isPendingUpdate } = useUpdateL7Rule({
+    projectId,
+    policyId,
+    region,
+    onError(error: ApiError) {
+      addError(
+        <Translation ns="octavia-load-balancer">
+          {(_t) =>
+            _t('octavia_load_balancer_global_error', {
+              message: error?.response?.data?.message || error?.message || null,
+              requestId: error?.config?.headers['X-OVH-MANAGER-REQUEST-ID'],
+            })
+          }
+        </Translation>,
+        true,
+      );
+    },
+    onSuccess() {
+      addSuccess(
+        <Translation ns="l7/rules/edit">
+          {(_t) => _t('octavia_load_balancer_edit_l7_rule_success')}
+        </Translation>,
+        true,
+      );
+      navigate('..');
+    },
+  });
+  const { data: rule, isPending: isPendingGetRule } = useGetL7Rule(
+    projectId,
+    policyId,
+    region,
+    ruleId,
+  );
+  const isPending = isPendingGetRule || isPendingUpdate;
+  return (
+    <>
+      {isPending ? (
+        <OsdsSpinner size={ODS_SPINNER_SIZE.md} inline />
+      ) : (
+        <RuleForm
+          rule={rule}
+          onCancel={() => navigate('..')}
+          onSubmit={updateL7Rule}
+        />
+      )}
+    </>
+  );
+}

packages/manager/apps/pci-load-balancer/src/routes.tsx

@@ -22,6 +22,7 @@ export const ROUTE_PATHS = {
   L7_RULES_LIST: 'list',
   L7_RULES_CREATE: 'create',
   L7_RULES_DELETE: ':ruleId/delete',
+  L7_RULES_EDIT: ':ruleId/edit',
   POOLS: 'pools',
   POOLS_CREATE: 'create',
   POOLS_EDIT: ':poolId/edit',
@@ -59,6 +60,9 @@ const L7PoliciesDeletePage = lazy(() =>
 const L7RulesDeletePage = lazy(() =>
   import('@/pages/detail/listeners/l7/rules/delete/Delete.page'),
 );
+const L7RulesEditPage = lazy(() =>
+  import('@/pages/detail/listeners/l7/rules/edit/Edit.page'),
+);
 const L7PoliciesEditPage = lazy(() =>
   import('@/pages/detail/listeners/l7/edit/Edit.page'),
 );
@@ -134,7 +138,7 @@ const Routes = (
     </Route>
     <Route path={ROUTE_PATHS.L7_RULES} Component={L7RulesPage}>
       <Route path="" element={<Navigate to={ROUTE_PATHS.L7_RULES_LIST} />} />
-      <Route path={ROUTE_PATHS.L7_CREATE} Component={L7RulesCreatePage} />
+      <Route path={ROUTE_PATHS.L7_RULES_EDIT} Component={L7RulesEditPage} />
       <Route path={ROUTE_PATHS.L7_RULES_LIST} Component={L7PRulesListPage}>
         <Route
           path={ROUTE_PATHS.L7_RULES_DELETE}