Merge pull request #151 from devtron-labs/feat/release-v2

eshankvaish · web-flow · commit c645bd4fe7e0 · 2024-05-28T12:05:55.000+05:30
feat: releases v2
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,6 +11,9 @@ on:
 jobs:
   ci:
     runs-on: ubuntu-latest
+
+    if: ${{ !github.event.pull_request.draft }}
+
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
diff --git a/.github/workflows/release-package.yml b/.github/workflows/release-package.yml
@@ -5,44 +5,32 @@ on:
     types: [created]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-      - run: npm ci
-      - run: npm test
+  build-and-publish:
+    name: Build and Publish to NPM Registry
 
-  publish-gpr:
-    needs: build
     runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
+
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          registry-url: https://npm.pkg.github.com/
-      - run: npm ci
-      - run: npm run build-lib
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  publish-npm:
-    name: Publish to NPM Registry
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 16
+          cache: 'npm'
           registry-url: 'https://registry.npmjs.org/'
-      - run: npm ci
-      - run: npm run build-lib
-      - run: npm publish --access public
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Execute test cases
+        run: npm test
+
+      - name: Build Lib
+        run: npm run build-lib
+
+      - name: Publish to NPM Registry
+        run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.83",
+    "version": "0.0.84",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/Icon/ic-exclamation.svg b/src/Assets/Icon/ic-exclamation.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path fill="#B1B7BC" class="fill-color" fill-rule="evenodd" d="M10 18.333c4.6 0 8.333-3.733 8.333-8.333S14.6 1.667 10 1.667 1.667 5.4 1.667 10 5.4 18.333 10 18.333zm0-1.666c-3.68 0-6.667-2.987-6.667-6.667 0-3.68 2.987-6.667 6.667-6.667 3.68 0 6.667 2.987 6.667 6.667 0 3.68-2.987 6.667-6.667 6.667zm0-5.834c.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833zm0 3.334c.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833-.46 0-.833.373-.833.833 0 .46.373.834.833.834z"/>
+</svg>
diff --git a/src/Common/Common.service.ts b/src/Common/Common.service.ts
@@ -146,6 +146,8 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             promotionApprovalMetadata: material.promotionApprovalMetadata,
             deployedOnEnvironments: material.deployedOnEnvironments ?? [],
             deploymentWindowArtifactMetadata: material.deploymentWindowArtifactMetadata ?? null,
+            configuredInReleases: material.configuredInReleases ?? [],
+            appWorkflowId: material.appWorkflowId ?? null,
         }
     })
     return materials
diff --git a/src/Common/ErrorScreenManager.tsx b/src/Common/ErrorScreenManager.tsx
@@ -1,7 +1,7 @@
 import notFound from '../Assets/Img/ic-not-found.svg'
 import badRequest from '../Assets/Img/ic-page-not-found.svg'
 import unauthorized from '../Assets/Img/ic-not-authorized.svg'
-import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN } from './Constants'
+import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN, ROUTES } from './Constants'
 import Reload from './Reload'
 import ErrorPage from './ErrorPage'
 import { ErrorScreenManagerProps, ImageType } from './Types'
