@devtron-labs/devtron-fe-common-lib 0.0.61-beta-2 → 0.0.61-beta-3

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

@@ -1,106 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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"
-                    disabled={loading}
-                    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

@@ -1,4 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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 = {
-    // Will not enforce any decimal specification on input field
-    STEP: 'any',
-    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: {
-        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

@@ -1,7 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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)
-}