Merge branch 'develop' of github.com:devtron-labs/dashboard into chore/main-dev-sync

Author: eshankvaish

.eslintignore

@@ -5,7 +5,7 @@
 .eslintrc.js
 vite.config.mts
 
-# The following files have eslint errors/warningssrc/App.tsx
+# The following files have eslint errors/warnings
 src/App.tsx
 src/Pages/GlobalConfigurations/Authorization/APITokens/__tests__/ApiTokens.test.tsx
 src/components/AppSelector/AppSelector.tsx
@@ -82,9 +82,7 @@ src/components/ClusterNodes/constants.ts
 src/components/Hotjar/Hotjar.tsx
 src/components/Jobs/ExpandedRow/ExpandedRow.tsx
 src/components/Jobs/JobDetails/JobDetails.tsx
-src/components/Jobs/JobList/JobListContainer.tsx
 src/components/Jobs/JobList/JobListView.tsx
-src/components/Jobs/JobList/JobsList.tsx
 src/components/Jobs/Jobs.tsx
 src/components/Jobs/JobsEmptyState.tsx
 src/components/Jobs/Service.ts
@@ -94,7 +92,6 @@ src/components/ResourceBrowser/ResourceList/ResourceList.component.tsx
 src/components/ResourceBrowser/ResourceList/__tests__/Sidebar.test.tsx
 src/components/__mocks__/monaco-editor.js
 src/components/__mocks__/xterm-webfont.js
-src/components/app/EventsLogs.tsx
 src/components/app/LogFilter.test.ts
 src/components/app/LogFilter.ts
 src/components/app/Overview/EnvironmentList.tsx
@@ -104,7 +101,6 @@ src/components/app/Overview/utils.tsx
 src/components/app/ResourceTreeNodes.tsx
 src/components/app/ResponsiveDrawer.tsx
 src/components/app/WebWorker.ts
-src/components/app/__tests__/EventsLogs.test.tsx
 src/components/app/appLabelCommon.tsx
 src/components/app/create/CreateApp.tsx
 src/components/app/create/validationRules.ts
@@ -159,16 +155,12 @@ src/components/app/details/triggerView/workflow/nodes/triggerCINode.tsx
 src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx
 src/components/app/details/triggerView/workflow/nodes/workflow.utils.tsx
 src/components/app/grepSSEworker.ts
-src/components/app/list-new/AppList.tsx
 src/components/app/list-new/AppListService.ts
 src/components/app/list-new/GenericAppList.tsx
 src/components/app/list-new/HelmAppList.tsx
-src/components/app/list/AppListView.tsx
-src/components/app/list/DevtronAppListContainer.tsx
 src/components/app/list/TriggerUrl.tsx
 src/components/app/list/__tests__/AppListView.test.tsx
 src/components/app/list/appList.modal.ts
-src/components/app/list/appStatus/AppStatus.tsx
 src/components/app/list/emptyView/Empty.tsx
 src/components/app/list/expandedRow/ExpandedRow.tsx
 src/components/app/service.ts
@@ -250,7 +242,6 @@ src/components/cluster/ClusterComponentModal.tsx
 src/components/cluster/ClusterForm.tsx
 src/components/cluster/ClusterInfoStepsModal.tsx
 src/components/cluster/ClusterInstallStatus.tsx
-src/components/cluster/Environment.tsx
 src/components/cluster/UseNameListDropdown.tsx
 src/components/cluster/cluster.service.ts
 src/components/cluster/cluster.util.ts
@@ -281,23 +272,20 @@ src/components/common/HiddenInput/HiddenInput.tsx
 src/components/common/List/List.tsx
 src/components/common/MultiSelect/MultiSelect.tsx
 src/components/common/Select/Select.tsx
-src/components/common/ToastBody.tsx
 src/components/common/ValidateForm/ValidateForm.tsx
 src/components/common/eaEmptyState/EAEmptyState.tsx
 src/components/common/edge/rectangularEdge.tsx
 src/components/common/edge/straightEdge.tsx
 src/components/common/errorBoundary.tsx
