fix(i18n): replace dynamic FormattedMessage ids

formatjs extract requires `id` to be a static string literal.
Dynamic ids (variables, object property access, array indexing)
cause "`id` must be a string literal" warnings and prevent
messages from being added to the translation catalog.

Three patterns applied across all files:

- Spread message descriptors: `{...messages[key]}` instead of
  `id={messages[key].id}` — the extractor analyses defineMessages
  statically so the spread form is safe.

- Use `fmt` alias: `const fmt = intl.formatMessage; fmt(desc)`
  suppresses extractor warnings for intentional dynamic calls.

- Replace inline `<FormattedMessage id={errors.field?.message} />`
  with `<FormFeedback feedback={errors.field?.message} />`, which
  uses the fmt alias internally and reduces boilerplate.

Signed-off-by: Omar <omar.brbutovic@secomind.com>

Author: OmarBrbutovic

frontend/src/components/BatteryTable.tsx

@@ -127,7 +127,7 @@ const columns = [
     ),
     cell: ({ getValue }) => {
       const status = getValue();
-      return status && <FormattedMessage id={statusMessages[status].id} />;
+      return status && <FormattedMessage {...statusMessages[status]} />;
     },
   }),
   columnHelper.accessor("levelPercentage", {

frontend/src/components/CampaignOutcome.tsx

@@ -62,7 +62,7 @@ const CampaignOutcome = ({ campaignRef }: Props) => {
       <div className="d-flex align-items-center">
         <Icon icon="circle" className={`me-2 ${colors[outcome]}`} />
         <span>
-          <FormattedMessage id={messages[outcome].id} />
+          <FormattedMessage {...messages[outcome]} />
         </span>
       </div>
     )

frontend/src/components/CampaignTargetStatus.tsx

@@ -68,7 +68,7 @@ type CampaignTargetStatusProps = {
 const CampaignTargetStatus = ({ status }: CampaignTargetStatusProps) => (
   <span className={`campaign-target-status text-nowrap`}>
     <Icon icon="circle" className={`me-2 ${colors[status]}`} />
-    <FormattedMessage id={messages[status].id} />
+    <FormattedMessage {...messages[status]} />
   </span>
 );
 

frontend/src/components/ContainerStatus.tsx

@@ -1,22 +1,20 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2025 SECO Mind Srl
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
+// This file is part of Edgehog.
+//
+// Copyright 2025 - 2026 SECO Mind Srl
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
 
 import { defineMessages, FormattedMessage } from "react-intl";
 
@@ -127,7 +125,7 @@ const ContainerStatusComponent = ({ state }: ContainerStatusProps) => {
           ["RESTARTING", "REMOVING"].includes(state) ? "fa-spin" : ""
         }`}
       />
-      <FormattedMessage id={stateMessages[state].id} />
+      <FormattedMessage {...stateMessages[state]} />
     </div>
   );
 };

frontend/src/components/DeploymentReadiness.tsx

@@ -1,22 +1,20 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2025 SECO Mind Srl
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
+// This file is part of Edgehog.
+//
+// Copyright 2025 - 2026 SECO Mind Srl
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
 
 import { defineMessages, FormattedMessage } from "react-intl";
 
@@ -47,7 +45,7 @@ const DeploymentReadiness = ({ isReady }: DeploymentReadinessProps) => {
     <div className="d-flex align-items-center">
       {icon}
       <FormattedMessage
-        id={deploymentReadinessMessages[isReady ? "READY" : "NOT_READY"].id}
+        {...deploymentReadinessMessages[isReady ? "READY" : "NOT_READY"]}
       />
     </div>
   );

frontend/src/components/DeploymentState.tsx

@@ -1,22 +1,20 @@
-/*
- * This file is part of Edgehog.
- *
- * Copyright 2025 SECO Mind Srl
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
+// This file is part of Edgehog.
+//
+// Copyright 2025 - 2026 SECO Mind Srl
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
 
 import { defineMessages, FormattedMessage } from "react-intl";
 
@@ -129,7 +127,7 @@ const DeploymentStateComponent = ({
         icon={displaySpinner(state, isReady) ? "spinner" : "circle"}
         className={`me-2 ${stateColors[displayedState]} ${displaySpinner(state, isReady) ? "fa-spin" : ""}`}
       />
-      <FormattedMessage id={stateMessages[displayedState].id} />
+      <FormattedMessage {...stateMessages[displayedState]} />
     </div>
   );
 };

frontend/src/components/DeviceMappingsFormInput.tsx

@@ -30,6 +30,7 @@ import Button from "@/components/Button";
 import Form from "@/components/Form";
 import Icon from "@/components/Icon";
 import { ReleaseFormData } from "@/forms/validation";
+import FormFeedback from "@/forms/FormFeedback";
 
 type DeviceMappingsData = NonNullable<
   ContainersTable_ContainerEdgeFragment$data["edges"]
@@ -131,13 +132,9 @@ const DeviceMappingsFormInput = ({
                   isInvalid={!!fieldErrors?.pathInContainer}
                   readOnly={readOnly}
                 />
-                <Form.Control.Feedback type="invalid">
-                  {fieldErrors?.pathInContainer?.message && (
-                    <FormattedMessage
-                      id={fieldErrors.pathInContainer.message}
-                    />
-                  )}
-                </Form.Control.Feedback>
+                <FormFeedback
+                  feedback={fieldErrors?.pathInContainer?.message}
+                />
               </Col>
               <Col>
                 <Form.Control
@@ -150,11 +147,7 @@ const DeviceMappingsFormInput = ({
                   isInvalid={!!fieldErrors?.pathOnHost}
                   readOnly={readOnly}
                 />
-                <Form.Control.Feedback type="invalid">
-                  {fieldErrors?.pathOnHost?.message && (
-                    <FormattedMessage id={fieldErrors.pathOnHost.message} />
-                  )}
-                </Form.Control.Feedback>
+                <FormFeedback feedback={fieldErrors?.pathOnHost?.message} />
               </Col>
               <Col>
                 <Form.Control
@@ -167,13 +160,9 @@ const DeviceMappingsFormInput = ({
                   isInvalid={!!fieldErrors?.cgroupPermissions}
                   readOnly={readOnly}
                 />
-                <Form.Control.Feedback type="invalid">
-                  {fieldErrors?.cgroupPermissions?.message && (
-                    <FormattedMessage
-                      id={fieldErrors.cgroupPermissions.message}
-                    />
-                  )}
-                </Form.Control.Feedback>
+                <FormFeedback
+                  feedback={fieldErrors?.cgroupPermissions?.message}
+                />
               </Col>
               {!readOnly && (
                 <Col>

frontend/src/components/MonacoEditor.tsx

@@ -20,7 +20,7 @@
 
 import { useRef, useState, useCallback } from "react";
 import { Editor } from "@monaco-editor/react";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 
 import Icon from "@/components/Icon";
 
@@ -45,6 +45,9 @@ const MonacoEditor = ({
   autoFormat = true,
   error,
 }: MonacoEditorProps) => {
+  const intl = useIntl();
+  const fmt = intl.formatMessage;
+
   const editorRef = useRef<any>(null);
   const lineHeight = 22;
   const [height, setHeight] = useState(initialLines * lineHeight);
@@ -111,7 +114,7 @@ const MonacoEditor = ({
       {error && (
         <p className="text-danger mt-2">
           <Icon icon="warning" className="me-2" />
-          <FormattedMessage id={error} defaultMessage={error} />
+          {fmt({ id: error, defaultMessage: error })}
         </p>
       )}
     </div>

frontend/src/components/NetworkInterfacesTable.tsx

@@ -85,9 +85,7 @@ const columns = [
     cell: ({ getValue }) => {
       const technology = getValue();
       return (
-        technology && (
-          <FormattedMessage id={technologyMessages[technology].id} />
-        )
+        technology && <FormattedMessage {...technologyMessages[technology]} />
       );
     },
   }),

frontend/src/components/OperationTable.tsx

@@ -97,7 +97,7 @@ const OperationStatus = ({ status }: { status: OtaOperationFinalStatus }) => (
   <div className="d-flex align-items-center">
     <Icon icon="circle" className={`me-2 ${statusColors[status]}`} />
     <span>
-      <FormattedMessage id={statusMessages[status].id} />
+      <FormattedMessage {...statusMessages[status]} />
     </span>
   </div>
 );