@devtron-labs/devtron-fe-common-lib 0.0.56 → 0.0.58-beta-3

package/.eslintignore

@@ -0,0 +1,96 @@
+.eslintrc.js
+
+# Files with ESLint errors/warnings
+src/Common/AddCDButton/AddCDButton.tsx
+src/Common/AddCDButton/utils.tsx
+src/Common/Api.ts
+src/Common/AppStatus/AppStatus.tsx
+src/Common/AppStatus/index.ts
+src/Common/AppStatus/utils.ts
+src/Common/BreadCrumb/BreadCrumb.tsx
+src/Common/BreadCrumb/BreadcrumbStore.tsx
+src/Common/BreadCrumb/Types.ts
+src/Common/CIPipeline.Types.ts
+src/Common/ChartVersionAndTypeSelector.tsx
+src/Common/Checkbox.tsx
+src/Common/ClipboardButton/ClipboardButton.tsx
+src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
+src/Common/Common.service.ts
+src/Common/Constants.ts
+src/Common/CustomInput/CustomInput.tsx
+src/Common/CustomInput/Types.ts
+src/Common/CustomInput/index.ts
+src/Common/CustomTagSelector/PropagateTagInfo.tsx
+src/Common/CustomTagSelector/ResizableTagTextArea.tsx
+src/Common/CustomTagSelector/TagDetails.tsx
+src/Common/CustomTagSelector/TagLabelSelect.tsx
+src/Common/CustomTagSelector/TagLabelValueSelector.tsx
+src/Common/CustomTagSelector/TagSelector.utils.ts
+src/Common/CustomTagSelector/Types.ts
+src/Common/CustomTagSelector/ValidationRules.ts
+src/Common/CustomTagSelector/index.ts
+src/Common/DebouncedSearch/DebouncedSearch.tsx
+src/Common/DebouncedSearch/Utils.ts
+src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
+src/Common/DeleteComponentModal/DeleteComponent.tsx
+src/Common/DeleteComponentModal/types.ts
+src/Common/DevtronProgressing/DevtronProgressing.tsx
+src/Common/Dialogs/ConfirmationDialog.tsx
+src/Common/Dialogs/DeleteDialog.tsx
+src/Common/Dialogs/DialogForm.tsx
+src/Common/Dialogs/ForceDeleteDialog.tsx
+src/Common/Dialogs/Types.ts
+src/Common/Dialogs/index.ts
+src/Common/DraggableWrapper/DraggableButton.tsx
+src/Common/DraggableWrapper/DraggableWrapper.tsx
+src/Common/Drawer/Drawer.tsx
+src/Common/EmptyState/EmptyState.tsx
+src/Common/EmptyState/GenericEmptyState.tsx
+src/Common/Error.tsx
+src/Common/ErrorScreenNotFound.tsx
+src/Common/Grid/Grid.tsx
+src/Common/Helper.tsx
+src/Common/Hooks/UseClickOutside/UseClickOutside.tsx
+src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx
+src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
+src/Common/ImageTags.Types.ts
+src/Common/ImageTags.tsx
+src/Common/InfoColorBar/InfoColourbar.tsx
+src/Common/Modals/Modal.tsx
+src/Common/Modals/OpaqueModal.tsx
+src/Common/Modals/VisibleModal.tsx
+src/Common/Modals/VisibleModal2.tsx
+src/Common/MultiSelectCustomization.tsx
+src/Common/Policy.Types.ts
+src/Common/PopupMenu.tsx
+src/Common/Progressing.tsx
+src/Common/RJSF/Form.tsx
+src/Common/RJSF/common/FieldRow.tsx
+src/Common/RJSF/config.ts
+src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx
+src/Common/RJSF/templates/ArrayFieldTemplate.tsx
+src/Common/RJSF/templates/BaseInput.tsx
+src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx
+src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx
+src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx
+src/Common/RJSF/templates/Description.tsx
+src/Common/RJSF/templates/Field.tsx
+src/Common/RJSF/templates/FieldErrorTemplate.tsx
+src/Common/RJSF/templates/ObjectFieldTemplate.tsx
+src/Common/RJSF/templates/TitleField.tsx
+src/Common/RJSF/templates/WrapIfAdditionalTemplate.tsx
+src/Common/RJSF/utils.ts
+src/Common/RJSF/widgets/Checkbox.tsx
+src/Common/RJSF/widgets/Select.tsx
+src/Common/RadioGroup.tsx
+src/Common/RadioGroup/RadioGroup.tsx
+src/Common/Reload.tsx
+src/Common/ResizableTextarea.tsx
+src/Common/Security/ScanVulnerabilitiesTable.tsx
+src/Common/ServerError.ts
+src/Common/TippyCustomized.tsx
+src/Common/ToastBody.tsx
+src/Common/Toggle/Toggle.tsx
+src/Common/Types.ts
+src/custom.d.ts
+src/index.ts

