@devtron-labs/devtron-fe-common-lib 0.0.63 → 0.0.64-beta-1

package/src/Common/index.ts

@@ -1,51 +0,0 @@
-export * from './Constants'
-export * from './ServerError'
-export * from './Types'
-export * from './Api'
-export * from './EmptyState/EmptyState'
-export * from './ToastBody'
-export { default as Reload } from './Reload'
-export * from './Error'
-export * from './Helper'
-export * from './Progressing'
-export * from './Drawer/Drawer'
-export * from './Modals/Modal'
-export * from './Modals/OpaqueModal'
-export * from './Modals/VisibleModal'
-export * from './Modals/VisibleModal2'
-export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
-export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
-export * from './RadioGroup'
-export { default as PopupMenu } from './PopupMenu'
-export * from './TippyCustomized'
-export * from './CustomTagSelector'
-export * from './Dialogs'
-export * from './MultiSelectCustomization'
-export { default as InfoColourBar } from './InfoColorBar/InfoColourbar'
-export * from './Common.service'
-export * from './Checkbox'
-export { default as EmptyState } from './EmptyState/EmptyState'
-export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-export * from './SearchBar'
-export * from './SortableTableHeaderCell'
-export { default as Toggle } from './Toggle/Toggle'
-export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
-export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
-export * from './CIPipeline.Types'
-export * from './Policy.Types'
-export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
-export * from './ImageTags'
-export * from './ImageTags.Types'
-export * from './ResizableTextarea'
-export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
-export { default as Grid } from './Grid/Grid'
-export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
-export * from './Hooks'
-export { AppStatus } from './AppStatus'
-export * from './RJSF'
-export * from './DevtronProgressing'
-export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
-export * from './AddCDButton'
-export * from './CustomInput'
-export * from './DraggableWrapper'
-export * from './Pagination'

package/src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -1,16 +0,0 @@
-/**
- * User Status received from the API
- */
-export enum UserStatusDto {
-    active = 'active',
-    inactive = 'inactive',
-}
-
-/**
- * User status for the frontend
- */
-export enum UserStatus {
-    active = 'active',
-    inactive = 'inactive',
-    temporary = 'temporary',
-}

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

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

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

