Merge branch 'main' into feat/aws-code-commit

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -738,7 +738,6 @@ export const handleRelativeDateSorting = (dateStringA, dateStringB, sortOrder) =
 /**
  * Returns a stringified YAML with default indentation & line width
  */
-
 export const YAMLStringify = (obj: object | unknown, option?: object) =>
     YAML.stringify(obj, { indent: 2, lineWidth: 0, ...option })
 

src/Common/Helper.tsx

@@ -17,6 +17,7 @@
 import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
 import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
 import { SortingOrder } from '../Constants'
+import { noop } from '../Helper'
 import { SortableTableHeaderCellProps } from './types'
 
 /**
@@ -39,22 +40,35 @@ const SortableTableHeaderCell = ({
     sortOrder,
     title,
     disabled,
-}: SortableTableHeaderCellProps) => (
-    <button
-        type="button"
-        className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
-        onClick={triggerSorting}
-        disabled={disabled}
-    >
-        <span className="dc__uppercase dc__ellipsis-right">{title}</span>
-        {isSorted ? (
-            <SortArrowDown
-                className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
-            />
-        ) : (
-            <SortIcon className="icon-dim-12 mw-12 scn-7" />
-        )}
-    </button>
-)
+    isSortable = true,
+}: SortableTableHeaderCellProps) => {
+    const renderSortIcon = () => {
+        if (!isSortable) {
+            return null
+        }
+
+        if (isSorted) {
+            return (
+                <SortArrowDown
+                    className={`icon-dim-12 mw-12 scn-7 dc__transition--transform ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
+                />
+            )
+        }
+
+        return <SortIcon className="icon-dim-12 mw-12 scn-7" />
+    }
+
+    return (
+        <button
+            type="button"
+            className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text"
+            onClick={isSortable ? triggerSorting : noop}
+            disabled={disabled}
+        >
+            <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+            {renderSortIcon()}
+        </button>
+    )
+}
 
 export default SortableTableHeaderCell

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -39,4 +39,9 @@ export interface SortableTableHeaderCellProps {
      * If true, the cell is disabled
      */
     disabled: boolean
+    /**
+     * If false, the cell acts like normal table header cell
+     * @default true
+     */
+    isSortable?: boolean
 }

src/Common/SortableTableHeaderCell/types.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PromiseAllStatusType, ApiQueuingWithBatchResponseItem, BatchConfigType } from '../types'
+
+const eachCall = (batchConfig, functionCalls, resolve, reject, shouldRejectOnError) => {
+    const callIndex = batchConfig.lastIndex
+    Promise.resolve(functionCalls[callIndex]())
+        .then((result) => {
+            // eslint-disable-next-line no-param-reassign
+            batchConfig.results[callIndex] = { status: PromiseAllStatusType.FULFILLED, value: result }
+        })
+        .catch((error) => {
+            // eslint-disable-next-line no-param-reassign
+            batchConfig.results[callIndex] = { status: PromiseAllStatusType.REJECTED, reason: error }
+        })
+        .finally(() => {
+            if (shouldRejectOnError && batchConfig.results[callIndex].status === PromiseAllStatusType.REJECTED) {
+                reject(batchConfig.results[callIndex].reason)
+                return
+            }
+
+            // eslint-disable-next-line no-plusplus, no-param-reassign
+            batchConfig.completedCalls++
+            if (batchConfig.lastIndex < functionCalls.length) {
+                eachCall(batchConfig, functionCalls, resolve, reject, shouldRejectOnError)
+                // eslint-disable-next-line no-plusplus, no-param-reassign
+                batchConfig.lastIndex++
+            } else if (batchConfig.completedCalls === functionCalls.length) {
+                resolve(batchConfig.results)
+            }
+        })
+}
+
+/**
+ * Executes a batch of function calls concurrently with queuing.
+ * @param functionCalls The array of function calls returning promise to be executed.
+ * @param batchSize The maximum number of function calls to be executed concurrently. Defaults to the value of `window._env_.API_BATCH_SIZE`.
+ * @param shouldRejectOnError If set to true, the promise will reject if any of the function calls rejects, i.e, acts like Promise.all else Promise.allSettled . Defaults to false.
+ * @returns A promise that resolves to a array of objects containing the status and value of the batch execution.
+ */
+const ApiQueuingWithBatch = <T>(
+    functionCalls,
+    httpProtocol: string,
+    shouldRejectOnError: boolean = false,
+    batchSize: number = window._env_.API_BATCH_SIZE,
+): Promise<ApiQueuingWithBatchResponseItem<T>[]> => {
+    if (!batchSize || batchSize <= 0) {
+        // eslint-disable-next-line no-param-reassign
+        batchSize = ['http/0.9', 'http/1.0', 'http/1.1'].indexOf(httpProtocol) !== -1 ? 5 : 30
+    }
+
+    return new Promise((resolve, reject) => {
+        if (functionCalls.length === 0) {
+            resolve([])
+        }
+        const batchConfig: BatchConfigType = {
+            lastIndex: 0,
+            concurrentCount: batchSize,
+            results: functionCalls.map(() => null),
+            completedCalls: 0,
+        }
+        for (
+            let index = 0;
+            index < batchConfig.concurrentCount && index < functionCalls.length;
+            index++, batchConfig.lastIndex++
+        ) {
+            eachCall(batchConfig, functionCalls, resolve, reject, shouldRejectOnError)
+        }
+    })
+}
+
+export default ApiQueuingWithBatch