package/.eslintrc.js

@@ -1,41 +1,109 @@
 module.exports = {
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
+    plugins: ['@typescript-eslint', 'react', 'prettier'],
     env: {
-        commonjs: true,
         browser: true,
-        es6: true,
+        es2021: true,
     },
     parserOptions: {
-        ecmaVersion: 2018,
+        ecmaVersion: 2021,
         sourceType: 'module',
         ecmaFeatures: {
             jsx: true,
         },
         project: ['./tsconfig.json'],
     },
+    globals: {
+        JSX: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'airbnb',
+        'airbnb/hooks',
+        'prettier',
+    ],
     rules: {
+        'prettier/prettier': ['error'],
+        'linebreak-style': ['error', 'unix'],
+        'no-console': 'warn',
         'no-var': 'error',
         'no-duplicate-imports': 'error',
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': 'warn',
         '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-use-before-define': 'off',
         '@typescript-eslint/explicit-member-accessibility': 'off',
-        curly: [2, 'all'],
-        'keyword-spacing': 'error',
-        'prettier/prettier': ['error', { semi: false }],
+        // Since we are using typescript, we can disable the no-unused-vars rule for enum,etc
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': 'error',
+        'react/jsx-filename-extension': [
+            'error',
+            {
+                extensions: ['tsx'],
+            },
+        ],
+        'react/jsx-props-no-spreading': 'off',
+        'react/prefer-stateless-function': 'off',
+        'jsx-a11y/click-events-have-key-events': 'off',
+        'jsx-a11y/no-static-element-interactions': 'off',
+        'jsx-a11y/no-noninteractive-element-interactions': 'off',
+        'no-underscore-dangle': 'off',
+        'import/no-extraneous-dependencies': [
+            'warn',
+            {
+                devDependencies: true,
+            },
+        ],
+        'no-plusplus': [
+            'error',
+            {
+                allowForLoopAfterthoughts: true,
+            },
+        ],
+        // Since we dont use prop-types, we can disable this rule
+        'react/require-default-props': 'off',
+        'react-hooks/exhaustive-deps': 'off',
+        'react/function-component-definition': [
+            'warn',
+            {
+                namedComponents: 'arrow-function',
+                unnamedComponents: 'arrow-function',
+            },
+        ],
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
+        // additional rules:
+        '@typescript-eslint/no-floating-promises': 'error',
+        'import/extensions': [
+            'warn',
+            'ignorePackages',
+            {
+                js: 'never',
+                jsx: 'never',
+                ts: 'never',
+                tsx: 'never',
+            },
+        ],
     },
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
-        'prettier/@typescript-eslint',
-        'plugin:prettier/recommended',
-        'plugin:react/recommended',
+    overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                'no-undef': 'off',
+            },
+        },
     ],
     settings: {
         react: {
             version: 'detect',
         },
+        'import/resolver': {
+            node: {
+                moduleDirectory: ['src', 'node_modules'],
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
     },
 }

package/.github/pull_request_template.md

@@ -0,0 +1,25 @@
+# Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+## Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+## How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+
+- [ ] Test A
+- [ ] Test B
+
+## Checklist
+
+- [ ] The title of the PR states what changed and the related issues number (used for the release note).
+- [ ] Does this PR require documentation updates?
+- [ ] I've updated documentation as required by this PR.
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas

package/.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: Common Lib CI
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - edited
+      - reopened
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Check linting issues
+      run: npm run lint
+
+    - name: Build Lib
+      run: npm run build-lib

package/.github/workflows/release-package.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
       - run: npm ci
       - run: npm test
 
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
           registry-url: https://npm.pkg.github.com/
       - run: npm ci
       - run: npm run build-lib
@@ -46,4 +46,3 @@ jobs:
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx tsc --noEmit
+npm run lint-staged

package/.lintstagedrc

@@ -0,0 +1,3 @@
+{
+    "*.{js,jsx,ts,tsx}": ["npx eslint"]
+}

package/.nvmrc

@@ -0,0 +1 @@
+v16.13.0

package/dist/Common/Common.service.d.ts

@@ -12,9 +12,9 @@ export declare const SourceTypeMap: {
     BranchRegex: string;
 };
 export declare function getUserRole(appName?: string): Promise<UserRole>;
-export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
+export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType<any>>;
 export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
-export declare function fetchChartTemplateVersions(): Promise<ResponseType>;
+export declare function fetchChartTemplateVersions(): Promise<ResponseType<any>>;
 export {};

package/dist/Common/Constants.d.ts

@@ -64,12 +64,4 @@ export declare const RepositoryAction: {
     CHART_PULL: string;
     CHART_PUSH: string;
 };
-export declare enum APPROVAL_MODAL_TYPE {
-    CONFIG = "CONFIG",
-    DEPLOYMENT = "DEPLOYMENT"
-}
 export declare const MAX_Z_INDEX = 2147483647;
-export declare const SELECTED_APPROVAL_TAB_STATE: {
-    APPROVAL: string;
-    PENDING: string;
-};

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CustomInputProps } from './Types';
-export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, }: CustomInputProps): JSX.Element;
+export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo }: CustomInputProps): JSX.Element;