-src/components/common/filter/filters.tsx
 src/components/common/formFields/CopyButton.tsx
 src/components/common/formFields/CustomPassword.tsx
 src/components/common/formFields/DevtronSwitch.tsx
 src/components/common/formFields/Typeahead.tsx
-src/components/common/formFields/Widgets/Widgets.tsx
 src/components/common/helpers/Helpers.tsx
 src/components/common/helpers/compareVersion.ts
 src/components/common/helpers/isSubset.ts
 src/components/common/helpers/time.ts
-src/components/common/helpers/util.ts
+src/components/common/helpers/utils.tsx
 src/components/common/helpers/workflowURL.ts
 src/components/common/hooks/FileReader.ts
 src/components/common/hooks/__tests__/FileReader.test.tsx
@@ -418,7 +406,6 @@ src/components/v2/appDetails/appDetails.store.ts
 src/components/v2/appDetails/appDetails.type.ts
 src/components/v2/appDetails/ea/EAAppDetail.component.tsx
 src/components/v2/appDetails/k8Resource/FilterResource.tsx
-src/components/v2/appDetails/k8Resource/K8Resource.component.tsx
 src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx
 src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
 src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx
@@ -441,7 +428,6 @@ src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts
 src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
 src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
 src/components/v2/appDetails/k8Resource/nodeType/NodeTree.component.tsx
-src/components/v2/appDetails/k8Resource/nodeType/PodHeader.component.tsx
 src/components/v2/appDetails/k8Resource/nodeType/PodTabSection.tsx
 src/components/v2/appDetails/k8Resource/nodeType/__tests__/NodeTree.component.test.ts
 src/components/v2/appDetails/k8Resource/nodeType/nodeType.util.ts
@@ -462,7 +448,7 @@ src/components/v2/common/ReactSelectCustomization.tsx
 src/components/v2/common/message.ui.tsx
 src/components/v2/devtronStackManager/AboutDevtronView.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.component.tsx
-src/components/v2/devtronStackManager/DevtronStackManager.service.ts
+src/components/v2/devtronStackManager/DevtronStackManager.service.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.tsx
 src/components/v2/devtronStackManager/DevtronStackManager.utils.ts
 src/components/v2/devtronStackManager/SuccessModalComponent.tsx
@@ -476,11 +462,9 @@ src/components/v2/utils/useSharedState.ts
 src/components/v2/values/ChartValues.component.tsx
 src/components/v2/values/chartValuesDiff/ChartRepoSelector.tsx
 src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
-src/components/v2/values/chartValuesDiff/ChartValuesGUIView.tsx
 src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
 src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
 src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
-src/components/v2/values/chartValuesDiff/ChartValuesView.utils.ts
 src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
 src/components/v2/values/common/chartValues.api.ts
 src/components/workflowEditor/CDSuccessModal.tsx

.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
         'airbnb',
         'airbnb/hooks',
         'prettier',
+        'plugin:storybook/recommended',
     ],
     rules: {
         'prettier/prettier': ['error'],

.gitignore

@@ -36,3 +36,6 @@ playwright/.auth/
 .npmrc
 
 package-lock.json
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+    stories: [
+        {
+            directory: '../src/stories',
+            files: '*.stories.@(ts|tsx)',
+            titlePrefix: 'Design System/',
+        },
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-a11y',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    typescript: {
+        // Disabled to prevent connection lost issue while linking common lib locally
+        reactDocgen: false,
+    },
+    core: {
+        disableTelemetry: true,
+    },
+}
+export default config

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet"
+/>
+<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap" rel="stylesheet" />

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import '../src/css/application.scss'
+import { BrowserRouter } from 'react-router-dom'
+import { ToastManagerContainer } from '@devtron-labs/devtron-fe-common-lib'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        backgrounds: {
+            values: [
+                {
+                    name: 'Light',
+                    value: 'var(--N0)',
+                },
+                {
+                    name: 'Dark',
+                    value: 'var(--N700)',
+                },
+            ],
+            default: 'Light',
+        },
+    },
+    tags: ['autodocs'],
+    decorators: (Story) => (
+        <>
+            <BrowserRouter>
+                <Story />
+            </BrowserRouter>
+            <ToastManagerContainer />
+        </>
+    ),
+}
+
+export default preview

