Merge pull request #154 from devtron-labs/feat/rollout-filters

feat: add partial in useUrlFilters, extend filter chips, generic section error state

Author: eshankvaish

.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

.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 }}

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.83-beta-3",
+    "version": "0.0.83-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -786,7 +786,3 @@ export function deepEqual(configA: any, configB: any): boolean {
 }
 
 export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)
-
-// TODO Eshank: Remove this function once the rollout status is implemented
-export const caseInsensitiveStringComparator = (a: string, b: string): number =>
-    a.toLowerCase().localeCompare(b.toLowerCase())

src/Assets/Icon/ic-exclamation.svg

@@ -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
 }

src/Common/Helper.tsx

@@ -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])) {

src/Common/Hooks/useUrlFilters/types.ts

@@ -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}

src/Common/Hooks/useUrlFilters/useUrlFilters.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
 }