feat: kubectl edit via kui's editor

Fixes #762

packages/test/src/api/keys.ts

@@ -3,6 +3,7 @@ export const keys = {
   Numpad2: '\uE01C',
   PageUp: '\uE00E',
   PageDown: '\uE00F',
+  End: '\uE010',
   BACKSPACE: '\uE003',
   TAB: '\uE004',
   ENTER: '\uE007',

plugins/plugin-client-common/i18n/editor_en_US.json

@@ -3,6 +3,7 @@
   "saveLocalFile": "Save",
   "Edit": "Edit",
   "Clear": "Clear",
+  "Cancel": "Cancel",
   "revert": "Revert",
   "readonly": "Done Editing",
   "errorSaving": "Error saving file",

plugins/plugin-client-common/src/components/Content/Editor/index.tsx

@@ -31,10 +31,25 @@ import '../../../../web/scss/components/Editor/Editor.scss'
 
 const strings = i18n('plugin-client-common', 'editor')
 
+interface WithOptions {
+  spec: {
+    readOnly?: boolean
+    clearable?: boolean
+    save?: {
+      label: string
+      onSave: (data: string) => Promise<void>
+    }
+    revert?: {
+      label: string
+      onRevert: () => Promise<string>
+    }
+  }
+}
+
 interface Props extends MonacoOptions {
   repl: REPL
   content: StringContent
-  response: File | MultiModalResponse
+  response: File | (MultiModalResponse & Partial<WithOptions>)
   willUpdateToolbar?: (toolbarText: ToolbarText, buttons?: Button[]) => void
 }
 
@@ -119,32 +134,81 @@ export default class Editor extends React.PureComponent<Props, State> {
     }
   }
 
