Linting errors, enable lint action on PR, add i18n build CI

.github/workflows/i18n.yaml

@@ -0,0 +1,35 @@
+name: I18n Check
+
+on:
+  pull_request:
+    branches:
+      - '**'
+  workflow_dispatch:
+
+jobs:
+  i18n:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run i18n generation
+        run: yarn i18n
+
+      - name: Check for changes
+        run: |
+          if [[ $(git status --porcelain) ]]; then
+            echo "i18n generation caused changes, failing the build."
+            exit 1
+          else
+            echo "No changes detected."
+          fi

.github/workflows/lint.yaml

@@ -1,9 +1,9 @@
 name: Lint Check
 
 on:
-  # pull_request:
-  #   branches:
-  #     - '**'
+  pull_request:
+    branches:
+      - '**'
   workflow_dispatch:
 
 jobs:

.stylelintrc.yaml

@@ -16,7 +16,7 @@ rules:
   # reserved by PatternFly and OpenShift console.
   selector-disallowed-list:
     - "*"
-    - /\.(pf|co)-/
+    - "/^\\.pf-(?!theme)(?!.* )/"  # Disallow naked .pf- classes but allow .pf-theme and combined .pf- classes
   # Plugins should avoid naked element selectors like `table` and `li` since
   # this can impact layout of existing pages in console.
   selector-max-type:

README.md

@@ -146,6 +146,21 @@ best practice is to prefix your CSS classnames with your plugin name to avoid
 conflicts. Please don't disable these rules without understanding how they can
 break console styles!
 
+### Linting Extensions
+
+If you'd like to auto lint, install these VSCode extensions and configure formatting on save:
+
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+
+#### Format on save in VSCode:
+
+Update `settings.json` (File > Preferences > Settings):
+
+```json
+"editor.formatOnSave": true
+```
+
 ## References
 
 - [Console Plugin SDK README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)

locales/en/plugin__kuadrant-console-plugin.json

@@ -44,6 +44,7 @@
   "Failure Threshold": "Failure Threshold",
   "Feature Highlights": "Feature Highlights",
   "Form View": "Form View",
+  "found": "found",
   "Gateway API Target Reference": "Gateway API Target Reference",
   "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to": "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to",
   "Gateways": "Gateways",
@@ -68,8 +69,8 @@
   "Loading..": "Loading..",
   "Name": "Name",
   "Namespace": "Namespace",
+  "No": "No",
   "No limits configured yet": "No limits configured yet",
-  "No policies found": "No policies found",
   "OK": "OK",
   "Overview": "Overview",
   "Policies": "Policies",
@@ -95,9 +96,10 @@
   "Select Issuer": "Select Issuer",
   "Status": "Status",
   "Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager": "Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager",
-  "There are no policies to display - please create some.": "There are no policies to display - please create some.",
+  "There are no": "There are no",
   "TLS": "TLS",
   "TLSPolicy": "TLSPolicy",
+  "to display - please create some.": "to display - please create some.",
   "Type": "Type",
   "Unique name of the DNS Policy": "Unique name of the DNS Policy",
   "Unique name of the TLSPolicy.": "Unique name of the TLSPolicy.",

src/components/DropdownWithKebab.tsx

@@ -38,20 +38,22 @@ const DropdownWithKebab: React.FC<DropdownWithKebabProps> = ({ obj }) => {
     }
   };
 
-  let policyType = obj.kind.toLowerCase();
+  const policyType = obj.kind.toLowerCase();
 
   const onEditClick = () => {
     if (obj.kind === 'AuthPolicy' || obj.kind === 'RateLimitPolicy') {
       history.push({
-        pathname: `/k8s/ns/${obj.metadata.namespace}/${obj.apiVersion.replace("/", "~")}~${obj.kind}/${obj.metadata.name}/yaml`,
-      })
+        pathname: `/k8s/ns/${obj.metadata.namespace}/${obj.apiVersion.replace('/', '~')}~${
+          obj.kind
+        }/${obj.metadata.name}/yaml`,
+      });
     } else {
       history.push({
         pathname: `/k8s/ns/${obj.metadata.namespace}/${policyType}/name/${obj.metadata.name}/edit`,
-      })
+      });
     }
-  }
-  
+  };
+
   const onDeleteClick = () => {
     setIsDeleteModalOpen(true);
   };