package/dist/Common/CustomInput/Types.d.ts

@@ -26,5 +26,4 @@ export interface CustomInputProps {
     onKeyDown?: (e: any) => void;
     required?: boolean;
     additionalErrorInfo?: React.ReactNode;
-    inputWrapClassName?: string;
 }

package/dist/Common/DebouncedSearch/DebouncedSearch.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { DebouncedSearchProps } from './Types';
 /**
+ * @deprecated Use `SearchBar` component instead.
+ *
  * @param onSearch - Callback function to be called on search
  * @param Icon - (Optional) Icon to be shown before the input
  * @param iconClass - (Optional) Class for the icon

package/dist/Common/EmptyState/GenericEmptyState.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { GenericEmptyStateType } from '../Types';
 import './emptyState.scss';
-declare function GenericEmptyState({ title, image, subTitle, isButtonAvailable, classname, styles, heightToDeduct, imageType, renderButton, imageClassName, children, SvgImage, noImage, layout, contentClassName, imageStyles, }: GenericEmptyStateType): JSX.Element;
+declare function GenericEmptyState({ title, image, subTitle, isButtonAvailable, classname, styles, heightToDeduct, imageType, renderButton, imageClassName, children, SvgImage, noImage, layout, contentClassName }: GenericEmptyStateType): JSX.Element;
 export default GenericEmptyState;

package/dist/Common/Helper.d.ts

@@ -55,6 +55,13 @@ export declare const customStyles: {
     dropdownIndicator: (base: any, state: any) => any;
 };
 export declare const getFilteredChartVersions: (charts: any, selectedChartType: any) => any;
-export declare function getUnlockedJSON(json: any, jsonPathArray: any): any;
+export declare function getUnlockedJSON(json: any, jsonPathArray: any, removeParentKeysAndEmptyArrays?: boolean): {
+    newDocument: any;
+    removedPatches: any[];
+};
 export declare function getLockedJSON(json: any, jsonPathArray: string[]): any;
+/**
+ * Returns a debounced variant of the function
+ */
+export declare const debounce: (func: any, timeout?: number) => (this: any, ...args: any[]) => void;
 export {};

package/dist/Common/Pagination/PageSizeSelector.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PageSizeSelectorProps } from './types';
+declare const PageSizeSelector: ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => JSX.Element;
+export default PageSizeSelector;

package/dist/Common/Pagination/Pagination.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PaginationProps } from './types';
+import './pagination.scss';
+declare const Pagination: ({ size, pageSize, offset, changePage, changePageSize, isPageSizeFix, pageSizeOptions, rootClassName, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/dist/Common/Pagination/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const VISIBLE_PAGES_LIMIT = 5;
+export declare const FALLBACK_PAGE_SIZE_OPTIONS: {
+    value: number;
+    selected: boolean;
+}[];

package/dist/Common/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination';

package/dist/Common/Pagination/types.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+export interface PageSizeOption {
+    value: number;
+    selected: boolean;
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number;
+    /**
+     * pageSize
+     */
+    pageSize: number;
+    offset: number;
+    changePage: (pageNo: number) => void;
+    changePageSize?: (pageSize: number) => void;
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean;
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string;
+}
+export interface Page {
+    value: number;
+    selected: boolean;
+    isVisible: boolean;
+}
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number;
+}
+export interface PageSizeSelectorProps extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {
+}
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value'];
+    options: PageSizeOption[];
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>;
+    handleCloseDropdown: () => void;
+}
+export interface PageValueItemProps {
+    value: PageSizeOption['value'];
+    isSelected: PageSizeOption['selected'];
+    selectPage: (selectedPageNo: number) => void;
+}

