feat: add validate resources step on add package page (#164)

This change adds the Validate Resources step to the Add Package Page. This step allows users to have their package resources validated against their schema by adding the kubeval validator function to the Kptfile.

Author: ChristopherFry

plugins/cad/src/components/AddPackagePage/AddPackagePage.tsx

@@ -25,18 +25,27 @@ import {
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { makeStyles, TextField, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import { dump } from 'js-yaml';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { ConfigAsDataApi, configAsDataApiRef } from '../../apis';
 import { packageRouteRef } from '../../routes';
+import { ConfigMap } from '../../types/ConfigMap';
 import { Kptfile } from '../../types/Kptfile';
+import { KubernetesResource } from '../../types/KubernetesResource';
 import {
   PackageRevision,
   PackageRevisionLifecycle,
 } from '../../types/PackageRevision';
 import { PackageRevisionResourcesMap } from '../../types/PackageRevisionResource';
 import { Repository } from '../../types/Repository';
+import {
+  findKptfileFunction,
+  getLatestFunction,
+  GroupFunctionsByName,
+  groupFunctionsByName,
+} from '../../utils/function';
 import {
   canCloneRevision,
   getCloneTask,
@@ -50,6 +59,7 @@ import {
   getRootKptfile,
   PackageResource,
   updateResourceInResourcesMap,
+  updateResourcesMap,
 } from '../../utils/packageRevisionResources';
 import {
   ContentSummary,
@@ -60,7 +70,7 @@ import {
 import { sortByLabel } from '../../utils/selectItem';
 import { emptyIfUndefined, toLowerCase } from '../../utils/string';
 import { dumpYaml, loadYaml } from '../../utils/yaml';
-import { Select } from '../Controls/Select';
+import { Checkbox, Select } from '../Controls';
 import { PackageLink, RepositoriesLink, RepositoryLink } from '../Links';
 
 const useStyles = makeStyles(() => ({
@@ -96,6 +106,10 @@ type KptfileState = {
   site: string;
 };
 
+type ValidateResourcesState = {
+  setKubeval: boolean;
+};
+
 const mapPackageRevisionToSelectItem = (
   packageRevision: PackageRevision,
 ): PackageRevisionSelectItem => ({
@@ -125,6 +139,44 @@ const getPackageResources = async (
   return [resources, resourcesMap];
 };
 
+const createResource = (
+  apiVersion: string,
+  kind: string,
+  name: string,
+  localConfig: boolean = true,
+): KubernetesResource => {
+  const resource: KubernetesResource = {
+    apiVersion: apiVersion,
+    kind: kind,
+    metadata: {
+      name: name,
+    },
+  };
+
+  if (localConfig) {
+    resource.metadata.annotations = {
+      'config.kubernetes.io/local-config': 'true',
+    };
+  }
+
+  return resource;
+};
+
+const addPackageResource = (
+  packageResources: PackageResource[],
+  resource: KubernetesResource,
+  filename: string,
+): PackageResource => {
+  const packageResource: PackageResource = {
+    filename: filename,
+    yaml: dumpYaml(resource),
+  } as PackageResource;
+
+  packageResources.push(packageResource);
+
+  return packageResource;
+};
+
 export const AddPackagePage = ({ action }: AddPackagePageProps) => {
   const api = useApi(configAsDataApiRef);
   const classes = useStyles();
@@ -157,6 +209,11 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
     site: '',
   });
 
+  const [validateResourcesState, setValidateResourcesState] =
+    useState<ValidateResourcesState>({
+      setKubeval: true,
+    });
+
   const [isCreatingPackage, setIsCreatingPackage] = useState<boolean>(false);
 
   const [
@@ -303,6 +360,15 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
           keywords: emptyIfUndefined(thisKptfile.info?.keywords?.join(', ')),
           site: emptyIfUndefined(thisKptfile.info?.site),
         });
+
+        const kubevalValidatorFn = findKptfileFunction(
+          thisKptfile.pipeline?.validators || [],
+          'kubeval',
+        );
+
+        setValidateResourcesState({
+          setKubeval: !!kubevalValidatorFn,
+        });
       };
 
       updateKptfileState(sourcePackageRevision.metadata.name);
@@ -313,6 +379,10 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
         keywords: '',
         site: '',
       });
+
+      setValidateResourcesState({
+        setKubeval: true,
+      });
     }
   }, [api, sourcePackageRevision]);
 
@@ -346,17 +416,89 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
     return thisPackage?.spec.packageName || packageName;
   };
 
-  const updatePackageResources = async (
-    thisPackageName: string,
-  ): Promise<void> => {
-    const updateRequired = !!sourcePackageRevision;
+  const applyValidateResourcesState = async (
+    resourcesMap: PackageRevisionResourcesMap,
+    kptFunctions: GroupFunctionsByName,
+  ): Promise<PackageRevisionResourcesMap> => {
+    const resources = getPackageResourcesFromResourcesMap(resourcesMap);
 
-    if (!updateRequired) return;
+    const kptfileResource = getRootKptfile(resources);
+    const kptfileYaml = loadYaml(kptfileResource.yaml) as Kptfile;
+    kptfileYaml.pipeline = kptfileYaml.pipeline || {};
+    kptfileYaml.pipeline.validators = kptfileYaml.pipeline.validators || [];
+    const validators = kptfileYaml.pipeline.validators;
+
+    const newPackageResources: PackageResource[] = [];
+    const updatedPackageResources: PackageResource[] = [];
+    const deletedPackgeResources: PackageResource[] = [];
+
+    const kubevalValidatorFn = findKptfileFunction(validators, 'kubeval');
+
+    if (validateResourcesState.setKubeval) {
+      if (!kubevalValidatorFn) {
+        const kubevalFn = getLatestFunction(kptFunctions, 'kubeval');
+
+        const kubevalConfigResource: ConfigMap = {
+          ...createResource('v1', 'ConfigMap', 'kubeval-config'),
+          data: {
+            ignore_missing_schemas: 'true',
+          },
+        };
+
+        const kubevalConfigPackageResource = addPackageResource(
+          newPackageResources,
+          kubevalConfigResource,
+          'kubeval-config.yaml',
+        );
+
+        validators.push({
+          image: kubevalFn.spec.image,
+          configPath: kubevalConfigPackageResource.filename,
+        });
+
+        kptfileResource.yaml = dump(kptfileYaml);
+        updatedPackageResources.push(kptfileResource);
+      }
+    } else {
+      if (kubevalValidatorFn) {
+        kptfileYaml.pipeline.validators = validators.filter(
+          fn => fn !== kubevalValidatorFn,
+        );
 
-    const [resources, resourcesMap] = await getPackageResources(
-      api,
-      thisPackageName,
+        kptfileResource.yaml = dump(kptfileYaml);
+        updatedPackageResources.push(kptfileResource);
+
+        if (kubevalValidatorFn.configPath) {
+          const referenceResource = resources.find(
+            resource =>
+              resource.filename === kubevalValidatorFn.configPath &&
+              !!resource.isLocalConfigResource,
+          );
+          if (referenceResource) {
+            deletedPackgeResources.push(referenceResource);
+          }
+        }
+      }
+    }
+
+    return updateResourcesMap(
+      resourcesMap,
+      newPackageResources,
+      updatedPackageResources,
+      deletedPackgeResources,
     );
+  };
+
+  const updateKptfileInfo = (
+    resourcesMap: PackageRevisionResourcesMap,
+  ): PackageRevisionResourcesMap => {
+    const isClonePackageAction = !!sourcePackageRevision;
+
+    if (!isClonePackageAction) {
+      return resourcesMap;
+    }
+
+    const resources = getPackageResourcesFromResourcesMap(resourcesMap);
 
     const kptfileResource = getRootKptfile(resources);
 
@@ -376,11 +518,32 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
       updatedKptfileYaml,
     );
 
-    const packageRevisionResources = getPackageRevisionResourcesResource(
-      thisPackageName,
-      updatedResourceMap,
+    return updatedResourceMap;
+  };
+
+  const updatePackageResources = async (
+    newPackageName: string,
+  ): Promise<void> => {
+    const allKptFunctions = await api.listCatalogFunctions();
+    const kptFunctions = groupFunctionsByName(allKptFunctions);
+
+    const [_, resourcesMap] = await getPackageResources(api, newPackageName);
+
+    let updatedResourcesMap = await applyValidateResourcesState(
+      resourcesMap,
+      kptFunctions,
     );
-    await api.replacePackageRevisionResources(packageRevisionResources);
+
+    updatedResourcesMap = updateKptfileInfo(updatedResourcesMap);
+
+    if (updatedResourcesMap !== resourcesMap) {
+      const packageRevisionResources = getPackageRevisionResourcesResource(
+        newPackageName,
+        updatedResourcesMap,
+      );
+
+      await api.replacePackageRevisionResources(packageRevisionResources);
+    }
   };
 
   const createPackage = async (): Promise<void> => {
@@ -581,6 +744,22 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
           </div>
         </SimpleStepperStep>
 
+        <SimpleStepperStep title="Validate Resources">
+          <div className={classes.stepContent}>
+            <Checkbox
+              label="Validate resources for any OpenAPI schema errors"
+              checked={validateResourcesState.setKubeval}
+              onChange={isChecked =>
+                setValidateResourcesState(s => ({
+                  ...s,
+                  setKubeval: isChecked,
+                }))
+              }
+              helperText="This validates each resource ensuring it is syntactically correct against its schema. These errors will cause a resource not to deploy to a cluster correctly otherwise. Validation is limited to kubernetes built-in types and GCP CRDs."
+            />
+          </div>
+        </SimpleStepperStep>
+
         <SimpleStepperStep
           title="Confirm"
           actions={{

plugins/cad/src/components/Controls/Checkbox.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * 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.
+ */
+
+import {
+  Checkbox as MaterialCheckbox,
+  FormControlLabel,
+  FormHelperText,
+  makeStyles,
+} from '@material-ui/core';
+import React, { ChangeEvent } from 'react';
+
+type CheckboxProps = {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  helperText?: JSX.Element | string;
+};
+
+const useStyles = makeStyles({
+  description: {
+    marginLeft: '32px',
+    marginTop: '0',
+  },
+});
+
+export const Checkbox = ({
+  label,
+  checked,
+  onChange,
+  helperText,
+}: CheckboxProps) => {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <FormControlLabel
+        control={<MaterialCheckbox checked={checked} color="primary" />}
+        label={label}
+        onChange={(_: ChangeEvent<{}>, isChecked: boolean) =>
+          onChange(isChecked)
+        }
+      />
+      {helperText && (
+        <FormHelperText className={classes.description}>
+          {helperText}
+        </FormHelperText>
+      )}
+    </div>
+  );
+};

plugins/cad/src/components/Controls/index.ts

@@ -16,6 +16,7 @@
 
 export { Autocomplete } from './Autocomplete';
 export { ConfirmationDialog } from './ConfirmationDialog';
+export { Checkbox } from './Checkbox';
 export { IconButton } from './IconButton';
 export { MultiSelect } from './MultiSelect';
 export { PackageIcon } from './PackageIcon';