@@ -12,7 +12,7 @@ const ErrorScreenManager = ({
     subtitle,
     reloadClass,
     heightToDeduct,
-    redirectURL,
+    redirectURL = ROUTES.APP_LIST,
 }: ErrorScreenManagerProps) => {
     const getMessage = () => {
         switch (code) {
@@ -71,6 +71,7 @@ const ErrorScreenManager = ({
                         image={badRequest}
                         imageType={ImageType.Large}
                         heightToDeduct={heightToDeduct}
+                        reload={reload}
                     />
                 )
             case ERROR_STATUS_CODE.BAD_GATEWAY:
diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
@@ -784,3 +784,5 @@ export function deepEqual(configA: any, configB: any): boolean {
         return true
     }
 }
+
+export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)
diff --git a/src/Common/Hooks/index.ts b/src/Common/Hooks/index.ts
@@ -3,3 +3,4 @@ export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useWindowSize } from './UseWindowSize/UseWindowSize'
 export * from './useUrlFilters'
 export * from './UseRegisterShortcut'
+export * from './useStateFilters'
diff --git a/src/Common/Hooks/useStateFilters/index.ts b/src/Common/Hooks/useStateFilters/index.ts
@@ -0,0 +1,2 @@
+export { default as useStateFilters } from './useStateFilters'
+export type { UseStateFiltersProps, UseStateFiltersReturnType } from './types'
diff --git a/src/Common/Hooks/useStateFilters/types.ts b/src/Common/Hooks/useStateFilters/types.ts
@@ -0,0 +1,6 @@
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters'
+
+export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {}
+
+export interface UseStateFiltersReturnType<T>
+    extends Pick<UseUrlFiltersReturnType<T>, 'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters'> {}
diff --git a/src/Common/Hooks/useStateFilters/useStateFilters.tsx b/src/Common/Hooks/useStateFilters/useStateFilters.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { SortingOrder } from '../../Constants'
+import { UseStateFiltersProps, UseStateFiltersReturnType } from './types'
+
+/**
+ * Generic hook for implementing state based pagination, search, sorting.
+ * Sister method of [useUrlFilters](https://github.com/devtron-labs/devtron-fe-common-lib/blob/main/src/Common/Hooks/useUrlFilters/useUrlFilters.ts)
+ *
+ * The exposed handlers can be consumed directly without the need for explicit state management
+ *
+ * @example Usage with custom type for sort keys and initial sort key:
+ * ```tsx
+ * const  { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
+ * ```
+ *
+ * To be extended to be used with pagination and search as and when required
+ */
+const useStateFilters = <T = string,>({
+    initialSortKey,
+}: UseStateFiltersProps<T> = {}): UseStateFiltersReturnType<T> => {
+    const [sortingConfig, setSortingConfig] = useState({
+        sortOrder: SortingOrder.ASC,
+        sortBy: initialSortKey,
+    })
+
+    const { sortBy, sortOrder } = sortingConfig
+
+    const handleSorting = (_sortBy: T) => {
+        let order: SortingOrder
+
+        if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
+            order = SortingOrder.DESC
+        } else {
+            order = SortingOrder.ASC
+        }
+
+        setSortingConfig(() => ({
+            ...sortingConfig,
+            sortBy: _sortBy,
+            sortOrder: order,
+        }))
+    }
+
+    const clearFilters = () => {
+        setSortingConfig({
+            sortOrder: SortingOrder.ASC,
+            sortBy: initialSortKey,
+        })
+    }
+
+    return {
+        ...sortingConfig,
+        handleSorting,
+        clearFilters,
+    }
+}
+
+export default useStateFilters
diff --git a/src/Common/Hooks/useUrlFilters/types.ts b/src/Common/Hooks/useUrlFilters/types.ts
@@ -57,5 +57,5 @@ export type UseUrlFiltersReturnType<T, K = unknown> = K & {
     /**
      * Update the search params with the passed object
      */
-    updateSearchParams: (paramsToSerialize: K) => void
+    updateSearchParams: (paramsToSerialize: Partial<K>) => void
 }
diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts
@@ -107,7 +107,7 @@ const useUrlFilters = <T = string, K = unknown>({
         history.replace({ search: '' })
     }
 
-    const updateSearchParams = (paramsToSerialize: K) => {
+    const updateSearchParams = (paramsToSerialize: Partial<K>) => {
         Object.keys(paramsToSerialize).forEach((key) => {
             if (paramsToSerialize[key]) {
                 if (Array.isArray(paramsToSerialize[key])) {
diff --git a/src/Common/SearchBar/SearchBar.component.tsx b/src/Common/SearchBar/SearchBar.component.tsx
@@ -47,6 +47,7 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
+    noBackgroundAndBorder = false,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -97,17 +98,19 @@ const SearchBar = ({
 
     return (
         <div className={containerClassName}>
-            <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+            <div
+                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-32`}
+            >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input
                     placeholder="Search"
                     data-testid="search-bar"
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input  dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
-                    }`}
+                    } ${noBackgroundAndBorder ? 'dc__no-background' : 'bc-n50'}`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
diff --git a/src/Common/SearchBar/types.ts b/src/Common/SearchBar/types.ts
@@ -31,4 +31,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
+    /**
+     * Hide the background and border of the search
+     */
+    noBackgroundAndBorder?: boolean
 }
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -30,9 +30,9 @@ export interface APIOptions {
     preventAutoLogout?: boolean
 }
 
-export interface OptionType {
-    label: string
-    value: string
+export interface OptionType<T = string, K = string> {
+    value: T
+    label: K
 }
 
 export enum TippyTheme {
@@ -139,7 +139,7 @@ export interface GenericEmptyStateType {
 }
 
 export interface ErrorPageType
-    extends Pick<GenericEmptyStateType, 'image' | 'title' | 'subTitle' | 'renderButton' | 'imageType'>, Pick<ErrorScreenManagerProps, 'reload'> {
+    extends Pick<GenericEmptyStateType, 'image' | 'title' | 'subTitle' | 'renderButton' | 'imageType'>, Pick<ErrorScreenManagerProps, 'reload' | 'redirectURL'> {
     code: number
     heightToDeduct?: number
     redirectURL?: string
@@ -152,6 +152,10 @@ export interface ErrorScreenManagerProps {
     subtitle?: React.ReactChild
     reloadClass?: string
     heightToDeduct?: number
+    /**
+     * Would be used to redirect URL in case of 404
+     * @default - APP_LIST
+     */
     redirectURL?: string
 }
 
@@ -356,6 +360,15 @@ export interface DeploymentWindowArtifactMetadata {
     type: DEPLOYMENT_WINDOW_TYPE
 }
 
+export interface ArtifactReleaseMappingType {
+    id : number, 
+    identifier: string,
+    releaseVersion: string,
+    name: string
+    kind: string
+    version: string
+}
+
 export interface CDMaterialType {
     index: number
     id: string
@@ -400,6 +413,14 @@ export interface CDMaterialType {
     promotionApprovalMetadata?: PromotionApprovalMetadataType
     deployedOnEnvironments?: string[]
     deploymentWindowArtifactMetadata?: DeploymentWindowArtifactMetadata
+    /**
+     * Will only be present in case of release
+     */
+    configuredInReleases: ArtifactReleaseMappingType[]
+    /**
+     * Would currently only be received in case of release
+     */
+    appWorkflowId: number
 }
 
 export enum CDMaterialServiceEnum {
diff --git a/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx b/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx
@@ -1,4 +1,4 @@
-import { ErrorScreenNotAuthorized, GenericEmptyState, Progressing, Reload } from '../../../Common'
+import { ErrorScreenManager, ErrorScreenNotAuthorized, GenericEmptyState, Progressing, Reload } from '../../../Common'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import { NOT_FOUND_DEFAULT_TEXT } from './constants'
 import { APIResponseHandlerProps } from './types'
@@ -12,6 +12,7 @@ const APIResponseHandler = ({
     notFoundText,
     reloadProps,
     genericSectionErrorProps,
+    errorScreenManagerProps,
     children,
 }: APIResponseHandlerProps) => {
     // keeping it above loading since, not expected to send a call if not authorized
@@ -30,7 +31,10 @@ const APIResponseHandler = ({
             return <GenericSectionErrorState {...genericSectionErrorProps} />
         }
 
-        // TODO: Can extend ErrorScreenNotFound
+        if (errorScreenManagerProps) {
+            return <ErrorScreenManager {...errorScreenManagerProps} />
+        }
+
         if (error?.code === 404) {
             return (
                 <GenericEmptyState
diff --git a/src/Shared/Components/APIResponseHandler/types.tsx b/src/Shared/Components/APIResponseHandler/types.tsx
@@ -1,5 +1,11 @@
 import { ReactNode } from 'react'
-import { GenericEmptyStateType, ProgressingProps, ReloadType, ServerErrors } from '../../../Common'
+import {
+    ErrorScreenManagerProps,
+    GenericEmptyStateType,
+    ProgressingProps,
+    ReloadType,
+    ServerErrors,
+} from '../../../Common'
 import { GenericSectionErrorStateProps } from '../GenericSectionErrorState/types'
 
 export interface EmptyPageTextType {
@@ -38,9 +44,14 @@ export interface APIResponseHandlerProps {
      */
     reloadProps?: ReloadType
     /**
-     * If given, would show this component instead of default Error component
+     * If given, would show GenericSectionErrorState instead of default Reload component
      */
     genericSectionErrorProps?: GenericSectionErrorStateProps
+    /**
+     * If given, would show ErrorScreenManager component instead of Reload component
+     * Priority of error states are: genericSectionErrorProps > errorScreenManagerProps > Reload component
+     */
+    errorScreenManagerProps?: ErrorScreenManagerProps
     /**
      * If no Error and no Loading, would load this component
      */
diff --git a/src/Shared/Components/ButtonWithSelector/ButtonWithSelector.tsx b/src/Shared/Components/ButtonWithSelector/ButtonWithSelector.tsx
diff --git a/src/Shared/Components/ButtonWithSelector/types.ts b/src/Shared/Components/ButtonWithSelector/types.ts
diff --git a/src/Shared/Components/FilterChips/FilterChips.component.tsx b/src/Shared/Components/FilterChips/FilterChips.component.tsx
diff --git a/src/Shared/Components/FilterChips/types.ts b/src/Shared/Components/FilterChips/types.ts
diff --git a/src/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.tsx b/src/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.tsx
diff --git a/src/Shared/Components/GenericSectionErrorState/index.ts b/src/Shared/Components/GenericSectionErrorState/index.ts
diff --git a/src/Shared/Components/GenericSectionErrorState/types.ts b/src/Shared/Components/GenericSectionErrorState/types.ts
diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "0.0.83",`
	`3`	`+ "version": "0.0.84",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -146,6 +146,8 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb`
`146`	`146`	`promotionApprovalMetadata: material.promotionApprovalMetadata,`
`147`	`147`	`deployedOnEnvironments: material.deployedOnEnvironments ?? [],`
`148`	`148`	`deploymentWindowArtifactMetadata: material.deploymentWindowArtifactMetadata ?? null,`
	`149`	`+ configuredInReleases: material.configuredInReleases ?? [],`
	`150`	`+ appWorkflowId: material.appWorkflowId ?? null,`
`149`	`151`	`}`
`150`	`152`	`})`
`151`	`153`	`return materials`
Original file line number	Diff line number	Diff line change
`@@ -784,3 +784,5 @@ export function deepEqual(configA: any, configB: any): boolean {`
`784`	`784`	`return true`
`785`	`785`	`}`
`786`	`786`	`}`
	`787`	`+`
	`788`	+export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as useStateFilters } from './useStateFilters'`
	`2`	`+export type { UseStateFiltersProps, UseStateFiltersReturnType } from './types'`