argocd: add custom extension

Signed-off-by: Victor Login <batazor111@gmail.com>

internal/extension/argocd-extension-docs/README.md

@@ -0,0 +1,4 @@
+## ArgoCD extension docs
+
+This extension add a new tab to the ArgoCD UI to display the documentation 
+of the application.

internal/extension/argocd-extension-docs/manifests/extension.yaml

@@ -0,0 +1,13 @@
+apiVersion: argoproj.io/v1alpha1
+kind: ArgoCDExtension
+metadata:
+  name: argocd-extension-docs
+  labels:
+    tab: "Docs"
+    icon: "fa-files"
+  finalizers:
+    - extensions-finalizer.argocd.argoproj.io
+spec:
+  sources:
+    - web:
+        url: https://raw.githubusercontent.com/speedfl/argocd-apps-of-applicationset/master/ui/dist/extension.tar

internal/extension/argocd-extension-docs/ui/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

internal/extension/argocd-extension-docs/ui/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "argocd-extension-docs",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "peerDeependencies": {
+    "react": "^18.0.0"
+  },
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js && tar -C dist -cvf dist/extension.tar resources"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
+    "ts-loader": "^9.4.2"
+  },
+  "dependencies": {
+    "typescript": "^4.4.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  }
+}

internal/extension/argocd-extension-docs/ui/src/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export const Extension = (props: {
+    tree: any;
+    resource: any;
+}) => (
+    <div>Hello {props.resource.metadata.name}!</div>
+);
+
+export const component = Extension;

internal/extension/argocd-extension-docs/ui/src/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es5",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "declaration": false,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es2017", "dom"]
+  },
+  "include": ["./**/*"],
+  "exclude": ["node_modules"]
+}

internal/extension/argocd-extension-docs/ui/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+
+const groupKind = 'argoproj.io/ApplicationSet';
+
+const config = {
+    mode: 'production',
+    entry: {
+        extension: './src/index.tsx',
+    },
+    output: {
+        filename: 'extensions.js',
+        path: __dirname + `/dist/resources/${groupKind}/ui`,
+        libraryTarget: 'window',
+        library: ['extensions', 'resources', groupKind],
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.json', '.ttf'],
+    },
+    externals: {
+        react: 'React',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                options: {
+                    allowTsInNodeModules: true,
+                    configFile: path.resolve('./src/tsconfig.json')
+                },
+            },
+            {
+                test: /\.scss$/,
+                use: ['style-loader', 'raw-loader', 'sass-loader'],
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'raw-loader'],
+            },
+        ],
+    },
+};
+
+module.exports = config;