src/Shared/API/APIQueuing.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as ApiQueuingWithBatch } from './APIQueuing'

src/Shared/API/index.ts

@@ -0,0 +1,92 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+
+ *   http://www.apache.org/licenses/LICENSE-2.0
+
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import { useMemo } from 'react'
+import ReactSelect from 'react-select'
+import { GenericSectionErrorState } from '../GenericSectionErrorState'
+import { commonSelectStyles, GroupHeading, LoadingIndicator } from '../ReactSelect'
+import { ClearIndicator, useAsync } from '../../../Common'
+import { ENVIRONMENT_SELECTOR_TEXT } from './constants'
+import { getEnvironmentsGroupedByCluster } from './service'
+import { EnvironmentSelectorProps } from './types'
+import { getSelectedOptions } from './utils'
+
+const EnvironmentSelector = <T,>({
+    handleEnvironmentChange,
+    selectedEnvironmentsMap,
+    isMulti,
+    placeholder = ENVIRONMENT_SELECTOR_TEXT.DEFAULT_PLACEHOLDER,
+    processOptions,
+    styles,
+    isClearable,
+    autoFocus,
+}: EnvironmentSelectorProps<T>) => {
+    const [areOptionsLoading, allEnvironmentOptions, optionsError, reloadOptions] = useAsync(
+        getEnvironmentsGroupedByCluster,
+    )
+    const options = useMemo(() => {
+        if (!allEnvironmentOptions) {
+            return []
+        }
+
+        return processOptions?.(allEnvironmentOptions) || allEnvironmentOptions
+    }, [allEnvironmentOptions, processOptions])
+
+    const value = useMemo(() => {
+        const selectedOptions = getSelectedOptions<T>(selectedEnvironmentsMap, options)
+        if (isMulti) {
+            return selectedOptions
+        }
+
+        return selectedOptions?.[0] || null
+    }, [selectedEnvironmentsMap, options, isMulti])
+
+    const renderNoEnvironmentMessage = () => {
+        if (optionsError) {
+            return <GenericSectionErrorState withBorder reload={reloadOptions} />
+        }
+
+        return (
+            <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">{ENVIRONMENT_SELECTOR_TEXT.NO_ENVIRONMENTS_AVAILABLE}</p>
+        )
+    }
+
+    return (
+        <ReactSelect
+            isMulti={isMulti}
+            options={options}
+            value={value}
+            onChange={handleEnvironmentChange}
+            isSearchable
+            isClearable={isClearable}
+            isLoading={areOptionsLoading}
+            placeholder={placeholder}
+            components={{
+                IndicatorSeparator: null,
+                LoadingIndicator,
+                NoOptionsMessage: renderNoEnvironmentMessage,
+                GroupHeading,
+                ClearIndicator,
+            }}
+            styles={styles ?? commonSelectStyles}
+            backspaceRemovesValue={false}
+            autoFocus={autoFocus}
+        />
+    )
+}
+
+export default EnvironmentSelector

src/Shared/Components/EnvironmentSelector/EnvironmentSelector.component.tsx

@@ -0,0 +1,22 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+
+ *   http://www.apache.org/licenses/LICENSE-2.0
+
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export const ENVIRONMENT_SELECTOR_TEXT = {
+    DEFAULT_PLACEHOLDER: 'Select Environment',
+    GROUP_HEADING_PREFIX: 'Cluster:',
+    NO_ENVIRONMENTS_AVAILABLE: 'No environments available',
+}

src/Shared/Components/EnvironmentSelector/constants.ts

@@ -0,0 +1,18 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+
+ *   http://www.apache.org/licenses/LICENSE-2.0
+
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export { default as EnvironmentSelector } from './EnvironmentSelector.component'