Linting errors

Signed-off-by: Jason Madigan <[email protected]>

.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)

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;