@devtron-labs/devtron-fe-common-lib 0.0.58-beta-25 → 0.0.59-beta-1

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx

@@ -0,0 +1,106 @@
+import { FormEvent, FunctionComponent, useMemo } from 'react'
+import ReactSelect from 'react-select'
+import { BuildInfraFormActionProps } from './types'
+import { OptionType } from '../../../Common'
+import { unitSelectorStyles } from './utils'
+import { BUILD_INFRA_INPUT_CONSTRAINTS } from './constants'
+import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
+
+/**
+ * In case need arise for variants break this CustomInput and Select as a separate component
+ */
+const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
+    actionType,
+    label,
+    placeholder,
+    error,
+    isRequired,
+    profileUnitsMap,
+    handleProfileInputChange,
+    currentUnitName,
+    currentValue,
+}) => {
+    const handleUnitChange = (selectedUnit: OptionType) => {
+        const data = {
+            unit: selectedUnit.label,
+            value: currentValue,
+        }
+        handleProfileInputChange({ action: actionType, data })
+    }
+
+    const handleInputChange = (e: FormEvent<HTMLInputElement>) => {
+        const data = {
+            unit: currentUnitName,
+            value: e.currentTarget.value,
+        }
+        handleProfileInputChange({ action: actionType, data })
+    }
+
+    const unitOptions = useMemo(() => {
+        const units =
+            Object.values(profileUnitsMap)?.map((unit) => ({
+                label: unit.name,
+                value: String(unit.conversionFactor),
+            })) ?? []
+        return units.sort((a, b) => Number(a.value) - Number(b.value))
+    }, [profileUnitsMap])
+
+    const currentUnit = useMemo(
+        () => unitOptions.find((unit) => unit.label === currentUnitName),
+        [unitOptions, currentUnitName],
+    )
+
+    return (
+        <div className="flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start">
+            <label
+                htmlFor={`${actionType}-input`}
+                className={`fs-13 fw-4 lh-20 cn-7 ${isRequired ? 'dc__required-field' : ''}`}
+            >
+                {label}
+            </label>
+            <div className="w-100 flexbox dc__align-items-center">
+                <div className="flex-grow-1">
+                    <input
+                        data-testid={`${actionType}-input-field`}
+                        name={actionType}
+                        type="number"
+                        step={BUILD_INFRA_INPUT_CONSTRAINTS.STEP}
+                        min={BUILD_INFRA_INPUT_CONSTRAINTS.MIN}
+                        className="form__input dc__no-right-border dc__no-right-radius"
+                        placeholder={placeholder}
+                        value={currentValue}
+                        onChange={handleInputChange}
+                        required={isRequired}
+                        autoComplete="off"
+                        id={`${actionType}-input`}
+                    />
+                </div>
+
+                {profileUnitsMap && (
+                    <ReactSelect
+                        name={`${actionType}-unit`}
+                        className="bcn-0 dc__mxw-120"
+                        options={unitOptions}
+                        value={currentUnit}
+                        onChange={handleUnitChange}
+                        isSearchable={false}
+                        components={{
+                            IndicatorSeparator: null,
+                            ClearIndicator: null,
+                        }}
+                        styles={unitSelectorStyles()}
+                    />
+                )}
+            </div>
+
+            {error && (
+                <div className="form__error">
+                    <ErrorIcon className="form__icon form__icon--error" />
+                    {error}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default BuildInfraFormAction

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx

@@ -0,0 +1,55 @@
+import { FormEvent, FunctionComponent } from 'react'
+import { BuildInfraFormItemProps, BuildInfraInheritActions } from './types'
+import { CHECKBOX_VALUE, Checkbox } from '../../../Common'
+
+const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps> = ({
+    heading,
+    marker: Marker,
+    children,
+    isInheriting,
+    showDivider,
+    handleProfileInputChange,
+    locator,
+    isDefaultProfile,
+}) => {
+    const handleActivationChange = (e: FormEvent<HTMLInputElement>) => {
+        const { checked } = e.currentTarget
+        const action = (checked ? `activate_${locator}` : `de_activate_${locator}`) as BuildInfraInheritActions
+        handleProfileInputChange({ action })
+    }
+
+    const renderMarker = () => {
+        if (isDefaultProfile) {
+            return <Marker className="icon-dim-20 dc__no-shrink" />
+        }
+
+        return (
+            <Checkbox
+                onChange={handleActivationChange}
+                isChecked={!isInheriting}
+                value={CHECKBOX_VALUE.CHECKED}
+                dataTestId={`${locator}_marker`}
+            />
+        )
+    }
+
+    // If in configuration active is false, means it is inheriting values from other profile
+    return (
+        <>
+            <div className="flexbox-col dc__gap-8 w-100">
+                <div className="flexbox dc__gap-12 dc__align-start w-100">
+                    {renderMarker()}
+
+                    <div className="flexbox-col dc__gap-8 w-100">
+                        {heading}
+                        {!isInheriting && children}
+                    </div>
+                </div>
+            </div>
+
+            {showDivider && <div className="w-100 dc__border-bottom-n1" />}
+        </>
+    )
+}
+
+export default BuildInfraFormItem

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx

@@ -0,0 +1,32 @@
+import { FormEvent, FunctionComponent } from 'react'
+import { BuildInfraMetaConfigTypes, BuildInfraInputFieldComponentProps } from './types'
+import { CustomInput } from '../../../Common'
+import { BUILD_INFRA_TEXT } from './constants'
+
+const BuildInfraProfileNameField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
+    handleProfileInputChange,
+    currentValue,
+    error,
+}) => {
+    const handleChange = (e: FormEvent<HTMLInputElement>) => {
+        handleProfileInputChange({ action: BuildInfraMetaConfigTypes.NAME, data: { value: e.currentTarget.value } })
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-4 w-100 dc__align-start">
+            <CustomInput
+                name="profile-name"
+                label={BUILD_INFRA_TEXT.PROFILE_LABEL}
+                labelClassName="m-0 dc__required-field fs-13 fw-4 lh-20 cn-7"
+                placeholder={BUILD_INFRA_TEXT.PROFILE_PLACEHOLDER}
+                value={currentValue}
+                onChange={handleChange}
+                error={error}
+                required
+                inputWrapClassName="w-100"
+            />
+        </div>
+    )
+}
+
+export default BuildInfraProfileNameField

package/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -0,0 +1,45 @@
+import { DescriptorProps } from './types'
+import { BreadCrumb, TippyCustomized, TippyTheme } from '../../../Common'
+import { ReactComponent as QuestionFilled } from '../../../Assets/Icon/ic-help.svg'
+import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
+import { BUILD_INFRA_TEXT } from './constants'
+
+const Descriptor = ({
+    additionalContainerClasses,
+    breadCrumbs,
+    children,
+    tippyInfoText,
+    tippyAdditionalContent,
+}: DescriptorProps) => (
+    <div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
+        <div className="flexbox dc__align-items-center dc__gap-4">
+            <BreadCrumb breadcrumbs={breadCrumbs} />
+
+            <TippyCustomized
+                theme={TippyTheme.white}
+                className="w-300 h-100 dc__align-left"
+                placement="right"
+                Icon={QuestionFilled}
+                iconClass="fcv-5"
+                infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
+                additionalContent={tippyAdditionalContent}
+                heading={BUILD_INFRA_TEXT.HEADING}
+                showCloseButton
+                trigger="click"
+                interactive
+            >
+                <button
+                    className="p-0 h-20 dc__no-background dc__no-border dc__tab-focus"
+                    type="button"
+                    aria-label="build-infra-info"
+                >
+                    <ICHelpOutline className="icon-dim-20" />
+                </button>
+            </TippyCustomized>
+        </div>
+
+        {children}
+    </div>
+)
+
+export default Descriptor

package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx

@@ -0,0 +1,55 @@
+import { FunctionComponent, ReactElement } from 'react'
+import Tippy from '@tippyjs/react'
+import { BUILD_INFRA_TEST_IDS, BUILD_INFRA_TEXT } from './constants'
+import { FooterProps } from './types'
+import { ConditionalWrap, Progressing } from '../../../Common'
+
+const Footer: FunctionComponent<FooterProps> = ({ disabled, handleCancel, editProfile, loading }) => {
+    const disableMessage = disabled
+        ? BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.INVALID_INPUT
+        : BUILD_INFRA_TEXT.SUBMIT_BUTTON_TIPPY.REQUEST_IN_PROGRESS
+
+    const getButtonText = () => {
+        if (editProfile) {
+            return BUILD_INFRA_TEXT.EDIT_SUBMIT
+        }
+
+        return BUILD_INFRA_TEXT.SAVE_SUBMIT
+    }
+
+    const renderTippy = (children: ReactElement) => (
+        <Tippy content={disableMessage} placement="top" className="default-tt" arrow={false}>
+            {children}
+        </Tippy>
+    )
+
+    return (
+        <div className="flex pl pr pb pt h-64 dc__gap-12 dc__border-top dc__content-start">
+            <ConditionalWrap condition={disabled || loading} wrap={renderTippy}>
+                <div className="flexbox dc__align-items-center">
+                    <button
+                        type="submit"
+                        className="cta submit h-32 flex"
+                        disabled={disabled || loading}
+                        data-testid={BUILD_INFRA_TEST_IDS.SUBMIT_BUTTON}
+                    >
+                        {loading ? <Progressing size={16} /> : getButtonText()}
+                    </button>
+                </div>
+            </ConditionalWrap>
+
+            {handleCancel && (
+                <button
+                    type="button"
+                    className="cta cancel h-32 flex"
+                    data-testid={BUILD_INFRA_TEST_IDS.CANCEL_BUTTON}
+                    onClick={handleCancel}
+                >
+                    {BUILD_INFRA_TEXT.EDIT_CANCEL}
+                </button>
+            )}
+        </div>
+    )
+}
+
+export default Footer

package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md

@@ -0,0 +1,4 @@
+In case someone wants to add a new build infrastructure field, the following steps should be followed:
+- Update the BUILD_INFRA_FORM_FIELDS, in constants.tsx
+- Add BuildInfraConfigTypes, BuildInfraLocators, BuildInfraInheritActions(If any) in types.tsx
+- In utils.tsx, update the handleProfileInputChange and validation functions accordingly

package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx

@@ -0,0 +1,141 @@
+import { ReactComponent as ICCpu } from '../../../Assets/Icon/ic-cpu.svg'
+import { ReactComponent as ICMemory } from '../../../Assets/Icon/ic-memory.svg'
+import { ReactComponent as ICTimer } from '../../../Assets/Icon/ic-timer.svg'
+import { UseBreadcrumbProps } from '../../../Common/BreadCrumb/Types'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraFormFieldType,
+    BuildInfraLocators,
+    BuildInfraMetaConfigTypes,
+    ProfileInputErrorType,
+    BuildInfraProfileBase,
+    BuildInfraProfileVariants,
+    HandleProfileInputChangeType,
+} from './types'
+
+export const BUILD_INFRA_INPUT_CONSTRAINTS = {
+    STEP: 0.01,
+    MIN: 0,
+    DECIMAL_PLACES: 2,
+} as const
+
+export const BUILD_INFRA_TEXT = {
+    HEADING: 'Build Infra Configuration',
+    EDIT_SUBMIT: 'Save changes',
+    SAVE_SUBMIT: 'Save',
+    EDIT_CANCEL: 'Cancel',
+    EDIT_DEFAULT_TOOLTIP:
+        'Efficiently control infrastructure settings such as CPU, Memory, and Build timeout for your build pipelines. Streamline resource management to optimise build time and cost effortlessly.',
+    DESCRIPTION_LABEL: 'Description',
+    DESCRIPTION_PLACEHOLDER: 'Enter a description here',
+    PROFILE_LABEL: 'Profile name',
+    PROFILE_PLACEHOLDER: 'Eg. java or node',
+    INHERITING_HEADING_DESCRIPTION: 'Inheriting from default',
+    SUBMIT_BUTTON_TIPPY: {
+        INVALID_INPUT: 'Valid input is required for all mandatory fields.',
+        REQUEST_IN_PROGRESS: 'Request in progress.',
+    },
+    VALIDATE_REQUEST_LIMIT: {
+        // Might use the constants from BUILD_INFRA_INPUT_CONSTRAINTS even for NEGATIVE_REQUEST and NEGATIVE_LIMIT
+        NEGATIVE_REQUEST: 'Request should be a positive number.',
+        NEGATIVE_LIMIT: 'Limit should be a positive number.',
+        REQUEST_LESS_THAN_LIMIT: 'Request should be less than or equal to limit.',
+        CAN_NOT_COMPUTE: 'Request and limit value diff are too high to validate.',
+        REQUEST_DECIMAL_PLACES: `Request should be upto ${BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES} decimal places.`,
+        LIMIT_DECIMAL_PLACES: `Limit should be upto ${BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES} decimal places.`,
+    },
+    getInvalidActionMessage: (action: HandleProfileInputChangeType['action']) => `Invalid action type: ${action}`,
+    getSubmitSuccessMessage: (profileName: string, isEdited: boolean) =>
+        `${profileName} profile is ${isEdited ? 'updated' : 'created'}`,
+    PROFILE_NOT_FOUND: {
+        title: 'Profile not found',
+        subTitle: 'The profile you are looking for does not exist.',
+    },
+    INVALID_FORM_MESSAGE: 'Valid input is required for all mandatory fields.',
+} as const
+
+export const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps = {
+    alias: {
+        'global-config': null,
+        'build-infra': {
+            component: <h2 className="m-0 cn-9 fs-16 fw-6 lh-32">{BUILD_INFRA_TEXT.HEADING}</h2>,
+            linked: false,
+        },
+    },
+}
+
+// TODO: move heading to component itself
+export const BUILD_INFRA_FORM_FIELDS: BuildInfraFormFieldType[] = [
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">CPU (Request - Limit)</h3>,
+        marker: ICCpu,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.CPU_REQUEST,
+                label: 'Request',
+                placeholder: 'Type CPU request',
+            },
+            {
+                actionType: BuildInfraConfigTypes.CPU_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type CPU limit',
+            },
+        ],
+        locator: BuildInfraLocators.CPU,
+    },
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">Memory (Request - Limit)</h3>,
+        marker: ICMemory,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.MEMORY_REQUEST,
+                label: 'Request',
+                placeholder: 'Type memory request',
+            },
+            {
+                actionType: BuildInfraConfigTypes.MEMORY_LIMIT,
+                label: 'Limit',
+                placeholder: 'Type memory limit',
+            },
+        ],
+        locator: BuildInfraLocators.MEMORY,
+    },
+    {
+        heading: <h3 className="m-0 cn-9 fs-13 fw-6 lh-20 w-240 dc__no-shrink">Build timeout</h3>,
+        marker: ICTimer,
+        actions: [
+            {
+                actionType: BuildInfraConfigTypes.BUILD_TIMEOUT,
+                label: 'Timeout',
+                placeholder: 'Type build timeout',
+            },
+        ],
+        locator: BuildInfraLocators.BUILD_TIMEOUT,
+    },
+]
+
+export const PROFILE_INPUT_ERROR_FIELDS = Object.fromEntries(
+    Object.values({ ...BuildInfraConfigTypes, ...BuildInfraMetaConfigTypes }).map((value) => [value, null]),
+) as ProfileInputErrorType
+
+// fields required to be filled before submitting the form in create view, since we pre-populate the form with default values so no need in configs
+export const CREATE_MODE_REQUIRED_INPUT_FIELDS = [BuildInfraMetaConfigTypes.NAME]
+
+export const DEFAULT_PROFILE_NAME = 'default' as const
+
+export const CREATE_PROFILE_BASE_VALUE: BuildInfraProfileBase = {
+    name: '',
+    description: '',
+    type: BuildInfraProfileVariants.NORMAL,
+    appCount: 0,
+}
+
+export const CREATE_VIEW_CHECKED_CONFIGS = {
+    [BuildInfraConfigTypes.CPU_REQUEST]: true,
+    [BuildInfraConfigTypes.CPU_LIMIT]: true,
+} as const
+
+export const BUILD_INFRA_TEST_IDS = {
+    SUBMIT_BUTTON: 'build-infra-submit-button',
+    CANCEL_BUTTON: 'build-infra-cancel-button',
+} as const

