Parametric editor implementation.

plugins/cad/.eslintrc.js

@@ -14,4 +14,9 @@
  * limitations under the License.
  */
 
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    '@typescript-eslint/no-use-before-define': 'off',
+    'no-else-return': 'off',
+  },
+});

plugins/cad/package.json

@@ -36,11 +36,13 @@
     "@material-ui/lab": "4.0.0-alpha.57",
     "@monaco-editor/loader": "1.3.0",
     "@monaco-editor/react": "4.4.2",
+    "change-case": "^5.4.4",
     "diff": "^5.0.0",
     "js-yaml": "^4.0.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "monaco-editor": "^0.33.0",
+    "nanoid": "^5.0.7",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {

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

@@ -75,7 +75,7 @@ export const Tabs = (props: TabsProps) => {
         ))}
       </MUITabs>
       {props.tabs.map(({ content }, index) => (
-        <div className={classes.content} hidden={value !== index}>
+        <div className={classes.content} key={index} hidden={value !== index}>
           {content}
         </div>
       ))}

plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx

@@ -23,7 +23,6 @@ import {
   DeploymentEditor,
   StatefulSetEditor,
 } from './FirstClassEditors/DeploymentEditor';
-import { CapacityEditor } from './FirstClassEditors/CapacityEditor';
 import { IngressEditor } from './FirstClassEditors/IngressEditor';
 import { KptfileEditor } from './FirstClassEditors/KptfileEditor';
 import { NamespaceEditor } from './FirstClassEditors/NamespaceEditor';
@@ -34,8 +33,9 @@ import { ServiceAccountEditor } from './FirstClassEditors/ServiceAccountEditor';
 import { ServiceEditor } from './FirstClassEditors/ServiceEditor';
 import { SetLabelsEditor } from './FirstClassEditors/SetLabelsEditor';
 import { PackageVariantSetEditor } from './FirstClassEditors/PackageVariantSetEditor';
-import { NephioTokenEditor } from './FirstClassEditors/NephioTokenEditor';
-import { WorkloadClusterEditor } from './FirstClassEditors/WorkloadClusterEditor';
+import { NephioCapacityParametricEditor } from './ParametricFirstClassEditors/NephioCapacityParametricEditor';
+import { NephioTokenParametricEditor } from './ParametricFirstClassEditors/NephioTokenParametricEditor';
+import { NephioWorkloadClusterParametricEditor } from './ParametricFirstClassEditors/NephioWorkloadClusterParametricEditor';
 
 type OnUpdatedYamlFn = (yaml: string) => void;
 type OnNoNamedEditorFn = () => void;
@@ -114,11 +114,19 @@ export const FirstClassEditorSelector = ({
       return <SetLabelsEditor yaml={yaml} onUpdatedYaml={onUpdatedYaml} />;
 
     case 'infra.nephio.org/v1alpha1/Token':
-      return <NephioTokenEditor yaml={yaml} onUpdatedYaml={onUpdatedYaml} />;
+      return (
+        <NephioTokenParametricEditor
+          yamlText={yaml}
+          onResourceChange={onUpdatedYaml}
+        />
+      );
 
     case 'infra.nephio.org/v1alpha1/WorkloadCluster':
       return (
-        <WorkloadClusterEditor yaml={yaml} onUpdatedYaml={onUpdatedYaml} />
+        <NephioWorkloadClusterParametricEditor
+          yamlText={yaml}
+          onResourceChange={onUpdatedYaml}
+        />
       );
 
     case 'kpt.dev/v1/Kptfile':
@@ -152,7 +160,12 @@ export const FirstClassEditorSelector = ({
       );
 
     case 'req.nephio.org/v1alpha1/Capacity':
-      return <CapacityEditor yaml={yaml} onUpdatedYaml={onUpdatedYaml} />;
+      return (
+        <NephioCapacityParametricEditor
+          yamlText={yaml}
+          onResourceChange={onUpdatedYaml}
+        />
+      );
 
     case 'v1/ConfigMap':
       return <ConfigMapEditor yaml={yaml} onUpdatedYaml={onUpdatedYaml} />;