feat: update kptfile resource editor (#199)

This change updates the Kptfile Resource Editor to allow the package keywords and site to be updated.

plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/KptfileEditor/KptfileEditor.tsx

@@ -24,6 +24,7 @@ import { Function } from '../../../../../types/Function';
 import {
   Kptfile,
   KptfileFunction,
+  KptfileInfo,
   KptfileMetadata,
 } from '../../../../../types/Kptfile';
 import {
@@ -32,10 +33,7 @@ import {
 } from '../../../../../utils/function';
 import { PackageResource } from '../../../../../utils/packageRevisionResources';
 import { dumpYaml, loadYaml } from '../../../../../utils/yaml';
-import {
-  ResourceMetadataAccordion,
-  SingleTextFieldAccordion,
-} from '../Controls';
+import { ResourceMetadataAccordion } from '../Controls';
 import { useEditorStyles } from '../styles';
 import {
   Deletable,
@@ -44,6 +42,7 @@ import {
   undefinedIfEmpty,
   updateList,
 } from '../util/deletable';
+import { KptfileInfoEditorAccordion } from './components/KptfileInfoEditorAccordion';
 import { KptFunctionEditorAccordion } from './components/KptFunctionEditorAccordion';
 
 type OnUpdatedYamlFn = (yaml: string) => void;
@@ -56,7 +55,7 @@ type KptfileEditorProps = {
 
 type State = {
   metadata: KptfileMetadata;
-  description: string;
+  info: KptfileInfo;
   mutators: Deletable<KptfileFunction>[];
   validators: Deletable<KptfileFunction>[];
 };
@@ -71,7 +70,7 @@ export const KptfileEditor = ({
 
   const createResourceState = (): State => ({
     metadata: resourceYaml.metadata,
-    description: resourceYaml.info?.description || '',
+    info: resourceYaml.info,
     mutators: resourceYaml.pipeline?.mutators ?? [],
     validators: resourceYaml.pipeline?.validators ?? [],
   });
@@ -101,7 +100,7 @@ export const KptfileEditor = ({
     if (!resourceYaml.pipeline) resourceYaml.pipeline = {};
 
     resourceYaml.metadata = state.metadata;
-    resourceYaml.info.description = state.description;
+    resourceYaml.info = state.info;
     resourceYaml.pipeline.mutators = undefinedIfEmpty(
       getActiveElements(state.mutators),
     );
@@ -122,12 +121,11 @@ export const KptfileEditor = ({
         onUpdate={metadata => setState(s => ({ ...s, metadata }))}
       />
 
-      <SingleTextFieldAccordion
-        id="package-description"
-        title="Package Description"
+      <KptfileInfoEditorAccordion
+        id="info"
         state={[expanded, setExpanded]}
-        value={state.description}
-        onValueUpdated={value => setState(s => ({ ...s, description: value }))}
+        value={state.info}
+        onUpdate={info => setState(s => ({ ...s, info }))}
       />
 
       {state.mutators.map(

plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/KptfileEditor/components/KptfileInfoEditorAccordion.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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 { TextField } from '@material-ui/core';
+import React, { Fragment, useRef } from 'react';
+import { KptfileInfo } from '../../../../../../types/Kptfile';
+import { emptyIfUndefined } from '../../../../../../utils/string';
+import { EditorAccordion } from '../../Controls';
+import { AccordionState } from '../../Controls/EditorAccordion';
+
+type OnUpdate = (value: KptfileInfo) => void;
+
+type KptfileInfoEditorAccordionProps = {
+  id: string;
+  state: AccordionState;
+  value: KptfileInfo;
+  onUpdate: OnUpdate;
+};
+
+export const KptfileInfoEditorAccordion = ({
+  id,
+  state,
+  value: kptfileInfo,
+  onUpdate,
+}: KptfileInfoEditorAccordionProps) => {
+  const refViewModel = useRef<KptfileInfo>(kptfileInfo);
+  const viewModel = refViewModel.current;
+
+  const description = viewModel.description || 'no description';
+
+  const valueUpdated = (): void => {
+    onUpdate(viewModel);
+  };
+
+  return (
+    <EditorAccordion
+      id={id}
+      title="Info"
+      description={description}
+      state={state}
+    >
+      <Fragment>
+        <TextField
+          label="Description"
+          variant="outlined"
+          value={emptyIfUndefined(viewModel.description)}
+          onChange={e => {
+            viewModel.description = e.target.value;
+            valueUpdated();
+          }}
+          fullWidth
+        />
+
+        <TextField
+          label="Keywords"
+          variant="outlined"
+          value={(viewModel.keywords ?? []).join(', ')}
+          onChange={e => {
+            const value = e.target.value;
+
+            viewModel.keywords = value
+              ? value.split(',').map(v => v.trim())
+              : undefined;
+            valueUpdated();
+          }}
+          fullWidth
+        />
+
+        <TextField
+          label="Site"
+          variant="outlined"
+          value={emptyIfUndefined(viewModel.site)}
+          onChange={e => {
+            viewModel.site = e.target.value || undefined;
+            valueUpdated();
+          }}
+          fullWidth
+        />
+      </Fragment>
+    </EditorAccordion>
+  );
+};