Omit ManagedFields from the Kubernetes resource YAML display. (#17497)

* Omit ManagedFields from the Kubernetes resource YAML display.

The default for the Kubernetes CLI tooling is to omit the managed fields
by default, since these are only present for internal machinery. For
the Kubernetes resource YAML display, the managed fields take up a ton
of space, but are never useful to operators who are interested in the
details of their Kubernetes resources.

This fixes #14177.

Signed-off-by: James Peach <jpeach@apache.org>

* Add a control to toggle whether the managed fields display.

So that managed fields can be used for debugging purposes, add a switch
to toggle allow managed fields to display. This is off by default.

Signed-off-by: James Peach <jpeach@apache.org>

---------

Signed-off-by: James Peach <jpeach@apache.org>

.changeset/fifty-laws-count.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes': patch
+---
+
+Omit managed fields in the Kubernetes resource YAML display.

plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx

@@ -25,6 +25,7 @@ import {
   Drawer,
   Switch,
   FormControlLabel,
+  FormGroup,
   Grid,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
@@ -150,6 +151,11 @@ const KubernetesDrawerContent = <T extends KubernetesDrawerable>({
 }: KubernetesDrawerContentProps<T>) => {
   const [isYaml, setIsYaml] = useState<boolean>(false);
 
+  // Toggle whether the Kubernetes resource managed fields should be shown in
+  // the YAML display. This toggle is only available when the YAML is being
+  // shown because managed fields are never visible in the structured display.
+  const [managedFields, setManagedFields] = useState<boolean>(false);
+
   const classes = useDrawerContentStyles();
   const cluster = useContext(ClusterContext);
   const { clusterLink, errorMessage } = tryFormatClusterLink({
@@ -208,21 +214,49 @@ const KubernetesDrawerContent = <T extends KubernetesDrawerable>({
             </BackstageButton>
           )}
         </div>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={isYaml}
-              onChange={event => {
-                setIsYaml(event.target.checked);
-              }}
-              name="YAML"
-            />
-          }
-          label="YAML"
-        />
+        <FormGroup className={classes.options}>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={isYaml}
+                onChange={event => {
+                  setIsYaml(event.target.checked);
+                }}
+                name="YAML"
+              />
+            }
+            label="YAML"
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={isYaml && managedFields}
+                onChange={event => {
+                  if (isYaml) {
+                    setManagedFields(event.target.checked);
+                  }
+                }}
+                name="Managed Fields"
+              />
+            }
+            label="Managed Fields"
+          />
+        </FormGroup>
       </div>
       <div className={classes.content}>
-        {isYaml && <CodeSnippet language="yaml" text={jsYaml.dump(object)} />}
+        {isYaml && (
+          <CodeSnippet
+            language="yaml"
+            text={jsYaml.dump(object, {
+              replacer: (key: string, value: string): any => {
+                if (!managedFields) {
+                  return key === 'managedFields' ? undefined : value;
+                }
+                return value;
+              },
+            })}
+          />
+        )}
         {!isYaml && (
           <StructuredMetadataTable
             metadata={renderObject(replaceNullsWithUndefined(object))}