package/dist/Common/Pagination/utils.d.ts

@@ -0,0 +1,6 @@
+import { CreatePageArrType, Page, PageSizeOption } from './types';
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+export declare const createPageArr: ({ size, pageSize, selectedPageNo }: CreatePageArrType) => Page[];
+export declare const getDefaultPageValueOptions: (pageSizeOptions: PageSizeOption[]) => PageSizeOption[];

package/dist/Common/SearchBar/SearchBar.component.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { SearchBarProps } from './types';
+import './searchBar.scss';
+/**
+ * Generic search input component with support for enter based and debounced search
+ * Note: The component is uncontrolled
+ *
+ * @example Usage with default debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
+ * ```
+ *
+ * @example Initial search text
+ * ```tsx
+ * <SearchBar initialSearchText="Keyword" />
+ * ```
+ *
+ * @example Custom width
+ * ```tsx
+ * <SearchBar containerClassName="w-300" />
+ * ```
+ *
+ * @example Trigger search on enter key press
+ * ```tsx
+ * <SearchBar handleEnter={triggerSearchApi} />
+ * ```
+ *
+ * @example Custom timeout for debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
+ * ```
+ *
+ * @example Placeholder for the search
+ * ```tsx
+ * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
+ * ```
+ */
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
+export default SearchBar;

package/dist/Common/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component';
+export type { SearchBarProps } from './types';

package/dist/Common/SearchBar/types.d.ts

@@ -0,0 +1,35 @@
+import { InputHTMLAttributes } from 'react';
+export interface SearchBarProps {
+    /**
+     * Initial search text
+     *
+     * @default ''
+     */
+    initialSearchText?: string;
+    /**
+     * Search handler for the search input
+     */
+    handleSearchChange?: (searchText: string) => void;
+    /**
+     * Enter event handler for the search input
+     */
+    handleEnter?: (searchText: string) => void;
+    /**
+     * Input props for the search input
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Class name for the container; can be used for handling width
+     */
+    containerClassName?: string;
+    /**
+     * If true, the change handler would be triggered with debounce
+     *
+     * @default false
+     */
+    shouldDebounce?: boolean;
+    /**
+     * Timeout for the debounce handler to be triggered
+     */
+    debounceTimeout?: number;
+}

package/dist/Common/Types.d.ts

@@ -2,10 +2,23 @@ import React, { ReactNode, CSSProperties } from 'react';
 import { Placement } from 'tippy.js';
 import { ImageComment, ReleaseTag } from './ImageTags.Types';
 import { DockerConfigOverrideType, TaskErrorObj } from '.';
-export interface ResponseType {
+/**
+ * Generic response type object with support for overriding the result type
+ *
+ * @example Default usage:
+ * ```ts
+ * interface UserResponse extends ResponseType {}
+ * ```
+ *
+ * @example Override the response type:
+ * ```ts
+ * interface UserResponse extends ResponseType<Record<string, string>> {}
+ * ```
+ */
+export interface ResponseType<T = any> {
     code: number;
     status: string;
-    result?: any;
+    result?: T;
     errors?: any;
 }
 export interface APIOptions {
@@ -87,7 +100,6 @@ export interface GenericEmptyStateType {
     imageClassName?: string;
     children?: ReactNode;
     noImage?: boolean;
-    imageStyles?: CSSProperties;
     /**
      * @default 'column'
      */

package/dist/Common/index.d.ts

@@ -26,6 +26,7 @@ export * from './Common.service';
 export * from './Checkbox';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
+export * from './SearchBar';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';
@@ -46,3 +47,4 @@ export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSel
 export * from './AddCDButton';
 export * from './CustomInput';
 export * from './DraggableWrapper';
+export * from './Pagination';