feat: add flyout panel (#1)

Signed-off-by: Alexy Mantha <[email protected]>
alexymantha · Dec 14, 2023 · 7e7d4c8 · 7e7d4c8
1 parent 241efd4
commit 7e7d4c8
Show file tree

Hide file tree

Showing 10 changed files with 1,960 additions and 103 deletions.
diff --git a/ui/dist/extension.tar b/ui/dist/extension.tar
diff --git a/ui/dist/resources/extension-progressive-sync.js/extensions-progressive-sync.js b/ui/dist/resources/extension-progressive-sync.js/extensions-progressive-sync.js
diff --git a/ui/dist/resources/progressive-sync/ui/extensions.js b/ui/dist/resources/progressive-sync/ui/extensions.js
diff --git a/ui/extension.tar b/ui/extension.tar
diff --git a/ui/package.json b/ui/package.json
@@ -6,19 +6,52 @@
   "repository": "https://github.com/alexymantha/argocd-progressive-sync-extension",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js && tar -C dist -cvf dist/extension.tar resources"
+    "build": "webpack --config ./webpack.config.js --mode=development && tar -C dist -cvf extension.tar resources"
   },
   "peerDeependencies": {
-    "react": "^18.2.0"
+    "argo-ui": "git+https://github.com/argoproj/argo-ui.git",
+    "react": "^16.9.3",
+    "react-dom": "^16.9.3",
+    "moment": "^2.29.4"
   },
-  "dependencies": {
-    "typescript": "^5.2.2",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }, 
   "devDependencies": {
-    "@types/react": "^18.2.21",
-    "react": "^18.2.0",
-    "ts-loader": "^9.4.4"
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-helmet": "^6.1.0",
+    "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.25",
+    "argo-ui": "git+https://github.com/argoproj/argo-ui.git",
+    "babel-preset-react": "^6.24.1",
+    "esbuild-loader": "^3.0.1",
+    "portable-fetch": "^3.0.0",
+    "raw-loader": "0.5.1",
+    "react-dom": "^17.0.2",
+    "react-keyhooks": "^0.2.3",
+    "rxjs": "^7.1.0",
+    "sass": "1.34.1",
+    "sass-loader": "10.2.1",
+    "style-loader": "1.3.0",
+    "ts-loader": "8.2.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^4.7.2"
   }
 }
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,34 +1,57 @@
+import {HelpIcon} from 'argo-ui';
 import * as React from 'react';
 
+const TITLE = "PROGRESSIVE SYNC";
+const ID = "PROGRESSIVE_SYNC";
+
+interface SectionInfo {
+    title: string;
+    helpContent?: string;
+}
+
+const sectionLabel = (info: SectionInfo) => (
+    <label style={{fontSize: '12px', fontWeight: 600, color: "#6D7F8B"}}>
+        {info.title}
+        {info.helpContent && <HelpIcon title={info.helpContent} />}
+    </label>
+);
+
 export const Extension = (props: {
   application: any;
+  openFlyout: () => any;
 }) => {
   return (
-    <div className='application-status-panel__item-value' style={{ margin: 'auto 0' }}>
-      <a className='neutral'>
-        <i className={`fa fa-pause-circle`} /> Progressive Sync
-      </a>
-    </div>
+    <React.Fragment>
+      <div className='application-status-panel__item' style={{position: 'relative'}}>
+        {sectionLabel({
+          title: TITLE,
+        })}
+        <div className='application-status-panel__item-value' style={{ margin: 'auto 0' }}>
+          <a className='neutral' onClick={() => props.openFlyout()}>
+            <i className={`fa fa-pause-circle`} /> Progressive Sync
+          </a>
+        </div>
+      </div>
+    </React.Fragment>
   )
 }
 
-export const AnotherExtension = (props: {
+export const Flyout = (props: {
   application: any;
 }) => {
   return (
-    <div className='application-status-panel__item-value' style={{ margin: 'auto 0' }}>
-      <a className='warning'>
-        <i className={`fa fa-play-circle`} /> Extension
-      </a>
-    </div>
+    <React.Fragment>
+      <div className='application-status-panel__item' style={{position: 'relative'}}>
+        <p>Information about the extension</p> 
+      </div>
+    </React.Fragment>
   )
 }
 
 export const component = Extension;
-export const anotherComponent = AnotherExtension;
+export const flyout = Flyout;
 
 // Register the component extension in ArgoCD
 ((window: any) => {
-  window?.extensionsAPI?.registerStatusPanelExtension(component, 'PROGRESSIVE SYNC');
-  window?.extensionsAPI?.registerStatusPanelExtension(anotherComponent, 'ANOTHER EXTENSION', {helpContent: "Example of help content"});
+  window?.extensionsAPI?.registerStatusPanelExtension(component, TITLE, ID, flyout);
 })(window)
diff --git a/ui/tslint.json b/ui/tslint.json
@@ -0,0 +1,21 @@
+{
+    "extends": [
+        "tslint:recommended", "tslint-react", "tslint-plugin-prettier", "tslint-config-prettier"
+    ],
+    "jsRules": {},
+    "rules": {
+        "prettier": true,
+        "quotemark": [true, "single"],
+        "no-var-requires": false,
+        "interface-name": false,
+        "jsx-no-multiline-js": false,
+        "object-literal-sort-keys": false,
+        "jsx-alignment": false,
+        "max-line-length": [true, 200],
+        "jsx-no-lambda": false,
+        "array-type": false,
+        "max-classes-per-file": false,
+        "newline-per-chained-call": false
+    },
+    "rulesDirectory": []
+}
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
@@ -1,31 +1,57 @@
 const path = require('path');
+const webpack = require("webpack");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
 
 const extName = 'progressive-sync';
 
 const config = {
   entry: {
     extension: './src/index.tsx',
   },
+  ignoreWarnings: [{
+    module: new RegExp('/node_modules/argo-ui/.*')
+  }],
   output: {
-    filename: 'extensions.js',
-    path: __dirname + `/dist/resources/${extName}/ui`,
+    filename: `extensions-${extName}.js`,
+    path: __dirname + `/dist/resources/extension-${extName}.js`,
     libraryTarget: 'window',
-    library: ['extensions'],
+    library: ['tmp', 'extensions'],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json', '.ttf'],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserWebpackPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],  
+  },
   externals: {
-    react: 'React',
+    react: "React",
+    "react-dom": "ReactDOM",
+    moment: "Moment",
   },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false,
+    }),
+  ],
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
+        test: /\.(ts|js)x?$/,
+        loader: "esbuild-loader",
         options: {
-          allowTsInNodeModules: true,
-          configFile: path.resolve('./src/tsconfig.json')
+          loader: "tsx",
+          target: "es2015",
         },
       },
       {