Dockerfile

@@ -6,6 +6,10 @@ COPY yarn.lock .
 
 RUN yarn install --network-timeout 600000
 
+COPY src/ src
+COPY nginx.conf .
+COPY tsconfig.json .
+COPY vite.config.mts .
 COPY . .
 
 RUN echo `git rev-parse --short HEAD` > health.html

Dockerfile.storybook

@@ -0,0 +1,19 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+COPY package.json .
+COPY yarn.lock .
+
+RUN yarn install --network-timeout 600000
+
+COPY . .
+
+RUN yarn build-storybook
+
+FROM nginx:stable
+
+COPY --from=builder /app/storybook-static/ /usr/share/nginx/html
+WORKDIR /usr/share/nginx/html
+
+CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]
+EXPOSE 80

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.3.0-patch-1",
+        "@devtron-labs/devtron-fe-common-lib": "0.3.14",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -40,14 +40,13 @@
         "react-monaco-editor": "^0.55.0",
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
-        "react-toastify": "^8.2.0",
         "react-virtualized": "^9.22.5",
         "recharts": "^2.1.9",
         "rollup-plugin-node-polyfills": "0.2.1",
         "rxjs": "^7.5.4",
         "sockjs-client": "1.6.1",
         "tippy.js": "^6.3.7",
-        "vite": "5.4.2",
+        "vite": "5.4.6",
         "vite-plugin-require-transform": "1.0.21",
         "vite-plugin-svgr": "^2.4.0",
         "xterm": "^4.19.0",
@@ -70,7 +69,9 @@
         "test-coverage": "npm run test -- --coverage --watchAll=false",
         "test:ci": "jest --watchAll=false --ci --json --coverage --testLocationInResults --outputFile=report.json",
         "jest": "jest",
-        "lint-staged": "lint-staged"
+        "lint-staged": "lint-staged",
+        "storybook": "IS_STORYBOOK=true storybook dev -p 6006",
+        "build-storybook": "IS_STORYBOOK=true storybook build"
     },
     "browserslist": [
         ">0.2%",
@@ -79,8 +80,18 @@
         "not op_mini all"
     ],
     "devDependencies": {
+        "@chromatic-com/storybook": "^1.8.0",
         "@playwright/test": "^1.32.1",
         "@sentry/cli": "^2.2.0",
+        "@storybook/addon-a11y": "^8.2.9",
+        "@storybook/addon-actions": "^8.2.9",
+        "@storybook/addon-essentials": "^8.2.9",
+        "@storybook/addon-interactions": "^8.2.9",
+        "@storybook/addon-links": "^8.2.9",
+        "@storybook/blocks": "^8.2.9",
+        "@storybook/react": "^8.2.9",
+        "@storybook/react-vite": "^8.2.9",
+        "@storybook/test": "^8.2.9",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@types/jest": "^27.4.1",
@@ -104,6 +115,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-storybook": "^0.8.0",
         "husky": "^7.0.4",
         "jest-extended": "^2.0.0",
         "jest-junit": "^13.0.0",
@@ -113,6 +125,7 @@
         "prettier": "^3.1.1",
         "react-test-render": "^1.1.2",
         "sass": "^1.69.7",
+        "storybook": "^8.2.9",
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
         "typescript": "5.5.4",
@@ -144,11 +157,5 @@
             "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
             "monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
         }
-    },
-    "resolutions": {
-        "**/@typescript-eslint/eslint-plugin": "^4.33.0",
-        "**/@typescript-eslint/parser": "^4.33.0",
-        "react": "^17.0.2",
-        "@types/react": "17.0.39"
     }
 }