custom code - webpack

CustomComponent.js

@@ -0,0 +1,8 @@
+// Your pre-compiled CommonJS code
+const React = require('react');
+
+const MyComponent = () => {
+  return React.createElement('p', null, 'TEST123');
+};
+
+module.exports = MyComponent;

package.json

@@ -99,7 +99,9 @@
     "recoil": "^0.7.5",
     "resize-observer-polyfill": "^1.5.1",
     "rfc6902": "^5.0.1",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.2",

public/extensions/extensions.yaml

@@ -1 +1,81 @@
-[]
+general:
+  resource:
+    kind: Application
+    group: applicationconnector.kyma-project.io
+    version: v1alpha1
+  urlPath: applications
+  scope: cluster
+  name: Applications
+  category: Integration
+  description: description
+details:
+  header:
+    - name: headers.description
+      source: spec.description
+      widget: CustomCode
+    - name: headers.access-label
+      source: spec.accessLabel
+  body:
+    - widget: Table
+      source: spec.services
+      name: headers.services-and-events
+      children:
+        - source: $count($item.entries[type='API'])
+          name: headers.apis
+        - source: $count($item.entries[type='Events'])
+          name: headers.events
+        - source: $item.providerDisplayName
+          name: headers.provider
+      collapsibleTitle: $item.displayName
+      collapsible:
+        - widget: Plain
+          children:
+            - source: $item.longDescription
+        - widget: Table
+          name: headers.apis
+          source: $item.entries[type = 'API']
+          children:
+            - source: $item.name
+              name: headers.name
+            - source: $item.accessLabel
+              name: headers.access-label
+            - widget: ExternalLink
+              source: $item.centralGatewayUrl
+              name: headers.gateway-url
+              copyable: true
+        - widget: Table
+          name: headers.events
+          source: $item.entries[type = 'Events']
+          children:
+            - source: $item.name
+              name: headers.name
+            - source: $item.accessLabel
+              name: headers.access-label
+            - widget: ExternalLink
+              source: $item.centralGatewayUrl
+              name: headers.gateway-url
+              copyable: true
+form:
+  - path: metadata.name
+    extraPaths:
+      - spec.accessLabel
+      - metadata.labels['app.kubernetes.io/name']
+  - path: spec.description
+    placeholder: placeholders.description
+  - path: spec.accessLabel
+translations:
+  en:
+    description: >-
+      {{[Application](https://kyma-project.io/docs/kyma/latest/05-technical-reference/00-custom-resources/ac-01-application)}}
+      represents an external solution connected to Kyma.
+    headers:
+      access-label: Access Label
+      apis: APIs
+      description: Description
+      events: Events
+      gateway-url: Central Gateway URL
+      name: Name
+      provider: Provider
+      services-and-events: Provided Services and Events
+    placeholders:
+      description: Provide a description for your Application

src/components/Extensibility/components/CustomCode/CustomCodeRenderer.js

@@ -0,0 +1,19 @@
+import DynamicGitHubComponent from './DynamicGitHubComponent';
+
+export function CustomCode({
+  value,
+  structure,
+  schema,
+  singleRootResource,
+  embedResource,
+  ...props
+}) {
+  const githubUrl =
+    'https://raw.githubusercontent.com/mrCherry97/busola/custom-code-babel/CustomComponent.js';
+
+  return (
+    <div>
+      <DynamicGitHubComponent githubUrl={githubUrl} />
+    </div>
+  );
+}

src/components/Extensibility/components/CustomCode/DynamicGitHubComponent.js

@@ -0,0 +1,60 @@
+// Your React component
+import React, { useEffect, useState } from 'react';
+import path from 'path';
+import webpack from 'webpack';
+import fs from 'fs';
+
+const DynamicGitHubComponent = ({ githubUrl }) => {
+  const [renderedComponent, setRenderedComponent] = useState(null);
+
+  useEffect(() => {
+    const fetchAndRenderComponent = async () => {
+      try {
+        // Dynamically generate Webpack configuration
+        const webpackConfig = {
+          mode: 'production',
+          entry: githubUrl,
+          output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: 'bundle.js',
+            libraryTarget: 'commonjs2',
+          },
+          module: {
+            rules: [
+              {
+                test: /\.js$/,
+                use: 'webpack-http-loader',
+              },
+            ],
+          },
+        };
+
+        // Run Webpack
+        const outputPath = webpackConfig.output.path;
+        await webpack(webpackConfig);
+
+        // Determine whether the component is using CommonJS or ES6 module syntax
+        const isCommonJS = fs.existsSync(`${outputPath}/bundle.js`); // Assuming bundle.js for CommonJS
+
+        // Dynamically import and render the component
+        const { default: componentFactory } = await import(
+          `./${outputPath}/bundle${isCommonJS ? '' : '.mjs'}`
+        );
+
+        // Update the state with the rendered component
+        setRenderedComponent(React.createElement(componentFactory));
+      } catch (error) {
+        console.error(
+          `Error loading and rendering component from URL ${githubUrl}:`,
+          error,
+        );
+      }
+    };
+
+    fetchAndRenderComponent();
+  }, [githubUrl]);
+
+  return <div>{renderedComponent || <div>Loading...</div>}</div>;
+};
+
+export default DynamicGitHubComponent;

src/components/Extensibility/components/index.js

@@ -23,6 +23,7 @@ import { FeaturedCard } from './FeaturedCard/FeaturedCard';
 import { APIRuleHost } from './APIRules/APIRuleHost';
 
 import { PendingWrapper } from './PendingWrapper';
+import { CustomCode } from './CustomCode/CustomCodeRenderer';
 
 export const widgets = {
   Null: () => '',
@@ -48,6 +49,7 @@ export const widgets = {
   Text,
   Wizard,
   FeaturedCard,
+  CustomCode,
 };
 
 export const valuePreprocessors = {