@devtron-labs/devtron-fe-common-lib 0.0.63-beta-7 → 0.0.63

package/src/Common/index.ts

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

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

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

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

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

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

@@ -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,56 @@
+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

@@ -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