feat: add utils for mandatory scoped variables

Author: AbhishekA1509

src/Common/Constants.ts

@@ -58,6 +58,7 @@ export const URLS = {
     APP_TRIGGER: 'trigger',
     GLOBAL_CONFIG_DOCKER: '/global-config/docker',
     DEPLOYMENT_HISTORY_CONFIGURATIONS: '/configuration',
+    GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
 }
 
 export const ROUTES = {

src/Common/Types.ts

@@ -235,6 +235,9 @@ export interface RadioInterface {
     showTippy?: boolean
     tippyContent?: any
     tippyPlacement?: string
+    /**
+     * If false would make radio group controlled
+     */
     canSelect?: boolean
     isDisabled?: boolean
     tippyClass?: string

src/Pages/GlobalConfigurations/ScopedVariables/index.ts

@@ -0,0 +1 @@
+export * from './types'

src/Pages/GlobalConfigurations/ScopedVariables/types.ts

@@ -0,0 +1,18 @@
+export enum ScopedVariablesFileViewType {
+    /**
+     * Used to show yaml editor for editing/creating variables
+     */
+    YAML = 'yaml',
+    /**
+     * Shows the variable list view
+     */
+    SAVED = 'variable-list',
+    /**
+     * Shows the variables in environment list view
+     */
+    ENVIRONMENT_LIST = 'environments',
+}
+
+export interface SavedVariablesViewParamsType {
+    currentView: ScopedVariablesFileViewType
+}

src/Pages/GlobalConfigurations/index.ts

@@ -16,3 +16,4 @@
 
 export * from './BuildInfra'
 export * from './Authorization'
+export * from './ScopedVariables'

src/Shared/Components/ReactSelect/utils.tsx

@@ -15,7 +15,7 @@
  */
 
 import Tippy from '@tippyjs/react'
-import { components } from 'react-select'
+import { components, MenuListProps } from 'react-select'
 import { Progressing, stopPropagation } from '../../../Common'
 
 export const getCommonSelectStyle = (styleOverrides = {}) => ({
@@ -166,3 +166,24 @@ export const GroupHeading = (props: any) => {
 }
 
 export const commonSelectStyles = getCommonSelectStyle()
+
+export const MenuListWithApplyButton = ({
+    handleApplyFilter,
+    ...props
+}: MenuListProps & { handleApplyFilter: () => void }) => (
+    <>
+        <components.MenuList {...props} />
+        {props.selectProps.options.length > 0 && (
+            <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
+                <button
+                    type="button"
+                    className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                    onClick={handleApplyFilter}
+                    aria-label="Apply filters"
+                >
+                    Apply
+                </button>
+            </div>
+        )}
+    </>
+)

src/Shared/validations.tsx

@@ -221,3 +221,30 @@ export const validateIfImageExist = (url: string): Promise<ValidationResponseTyp
             })
         }
     })
+
+export const validateUniqueKeys = (keys: string[]) => {
+    const keysMap: Record<string, number> = keys.reduce(
+        (acc, key) => {
+            if (acc[key]) {
+                acc[key] += 1
+                return acc
+            }
+
+            acc[key] = 1
+            return acc
+        },
+        {} as Record<string, number>,
+    )
+
+    const duplicateKeys = Object.keys(keysMap).filter((key) => keysMap[key] > 1)
+    if (!duplicateKeys.length) {
+        return {
+            isValid: true,
+        }
+    }
+
+    return {
+        isValid: false,
+        message: `Duplicate variable name: ${duplicateKeys.join(', ')}`,
+    }
+}

src/index.ts

@@ -71,7 +71,8 @@ export interface customEnv {
     ENABLE_RESOURCE_SCAN_V2?: boolean
     ENABLE_GITOPS_BITBUCKET_SOURCE: boolean
     HIDE_RESOURCE_WATCHER?: boolean
-    ORGANIZATION_NAME: string
+    ORGANIZATION_NAME?: string
+    FEATURE_SCOPED_VARIABLE_ENVIRONMENT_LIST_ENABLE?: boolean
 }
 declare global {
     interface Window {