src/components/KuadrantAuthPolicyCreatePage.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
-import { Button, Modal, ModalBox, ModalBoxHeader, ModalBoxBody, ModalBoxFooter, ButtonVariant } from '@patternfly/react-core';
+import {
+  Button,
+  Modal,
+  ModalBox,
+  ModalBoxHeader,
+  ModalBoxBody,
+  ModalBoxFooter,
+  ButtonVariant,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ResourceYAMLEditor, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import resourceGVKMapping from '../utils/latest';
@@ -10,7 +18,8 @@ const KuadrantAuthPolicyCreatePage: React.FC = () => {
   const [selectedNamespace] = useActiveNamespace();
 
   const yamlResource = {
-    apiVersion: resourceGVKMapping['AuthPolicy'].group + '/' + resourceGVKMapping['AuthPolicy'].version,
+    apiVersion:
+      resourceGVKMapping['AuthPolicy'].group + '/' + resourceGVKMapping['AuthPolicy'].version,
     kind: resourceGVKMapping['AuthPolicy'].kind,
     metadata: {
       name: 'example-authpolicy',
@@ -28,10 +37,14 @@ const KuadrantAuthPolicyCreatePage: React.FC = () => {
         response: {
           unauthorized: {
             body: {
-              value: JSON.stringify({
-                error: "Forbidden",
-                message: "Access denied by default. Create a specific auth policy for the route.",
-              }, null, 2),
+              value: JSON.stringify(
+                {
+                  error: 'Forbidden',
+                  message: 'Access denied by default. Create a specific auth policy for the route.',
+                },
+                null,
+                2,
+              ),
             },
             headers: {
               'content-type': {
@@ -58,24 +71,20 @@ const KuadrantAuthPolicyCreatePage: React.FC = () => {
         <title>{t('Create AuthPolicy')}</title>
       </Helmet>
 
-      <ResourceYAMLEditor
-        initialResource={yamlResource}
-        header="Create AuthPolicy"
-        create={true}
-      />
+      <ResourceYAMLEditor initialResource={yamlResource} header="Create AuthPolicy" create={true} />
 
-      <Modal
-        isOpen={isErrorModalOpen}
-        onClose={() => setIsErrorModalOpen(false)}
-        variant="medium"
-      >
+      <Modal isOpen={isErrorModalOpen} onClose={() => setIsErrorModalOpen(false)} variant="medium">
         <ModalBox aria-labelledby="error-modal-title" aria-describedby="error-modal-description">
           <ModalBoxHeader>{t('Error creating AuthPolicy')}</ModalBoxHeader>
           <ModalBoxBody id="error-modal-description">
             <b>{errorModalMsg}</b>
           </ModalBoxBody>
           <ModalBoxFooter>
-            <Button key="ok" variant={ButtonVariant.link} onClick={() => setIsErrorModalOpen(false)}>
+            <Button
+              key="ok"
+              variant={ButtonVariant.link}
+              onClick={() => setIsErrorModalOpen(false)}
+            >
               OK
             </Button>
           </ModalBoxFooter>

src/components/KuadrantCreateUpdate.tsx

@@ -7,59 +7,59 @@ import {
   k8sUpdate,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  AlertVariant,
-  Alert,
-  AlertGroup,
-} from '@patternfly/react-core';
+import { Button, AlertVariant, Alert, AlertGroup } from '@patternfly/react-core';
 import { History } from 'history';
 
-
 interface GenericPolicyForm {
-  model: K8sModel
-  resource: K8sResourceCommon
-  policyType: string,
-  history: History,
-  validation: boolean
+  model: K8sModel;
+  resource: K8sResourceCommon;
+  policyType: string;
+  history: History;
+  validation: boolean;
 }
 
-const KuadrantCreateUpdate: React.FC<GenericPolicyForm> = ({ model, resource, policyType, history,validation }) => {
+const KuadrantCreateUpdate: React.FC<GenericPolicyForm> = ({
+  model,
+  resource,
+  policyType,
+  history,
+  validation,
+}) => {
   const { t } = useTranslation('plugin__kuadrant-console-plugin');
-  const [errorAlertMsg, setErrorAlertMsg] = React.useState('')
-  const update = !!resource.metadata.creationTimestamp
+  const [errorAlertMsg, setErrorAlertMsg] = React.useState('');
+  const update = !!resource.metadata.creationTimestamp;
 
   const handleCreateUpdate = async () => {
     if (!validation) return; // Early return if form is not valid
-    setErrorAlertMsg('')
-
-    try {
+    setErrorAlertMsg('');
 
+    try {
       if (update == true) {
         const response = await k8sUpdate({
           model: model,
           data: resource,
-        })
-        console.log(`${policyType} updated successfully:`, response)
-        history.push(`/kuadrant/all-namespaces/policies/${policyType}`)
+        });
+        console.log(`${policyType} updated successfully:`, response);
+        history.push(`/kuadrant/all-namespaces/policies/${policyType}`);
       } else {
         const response = await k8sCreate({
           model: model,
           data: resource,
-        })
-        console.log(`${policyType} created successfully:`, response)
-        history.push(`/kuadrant/all-namespaces/policies/${policyType}`)
+        });
+        console.log(`${policyType} created successfully:`, response);
+        history.push(`/kuadrant/all-namespaces/policies/${policyType}`);
       }
     } catch (error) {
       if (update == true) {
-        console.error(t(`Cannot update ${policyType}`, error))
-        setErrorAlertMsg(error.message)
-      } {
-        console.error(t(`Cannot create ${policyType}`, error))
-        setErrorAlertMsg(error.message)
+        console.error(t(`Cannot update ${policyType}`, error));
+        setErrorAlertMsg(error.message);
+      }
+      {
+        console.error(t(`Cannot create ${policyType}`, error));
+        setErrorAlertMsg(error.message);
       }
     }
-  }
+  };
   return (
     <>
       {errorAlertMsg != '' && (
@@ -73,6 +73,6 @@ const KuadrantCreateUpdate: React.FC<GenericPolicyForm> = ({ model, resource, po
         {update ? t(`Save`) : t(`Create`)}
       </Button>
     </>
-  )
-}
-export default KuadrantCreateUpdate
+  );
+};
+export default KuadrantCreateUpdate;