Merge pull request #633 from devtron-labs/feat/devtron-license-helpers

feat: add country selector, flag image and phone input components

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.5",
+    "version": "1.9.5-beta-11",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -123,6 +123,7 @@
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
         "react-draggable": "^4.4.5",
+        "react-international-phone": "^4.5.0",
         "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",

package.json

@@ -25,6 +25,7 @@ class CoreAPI {
         signal,
         preventAutoLogout = false,
         preventLicenseRedirect = false,
+        shouldParseServerErrorForUnauthorizedUser = false,
         isMultipartRequest,
     }: FetchAPIParamsType<K>): Promise<ResponseType> => {
         const options: RequestInit = {
@@ -60,6 +61,11 @@ class CoreAPI {
                 const contentType = response.headers.get('Content-Type')
                 if (response.status === API_STATUS_CODES.UNAUTHORIZED) {
                     if (preventAutoLogout) {
+                        if (shouldParseServerErrorForUnauthorizedUser) {
+                            await handleServerError(contentType, response)
+                            // Won't reach here as handleServerError will throw an error
+                            return null
+                        }
                         throw new ServerErrors({
                             code: API_STATUS_CODES.UNAUTHORIZED,
                             errors: [
@@ -161,6 +167,7 @@ class CoreAPI {
                 signal,
                 preventAutoLogout: options?.preventAutoLogout || false,
                 preventLicenseRedirect: options?.preventLicenseRedirect || false,
+                shouldParseServerErrorForUnauthorizedUser: options?.shouldParseServerErrorForUnauthorizedUser,
                 isMultipartRequest,
             }),
             timeoutPromise,

src/Assets/IconV2/ic-caret-left.svg

@@ -23,6 +23,6 @@ export interface FetchInTimeParamsType<Data = object> {
 
 export interface FetchAPIParamsType<Data = object>
     extends Omit<FetchInTimeParamsType<Data>, 'options'>,
-        Pick<APIOptions, 'preventAutoLogout' | 'preventLicenseRedirect'> {
+        Pick<APIOptions, 'preventAutoLogout' | 'preventLicenseRedirect' | 'shouldParseServerErrorForUnauthorizedUser'> {
     signal: AbortSignal
 }

src/Common/API/CoreAPI.ts

@@ -18,6 +18,7 @@ export const FALLBACK_REQUEST_TIMEOUT = 60000
 export const Host = window?.__ORCHESTRATOR_ROOT__ ?? '/orchestrator'
 
 export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
+export const DEVTRON_HOME_PAGE = 'https://devtron.ai/'
 export const DOCUMENTATION_VERSION = '/v/v0.7'
 export const DISCORD_LINK = 'https://discord.devtron.ai/'
 export const DEFAULT_JSON_SCHEMA_URI = 'https://json-schema.org/draft/2020-12/schema'
@@ -367,6 +368,7 @@ export const API_STATUS_CODES = {
     PERMISSION_DENIED: 403,
     NOT_FOUND: 404,
     REQUEST_TIMEOUT: 408,
+    CONFLICT: 409,
     EXPECTATION_FAILED: 417,
     UNPROCESSABLE_ENTITY: 422,
     LOCKED: 423,

src/Common/API/types.ts

@@ -73,6 +73,10 @@ export interface APIOptions {
      * @default false
      */
     preventLicenseRedirect?: boolean
+    /**
+     * @default false
+     */
+    shouldParseServerErrorForUnauthorizedUser?: boolean
 }
 
 export interface OptionType<T = string, K = string> {

src/Common/Constants.ts

@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { SelectPicker, SelectPickerProps } from '../SelectPicker'
+import { CountrySelectProps } from './types'
+import { getCountryOptions } from './utils'
+import { FlagImage } from '../FlagImage'
+
+const CountrySelect = ({
+    selectedCountry,
+    label,
+    required,
+    error,
+    handleChange,
+    placeholder,
+    name,
+    variant = 'default',
+    size,
+    onMenuClose,
+    onMenuOpen,
+}: CountrySelectProps) => {
+    const countryOptions = useMemo(() => getCountryOptions(variant), [variant])
+
+    const onChange = (option: (typeof countryOptions)[number]) => {
+        handleChange(option.value.iso2)
+    }
+
+    const selectedOption: (typeof countryOptions)[number] = selectedCountry
+        ? countryOptions.find((option) => option.value.iso2 === selectedCountry) || null
+        : null
+
+    const filterOption: SelectPickerProps<(typeof countryOptions)[number]['value']>['filterOption'] = (
+        option,
+        searchText,
+    ) => {
+        const searchValue = searchText.toLowerCase()
+        const searchCriterion = [option.data.value.name.toLowerCase(), `+${option.data.value.dialCode.toLowerCase()}`]
+
+        return searchCriterion.some((criterion) => criterion.includes(searchValue))
+    }
+
+    const getOptionValue: SelectPickerProps<(typeof countryOptions)[number]['value']>['getOptionValue'] = (option) =>
+        option.value.iso2
+
+    return (
+        <SelectPicker<(typeof countryOptions)[number]['value'], false>
+            inputId={`select-picker__country-select--${name}`}
+            value={selectedOption}
+            onChange={onChange}
+            error={error}
+            required={required}
+            label={label}
+            options={countryOptions}
+            placeholder={placeholder}
+            size={size}
+            filterOption={filterOption}
+            getOptionValue={getOptionValue}
+            onMenuClose={onMenuClose}
+            onMenuOpen={onMenuOpen}
+            icon={
+                variant === 'selectPhoneCode' && selectedOption?.value?.iso2 ? (
+                    <FlagImage country={selectedOption?.value?.iso2} />
+                ) : null
+            }
+            controlShouldRenderValue={variant !== 'selectPhoneCode'}
+            fullWidth
+        />
+    )
+}
+
+export default CountrySelect

src/Common/Types.ts

@@ -0,0 +1 @@
+export { default as CountrySelect } from './CountrySelect.component'

src/Shared/Components/CountrySelect/CountrySelect.component.tsx

@@ -0,0 +1,13 @@
+import { CountryISO2Type } from '@Shared/index'
+import { SelectPickerProps } from '../SelectPicker'
+
+export interface CountrySelectProps
+    extends Pick<
+            SelectPickerProps,
+            'required' | 'label' | 'error' | 'placeholder' | 'size' | 'onMenuOpen' | 'onMenuClose'
+        >,
+        Required<Pick<SelectPickerProps, 'name'>> {
+    selectedCountry: CountryISO2Type
+    handleChange: (iso2: CountryISO2Type) => void
+    variant?: 'default' | 'selectPhoneCode'
+}