@@ -1,127 +0,0 @@
-import { FunctionComponent } from 'react'
-import { Progressing } from '../../../Common'
-import BuildInfraFormAction from './BuildInfraFormAction'
-import BuildInfraFormItem from './BuildInfraFormItem'
-import BuildInfraProfileDescriptionField from './BuildInfraDescriptionField'
-import BuildInfraProfileNameField from './BuildInfraProfileNameField'
-import { BUILD_INFRA_FORM_FIELDS, BUILD_INFRA_TEXT } from './constants'
-import { BuildInfraActionType, BuildInfraConfigFormProps, InheritingHeaderProps } from './types'
-
-const InheritingHeader = ({
-    defaultHeading,
-    inheritingData,
-    isInheriting,
-    isDefaultProfile,
-}: InheritingHeaderProps) => {
-    const inheritingDataString = inheritingData.map((data) => `${data.value} ${data.unit ?? ''}`).join(' - ')
-
-    if (isDefaultProfile || !isInheriting) {
-        // For typing issues
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <>{defaultHeading}</>
-    }
-
-    return (
-        <div className="flexbox dc__align-items-center dc__content-space w-100">
-            {defaultHeading}
-
-            <div className="flexbox dc__content-space w-100">
-                <span className="m-0 pt-0 pb-0 pl-4 pr-4 fs-13 lh-20 fw-4 cn-9 dc__ellipsis-right dc__word-break-all flex-grow-1">
-                    {inheritingDataString}
-                </span>
-
-                <p className="m-0 cn-7 fs-13 fw-4 lh-20 dc__no-shrink">
-                    {BUILD_INFRA_TEXT.INHERITING_HEADING_DESCRIPTION}
-                </p>
-            </div>
-        </div>
-    )
-}
-
-const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps> = ({
-    profileInput,
-    profileInputErrors,
-    handleProfileInputChange,
-    isDefaultProfile,
-    unitsMap,
-    configurationContainerLabel,
-}) => {
-    const currentConfigurations = profileInput?.configurations
-
-    // will get the desired configuration from the currentConfigurations and then check if it is active or not
-    const isInheritingProfileValues = (actions: BuildInfraActionType[]) =>
-        actions.some((action) => !currentConfigurations[action.actionType].active)
-
-    // Had to show loader for an instance due to batching of state updates not working as expected :/
-    if (!currentConfigurations) {
-        return <Progressing pageLoader />
-    }
-
-    return (
-        <div className="flexbox-col dc__mxw-920 dc__gap-16">
-            {!isDefaultProfile && (
-                <div className="flexbox-col dc__gap-12">
-                    <BuildInfraProfileNameField
-                        handleProfileInputChange={handleProfileInputChange}
-                        currentValue={profileInput.name}
-                        error={profileInputErrors.name}
-                    />
-
-                    <BuildInfraProfileDescriptionField
-                        handleProfileInputChange={handleProfileInputChange}
-                        currentValue={profileInput.description}
-                        error={profileInputErrors.description}
-                    />
-                </div>
-            )}
-
-            <div className="flexbox-col dc__gap-12">
-                {configurationContainerLabel}
-
-                <div className="w-100 flexbox-col dc__gap-16 br-4 dc__border-n1 p-16">
-                    {BUILD_INFRA_FORM_FIELDS.map((field, index) => (
-                        <BuildInfraFormItem
-                            key={field.locator}
-                            marker={field.marker}
-                            heading={
-                                <InheritingHeader
-                                    defaultHeading={field.heading}
-                                    inheritingData={field.actions.map(
-                                        (action) => currentConfigurations[action.actionType],
-                                    )}
-                                    isInheriting={isInheritingProfileValues(field.actions)}
-                                    isDefaultProfile={isDefaultProfile}
-                                />
-                            }
-                            showDivider={index !== BUILD_INFRA_FORM_FIELDS.length - 1}
-                            isInheriting={isInheritingProfileValues(field.actions)}
-                            handleProfileInputChange={handleProfileInputChange}
-                            locator={field.locator}
-                            isDefaultProfile={isDefaultProfile}
-                        >
-                            <div className="w-50 flexbox dc__gap-12 w-100 dc__align-start">
-                                {field.actions.map((action) => (
-                                    <BuildInfraFormAction
-                                        key={action.actionType}
-                                        actionType={action.actionType}
-                                        label={action.label}
-                                        placeholder={action.placeholder}
-                                        error={profileInputErrors[action.actionType]}
-                                        // Assumption is for default profiles all input fields are required
-                                        isRequired
-                                        profileUnitsMap={unitsMap[action.actionType]}
-                                        handleProfileInputChange={handleProfileInputChange}
-                                        currentUnitName={currentConfigurations[action.actionType].unit}
-                                        currentValue={currentConfigurations[action.actionType].value}
-                                    />
-                                ))}
-                            </div>
-                        </BuildInfraFormItem>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default BuildInfraConfigForm

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

@@ -1,44 +0,0 @@
-import { FormEvent, FunctionComponent } from 'react'
-import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
-import { BuildInfraInputFieldComponentProps, BuildInfraMetaConfigTypes } from './types'
-import { BUILD_INFRA_TEXT } from './constants'
-
-const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
-    handleProfileInputChange,
-    currentValue,
-    error,
-}) => {
-    const handleChange = (e: FormEvent<HTMLTextAreaElement>) => {
-        handleProfileInputChange({
-            action: BuildInfraMetaConfigTypes.DESCRIPTION,
-            data: { value: e.currentTarget.value },
-        })
-    }
-
-    return (
-        <div className="flexbox-col dc__gap-4 w-100 dc__align-start">
-            <label htmlFor="build-infra-profile-description" className="m-0 fs-13 fw-4 lh-20 cn-7">
-                {BUILD_INFRA_TEXT.DESCRIPTION_LABEL}
-            </label>
-
-            <textarea
-                data-testid="build-infra-profile-description"
-                name="profile-description"
-                className="form__textarea mxh-140 dc__hover-border-n300"
-                id="build-infra-profile-description"
-                placeholder={BUILD_INFRA_TEXT.DESCRIPTION_PLACEHOLDER}
-                value={currentValue}
-                onChange={handleChange}
-            />
-
-            {error && (
-                <div className="form__error">
-                    <ErrorIcon className="form__icon form__icon--error" />
-                    {error}
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default BuildInfraProfileDescriptionField

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