CONSOLE-3769: Refactor weird getResourceSidebarSamples

frontend/packages/console-shared/locales/en/console-shared.json

@@ -253,19 +253,6 @@
   "This console plugin will be able to provide a custom interface and run any Kubernetes command as the logged in user. Make sure you trust it before enabling.": "This console plugin will be able to provide a custom interface and run any Kubernetes command as the logged in user. Make sure you trust it before enabling.",
   "OLSConfig": "OLSConfig",
   "OLSConfigs": "OLSConfigs",
-  "{{label}} details": "{{label}} details",
-  "Provisioned as node": "Provisioned as node",
-  "Select options": "Select options",
-  "Select input": "Select input",
-  "Pod": "Pod",
-  "Pods": "Pods",
-  "Scaled to 0": "Scaled to 0",
-  "Scaling to {{podSubTitle}}": "Scaling to {{podSubTitle}}",
-  "Autoscaled": "Autoscaled",
-  "to 0": "to 0",
-  "Autoscaling": "Autoscaling",
-  "to {{count}} Pod_one": "to {{count}} Pod",
-  "to {{count}} Pod_other": "to {{count}} Pods",
   "Allow reading Nodes in the core API groups (for ClusterRoleBinding)": "Allow reading Nodes in the core API groups (for ClusterRoleBinding)",
   "This \"ClusterRole\" is allowed to read the resource \"Nodes\" in the core group (because a Node is cluster-scoped, this must be bound with a \"ClusterRoleBinding\" to be effective).": "This \"ClusterRole\" is allowed to read the resource \"Nodes\" in the core group (because a Node is cluster-scoped, this must be bound with a \"ClusterRoleBinding\" to be effective).",
   "\"GET/POST\" requests to non-resource endpoint and all subpaths (for ClusterRoleBinding)": "\"GET/POST\" requests to non-resource endpoint and all subpaths (for ClusterRoleBinding)",
@@ -308,10 +295,23 @@
   "Provides a list of all the available user perspectives which are shown in the perspective dropdown. The perspectives must be added below spec customization.": "Provides a list of all the available user perspectives which are shown in the perspective dropdown. The perspectives must be added below spec customization.",
   "Add pinned resources": "Add pinned resources",
   "Provides a list of resources to be pinned on the Developer perspective navigation. The pinned resources must be added below spec customization perspectives.": "Provides a list of resources to be pinned on the Developer perspective navigation. The pinned resources must be added below spec customization perspectives.",
-  "Set maxUnavaliable to 0": "Set maxUnavaliable to 0",
+  "Set maxUnavailable to 0": "Set maxUnavailable to 0",
   "An eviction is allowed if at most 0 pods selected by \"selector\" are unavailable after the eviction.": "An eviction is allowed if at most 0 pods selected by \"selector\" are unavailable after the eviction.",
   "Set minAvailable to 25%": "Set minAvailable to 25%",
   "An eviction is allowed if at least 25% of pods selected by \"selector\" will still be available after the eviction.": "An eviction is allowed if at least 25% of pods selected by \"selector\" will still be available after the eviction.",
+  "{{label}} details": "{{label}} details",
+  "Provisioned as node": "Provisioned as node",
+  "Select options": "Select options",
+  "Select input": "Select input",
+  "Pod": "Pod",
+  "Pods": "Pods",
+  "Scaled to 0": "Scaled to 0",
+  "Scaling to {{podSubTitle}}": "Scaling to {{podSubTitle}}",
+  "Autoscaled": "Autoscaled",
+  "to 0": "to 0",
+  "Autoscaling": "Autoscaling",
+  "to {{count}} Pod_one": "to {{count}} Pod",
+  "to {{count}} Pod_other": "to {{count}} Pods",
   "Helm Release": "Helm Release",
   "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.": "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.",
   "Cannot be longer than {{characterCount}} characters.": "Cannot be longer than {{characterCount}} characters.",

frontend/packages/console-shared/src/components/editor/CodeEditorSidebar.tsx

@@ -1,11 +1,11 @@
 import type { MutableRefObject, FC } from 'react';
 import { useCallback } from 'react';
-import { JSONSchema7 } from 'json-schema';
+import type { JSONSchema7 } from 'json-schema';
 import { Range, Selection } from 'monaco-editor';
 import { CodeEditorRef } from '@console/dynamic-plugin-sdk';
 import { ResourceSidebar } from '@console/internal/components/sidebars/resource-sidebar';
-import { K8sKind } from '@console/internal/module/k8s';
-import { Sample } from '../../utils';
+import type { K8sKind } from '@console/internal/module/k8s';
+import type { Sample } from '@console/shared/src/hooks/useResourceSidebarSamples';
 import { downloadYaml } from './yaml-download-utils';
 
 type CodeEditorSidebarProps = {

frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx

@@ -3,7 +3,6 @@ import { useRef, useState, useCallback } from 'react';
 import { css } from '@patternfly/react-styles';
 import { FormikValues, useField, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
-import { useTranslation } from 'react-i18next';
 import {
   useResolvedExtensions,
   isYAMLTemplate,
@@ -16,7 +15,7 @@ import { ConsoleYAMLSampleModel } from '@console/internal/models';
 import { getYAMLTemplates } from '@console/internal/models/yaml-templates';
 import { definitionFor, K8sResourceCommon, referenceForModel } from '@console/internal/module/k8s';
 import { ToggleSidebarButton } from '@console/shared/src/components/editor/ToggleSidebarButton';
-import { getResourceSidebarSamples } from '../../utils';
+import { useResourceSidebarSamples } from '@console/shared/src/hooks/useResourceSidebarSamples';
 import { CodeEditorFieldProps } from './field-types';
 
 import './CodeEditorField.scss';
@@ -40,7 +39,6 @@ const CodeEditorField: FC<CodeEditorFieldProps> = ({
 }) => {
   const [field] = useField(name);
   const { setFieldValue } = useFormikContext<FormikValues>();
-  const { t } = useTranslation();
   const editorRef = useRef();
 
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(true);
@@ -49,17 +47,11 @@ const CodeEditorField: FC<CodeEditorFieldProps> = ({
     SampleResource,
   );
 
-  const { samples, snippets } = model
-    ? getResourceSidebarSamples(
-        model,
-        {
-          data: sampleResources,
-          loaded,
-          loadError,
-        },
-        t,
-      )
-    : { samples: [], snippets: [] };
+  const { samples, snippets } = useResourceSidebarSamples(model, {
+    data: sampleResources,
+    loaded,
+    loadError,
+  });
 
   const definition = model ? definitionFor(model) : { properties: [] };
   const hasSchema = !!schema || (!!definition && !isEmpty(definition.properties));