+  private static isClearable(props: Props) {
+    return (
+      (isFile(props.response) && !props.readOnly) ||
+      (!isFile(props.response) && props.response.spec && props.response.spec.clearable !== false)
+    )
+  }
+
   private static onChange(props: Props, editor: Monaco.ICodeEditor) {
     return () => {
+      const clearable = Editor.isClearable(props)
+
       const buttons: Button[] = []
 
+      // save
       if (isFile(props.response)) {
         const save = SaveFileButton(editor, props.repl, props.response, (success: boolean) => {
           if (success) {
-            props.willUpdateToolbar(this.allClean(props), props.readOnly ? undefined : [ClearButton(editor)])
+            props.willUpdateToolbar(this.allClean(props), !clearable ? undefined : [ClearButton(editor)])
           } else {
             props.willUpdateToolbar(this.error(props, 'errorSaving'))
           }
         })
         buttons.push(save)
+      } else if (props.response.spec && props.response.spec.save) {
+        const { onSave } = props.response.spec.save
+        buttons.push({
+          mode: 'Save',
+          label: props.response.spec.save.label || strings('saveLocalFile'),
+          kind: 'view' as const,
+          command: async () => {
+            try {
+              await onSave(editor.getValue())
+              props.willUpdateToolbar(this.allClean(props), !clearable ? undefined : [ClearButton(editor)])
+            } catch (err) {
+              console.error(err)
+              props.willUpdateToolbar(this.error(props, 'errorSaving'))
+            }
+          }
+        })
+      }
 
+      // revert
+      if (isFile(props.response)) {
         const revert = RevertFileButton(editor, props.repl, props.response, (success: boolean, data?: string) => {
           if (success) {
             editor.setValue(data)
-            props.willUpdateToolbar(this.allClean(props), props.readOnly ? undefined : [ClearButton(editor)])
+            props.willUpdateToolbar(this.allClean(props), !clearable ? undefined : [ClearButton(editor)])
           } else {
             props.willUpdateToolbar(this.error(props, 'errorReverting'))
           }
         })
         buttons.push(revert)
+      } else if (props.response.spec && props.response.spec.revert) {
+        const { onRevert } = props.response.spec.revert
+        buttons.push({
+          mode: 'Revert',
+          label: props.response.spec.revert.label || strings('revert'),
+          kind: 'view' as const,
+          command: async () => {
+            try {
+              const data = await onRevert()
+              editor.setValue(data)
+              props.willUpdateToolbar(this.allClean(props), !clearable ? undefined : [ClearButton(editor)])
+            } catch (err) {
+              console.error(err)
+              props.willUpdateToolbar(this.error(props, 'errorReverting'))
+            }
+          }
+        })
       }
 
-      buttons.push(ClearButton(editor))
+      // clear
+      if (clearable) {
+        buttons.push(ClearButton(editor))
+      }
 
       props.willUpdateToolbar(
         {
@@ -160,7 +224,7 @@ export default class Editor extends React.PureComponent<Props, State> {
   private static subscribeToChanges(props: Props, editor: Monaco.ICodeEditor) {
     if (props.willUpdateToolbar) {
       // send an initial update
-      props.willUpdateToolbar(this.allClean(props), props.readOnly ? undefined : [ClearButton(editor)])
+      props.willUpdateToolbar(this.allClean(props), !Editor.isClearable(props) ? undefined : [ClearButton(editor)])
 
       // then subscribe to future model change events
       return editor.onDidChangeModelContent(Editor.onChange(props, editor))
@@ -173,7 +237,10 @@ export default class Editor extends React.PureComponent<Props, State> {
       // here we instantiate an editor widget
       const providedOptions = {
         value: props.content.content,
-        readOnly: props.readOnly || !isFile(props.response) || false,
+        readOnly:
+          !isFile(props.response) &&
+          (!props.response.spec || props.response.spec.readOnly !== false) &&
+          (props.readOnly || !isFile(props.response) || false),
         language: props.content.contentType ? language(props.content.contentType) : undefined
       }
       const options = Object.assign(defaultMonacoOptions(providedOptions), providedOptions)

plugins/plugin-client-common/src/components/Views/Sidecar/Toolbar.tsx

@@ -48,15 +48,19 @@ export default class Toolbar extends React.PureComponent<Props> {
 
   private buttons() {
     if (this.props.buttons) {
-      return this.props.buttons.map((button, idx) => (
-        <ToolbarButton
-          tab={this.props.tab}
-          button={button}
-          response={this.props.response}
-          args={this.props.args}
-          key={idx}
-        />
-      ))
+      return this.props.buttons
+        .sort((a, b) => {
+          return (a.order || 0) - (b.order || 0)
+        })
+        .map((button, idx) => (
+          <ToolbarButton
+            tab={this.props.tab}
+            button={button}
+            response={this.props.response}
+            args={this.props.args}
+            key={idx}
+          />
+        ))
     }
   }
 

plugins/plugin-client-test/src/test/response/string.ts

@@ -28,7 +28,7 @@ import { TestStringResponse } from '@kui-shell/test'
  * pty streaming
  *
  */
-const pty = (prefix = 'XXX') => `${prefix} hi`
+/* const pty = (prefix = 'XXX') => `${prefix} hi`
 const repeat = (str: string, n: number, joiner = '\n') =>
   Array(n)
     .fill(str)
@@ -50,7 +50,7 @@ new TestStringResponse({
   expect: repeat(pty('MMM'), 8),
   exact: true,
   streaming: true
-}).string()
+}).string() */
 
 /**
  * string response with no arguments

plugins/plugin-kubectl/i18n/resources_en_US.json

@@ -1,4 +1,5 @@
 {
+  "Apply Changes": "Apply Changes",
   "This API Resource is deprecated": "This API Resource is deprecated.",
   "Namespace": "Namespace",
   "Usage": "Usage",

plugins/plugin-kubectl/oc/src/controller/kubectl/delegates.ts

@@ -15,15 +15,25 @@
  */
 
 import { Registrar } from '@kui-shell/core'
-import { commandPrefix, defaultFlags, doGet, doCreate, doDelete, doRun, doDescribe } from '@kui-shell/plugin-kubectl'
+import {
+  commandPrefix,
+  defaultFlags,
+  doCreate,
+  doGet,
+  doDelete,
+  doDescribe,
+  doEdit,
+  doRun
+} from '@kui-shell/plugin-kubectl'
 
 const command = 'oc'
 
 export default (registrar: Registrar) => {
-  registrar.listen(`/${commandPrefix}/${command}/get`, doGet(command), defaultFlags)
-  registrar.listen(`/${commandPrefix}/${command}/run`, doRun(command), defaultFlags)
-  registrar.listen(`/${commandPrefix}/${command}/delete`, doDelete(command), defaultFlags)
-  registrar.listen(`/${commandPrefix}/${command}/describe`, doDescribe(command), defaultFlags)
   registrar.listen(`/${commandPrefix}/${command}/apply`, doCreate('apply', command), defaultFlags)
   registrar.listen(`/${commandPrefix}/${command}/create`, doCreate('create', command), defaultFlags)
+  registrar.listen(`/${commandPrefix}/${command}/delete`, doDelete(command), defaultFlags)
+  registrar.listen(`/${commandPrefix}/${command}/describe`, doDescribe(command), defaultFlags)
+  registrar.listen(`/${commandPrefix}/${command}/edit`, doEdit(command), defaultFlags)
+  registrar.listen(`/${commandPrefix}/${command}/get`, doGet(command), defaultFlags)
+  registrar.listen(`/${commandPrefix}/${command}/run`, doRun(command), defaultFlags)
 }

plugins/plugin-kubectl/src/controller/kubectl/edit.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * 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 { v4 as uuid } from 'uuid'
+import { Arguments, Registrar, i18n } from '@kui-shell/core'
+
+import flags from './flags'
+import commandPrefix from '../command-prefix'
+import { KubeResource } from '../../lib/model/resource'
+import { KubeOptions, getNamespaceForArgv } from './options'
+
+const strings = i18n('plugin-kubectl')
+const strings2 = i18n('plugin-client-common', 'editor')
+
+export function doEdit(cmd: string) {
+  return async (args: Arguments<KubeOptions>) => {
+    const idx = args.argvNoOptions.indexOf('edit')
+    const kind = args.argvNoOptions[idx + 1]
+    const name = args.argvNoOptions[idx + 2]
+    const ns = getNamespaceForArgv(args)
+
+    const getCommand = `${cmd} get ${kind} ${name} ${ns} -o yaml`
+    const resource = await args.REPL.qexec<KubeResource>(getCommand)
+
+    return {
+      apiVersion: 'kui-shell/v1',
+      kind: resource.kind,
+      metadata: resource.metadata,
+      spec: {
+        readOnly: false,
+        clearable: false,
+        save: {
+          label: strings('Apply Changes'),
+          onSave: async (data: string) => {
+            const tmp = `/tmp/kui-${uuid()}`
+            await args.REPL.rexec(`fwrite ${tmp}`, { data })
+            await args.REPL.qexec(`${cmd} apply ${ns} -f ${tmp}`)
+          }
+        },
+        revert: {
+          onRevert: () => resource.kuiRawData
+        }
+      },
+      modes: [
+        {
+          mode: 'edit',
+          label: strings2('Edit'),
+          contentType: 'yaml',
+          content: resource.kuiRawData
+        },
+        {
+          mode: 'cancel',
+          label: strings2('Cancel'),
+          order: 100,
+          kind: 'drilldown' as const,
+          command: getCommand
+        }
+      ]
+    }
+  }
+}
+
+export default (commandTree: Registrar) => {
+  commandTree.listen(`/${commandPrefix}/kubectl/edit`, doEdit('kubectl'), flags)
+  commandTree.listen(`/${commandPrefix}/k/edit`, doEdit('kubectl'), flags)
+}

plugins/plugin-kubectl/src/index.ts

@@ -88,6 +88,7 @@ export { fqnOf, fqn } from './controller/kubectl/fqn'
  * `kubectl get pods`
  *
  */
+export { doEdit } from './controller/kubectl/edit'
 export { doGet } from './controller/kubectl/get'
 export { doRun } from './controller/kubectl/run'
 export { doCreate } from './controller/kubectl/create'

plugins/plugin-kubectl/src/lib/model/resource.ts

@@ -63,7 +63,7 @@ export class DefaultKubeStatus implements KubeStatus {
   public message = undefined
 }
 
-interface WithOwnerReferences {
+export interface WithOwnerReferences {
   ownerReferences: {
     apiVersion: string
     kind: string

plugins/plugin-kubectl/src/plugin.ts

@@ -20,6 +20,7 @@ import apiResources from './controller/kubectl/api-resources'
 import contexts from './controller/kubectl/contexts'
 import create from './controller/kubectl/create'
 import describe from './controller/kubectl/describe'
+import edit from './controller/kubectl/edit'
 import explain from './controller/kubectl/explain'
 import kdelete from './controller/kubectl/delete'
 import kget from './controller/kubectl/get'
@@ -39,6 +40,7 @@ export default async (registrar: Registrar) => {
   create(registrar)
   describe(registrar)
   explain(registrar)
+  edit(registrar)
   kdelete(registrar)
   kget(registrar)
   kgetNs(registrar)