package/src/Pages/GlobalConfigurations/BuildInfra/index.ts

@@ -0,0 +1,7 @@
+export { default as BuildInfraDescriptor } from './Descriptor'
+export { default as BuildInfraFooter } from './Footer'
+export { default as BuildInfraConfigForm } from './BuildInfraConfigForm'
+export * from './services'
+export * from './utils'
+export * from './types'
+export * from './constants'

package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx

@@ -0,0 +1,167 @@
+import { ROUTES, ResponseType, get, post, put, showError } from '../../../Common'
+import { CREATE_PROFILE_BASE_VALUE, CREATE_VIEW_CHECKED_CONFIGS } from './constants'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraConfigurationMapType,
+    BuildInfraConfigurationType,
+    BuildInfraProfileAPIResponseType,
+    BuildInfraProfileBase,
+    BuildInfraProfileResponseDataType,
+    BuildInfraProfileResponseType,
+    BuildInfraProfileTransformerType,
+    CreateBuildInfraProfileType,
+    CreateBuildInfraServicePayloadType,
+    CreateBuildInfraServiceConfigurationType,
+    GetBuildInfraProfileType,
+    UpdateBuildInfraProfileType,
+    BuildInfraConfigurationMapWithoutDefaultType,
+} from './types'
+
+const getBaseProfileObject = (
+    fromCreateView: boolean,
+    profile: BuildInfraProfileResponseDataType,
+): BuildInfraProfileBase => {
+    if (fromCreateView) {
+        return CREATE_PROFILE_BASE_VALUE
+    }
+
+    return {
+        id: profile.id,
+        name: profile.name,
+        description: profile.description,
+        type: profile.type,
+        appCount: profile.appCount,
+    }
+}
+
+// Would receive a single profile and return transformed response
+export const getTransformedBuildInfraProfileResponse = ({
+    configurationUnits,
+    defaultConfigurations,
+    profile,
+    fromCreateView,
+}: BuildInfraProfileTransformerType): BuildInfraProfileResponseType => {
+    // Assuming would contain all the keys
+    const defaultConfigurationsMap =
+        defaultConfigurations?.reduce((acc, configuration) => {
+            acc[configuration.key] = configuration
+            return acc
+        }, {} as BuildInfraConfigurationMapWithoutDefaultType) ?? ({} as BuildInfraConfigurationMapWithoutDefaultType)
+
+    const profileConfigurations =
+        profile?.configurations?.reduce((acc, configuration) => {
+            acc[configuration.key] = configuration
+            return acc
+        }, {} as BuildInfraConfigurationMapWithoutDefaultType) ?? ({} as BuildInfraConfigurationMapWithoutDefaultType)
+
+    const configurations = Object.keys(defaultConfigurationsMap).reduce((acc, key) => {
+        const defaultConfiguration: BuildInfraConfigurationType = defaultConfigurationsMap[key]
+        const profileConfiguration =
+            profileConfigurations[key]?.profileName === profile?.name ? profileConfigurations[key] : null
+        // Pushing default value in configurations in case we de-activate the configuration
+        const defaultValue = {
+            value: defaultConfiguration.value,
+            unit: defaultConfiguration.unit,
+        }
+
+        if (fromCreateView) {
+            acc[key] = {
+                key,
+                value: defaultConfiguration.value,
+                unit: defaultConfiguration.unit,
+                active: CREATE_VIEW_CHECKED_CONFIGS[key] ?? false,
+                defaultValue,
+            }
+            return acc
+        }
+
+        if (profileConfiguration) {
+            acc[key] = {
+                ...profileConfiguration,
+                defaultValue,
+            }
+            return acc
+        }
+
+        // Removing id from it since we do not have a configuration
+        // While generating payload, we will check on the basis of id and active flag.
+        acc[key] = {
+            key,
+            value: defaultConfiguration.value,
+            // saving profile name as undefined and this would be a check, if we are deriving from default or not
+            unit: defaultConfiguration.unit,
+            active: false,
+            defaultValue,
+        }
+        return acc
+    }, {} as BuildInfraConfigurationMapType)
+
+    return {
+        configurationUnits,
+        profile: {
+            ...(profile && getBaseProfileObject(fromCreateView, profile)),
+            configurations,
+        },
+    }
+}
+
+export const getBuildInfraProfileByName = async ({
+    name,
+    fromCreateView,
+}: GetBuildInfraProfileType): Promise<BuildInfraProfileResponseType> => {
+    try {
+        const response = await get(`${ROUTES.INFRA_CONFIG_PROFILE}/${name}`)
+        const {
+            result: { configurationUnits, defaultConfigurations, profile },
+        } = response as ResponseType<BuildInfraProfileAPIResponseType>
+
+        return getTransformedBuildInfraProfileResponse({
+            configurationUnits,
+            defaultConfigurations,
+            profile,
+            fromCreateView,
+        })
+    } catch (error) {
+        showError(error)
+        throw error
+    }
+}
+
+const getBuildInfraProfilePayload = (
+    profileInput: CreateBuildInfraProfileType['profileInput'],
+): CreateBuildInfraServicePayloadType => {
+    const currentConfigurations = profileInput.configurations
+    const configurationKeys = Object.keys(currentConfigurations) as BuildInfraConfigTypes[]
+    // would only keep the configurations with id or active flag as true
+    const configurations: CreateBuildInfraServiceConfigurationType[] = configurationKeys.reduce((acc, key) => {
+        const configuration = currentConfigurations[key]
+        if (configuration.id || configuration.active) {
+            acc.push({
+                id: configuration.id,
+                key,
+                value: Number(configuration.value),
+                unit: configuration.unit,
+                active: configuration.active,
+            })
+        }
+        return acc
+    }, [] as CreateBuildInfraServiceConfigurationType[])
+
+    const payload: CreateBuildInfraServicePayloadType = {
+        name: profileInput.name,
+        description: profileInput.description,
+        type: profileInput.type,
+        configurations,
+    }
+    return payload
+}
+
+export const updateBuildInfraProfile = ({ name, profileInput }: UpdateBuildInfraProfileType) => {
+    const payload = getBuildInfraProfilePayload(profileInput)
+    return put(`${ROUTES.INFRA_CONFIG_PROFILE}/${name}`, payload)
+}
+
+export const createBuildInfraProfile = async ({ profileInput }: CreateBuildInfraProfileType) => {
+    const payload = getBuildInfraProfilePayload(profileInput)
+    return post(ROUTES.INFRA_CONFIG_PROFILE, payload)
+}