@devtron-labs/devtron-fe-common-lib 0.0.6-beta-17 → 0.0.6-beta-18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-17",
+    "version": "0.0.6-beta-18",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -32,9 +32,11 @@
         "rollup-plugin-delete": "^2.0.0",
         "@svgr/rollup": "6.5.1",
         "@rollup/plugin-url": "8.0.1",
+        "@rollup/plugin-commonjs": "24.0.1",
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",
+        "react-select": "^5.2.2",
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {

package/rollup.config.js

@@ -7,13 +7,15 @@ import del from 'rollup-plugin-delete'
 import pkg from './package.json'
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
+import commonjs from '@rollup/plugin-commonjs';
 
 export default {
     input: './src/index.ts',
-    output: [{ file: pkg.main, format: 'es' }],
+    output: [{ file: pkg.main, format: 'cjs' }],
     plugins: [
         peerDepsExternal(),
         resolve(),
+        commonjs(),
         typescript(),
         postcss({
             extensions: ['.css'],

package/src/Assets/Icon/ic-appstatus-cancelled.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="24" height="24">
+    <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+        <rect width="20" height="20" fill="#B1B7BC" rx="10"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M6.464 6.464a1 1 0 0 1 1.415 0l2.12 2.12 2.122-2.12a1 1 0 0 1 1.32-.083l.095.083a1 1 0 0 1 0 1.415l-2.122 2.12 2.122 2.122a1 1 0 0 1 .083 1.32l-.083.095a1 1 0 0 1-1.415 0L10 11.414l-2.121 2.122a1 1 0 0 1-1.32.083l-.095-.083a1 1 0 0 1 0-1.415L8.584 10l-2.12-2.121a1 1 0 0 1-.083-1.32z"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-check.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#06C" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.898 12.564l4.95 4.95L19.455 6.906"/>
+    </g>
+</svg>

package/src/Assets/Icon/ic-error-medium.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FDE7E7" stroke="#F33E3E" stroke-linejoin="round" stroke-width="2" d="M10 1.667C5.4 1.667 1.667 5.4 1.667 10S5.4 18.333 10 18.333 18.333 14.6 18.333 10 14.6 1.667 10 1.667z"/>
+        <path fill="#F33E3E" d="M10 10.833c.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833zm0 3.334c.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833-.46 0-.833.373-.833.833 0 .46.373.834.833.834z"/>
+    </g>
+</svg>

package/src/Common/Constants.ts

@@ -4,6 +4,6 @@ export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
 export const PATTERNS = {
   KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
   KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
-  START_END_ALPHANUMERIC: /^([A-Za-z0-9].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
+  START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
   ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
 }

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -13,25 +13,25 @@ export default function PropagateTagInfo() {
         )
     }
     return (
-        <div className="flexbox">
-            <InjectTag className="icon-dim-16 mt-2 mr-4" />
-            <span>Propagate tags</span>
-            <TippyCustomized
-                theme={TippyTheme.white}
-                className="w-300"
-                placement="top"
-                Icon={InjectTag}
-                heading={'Propagate tags to K8s resources'}
-                infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
-                additionalContent={additionalInfo()}
-                showCloseButton={true}
-                trigger="click"
-                interactive={true}
-                documentationLink={''}
-                documentationLinkText={'View Documentation'}
-            >
+        <TippyCustomized
+            theme={TippyTheme.white}
+            className="w-300"
+            placement="top"
+            Icon={InjectTag}
+            heading={'Propagate tags to K8s resources'}
+            infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
+            additionalContent={additionalInfo()}
+            showCloseButton={true}
+            trigger="click"
+            interactive={true}
+            documentationLink={''}
+            documentationLinkText={'View Documentation'}
+        >
+            <div className="flexbox">
+                <InjectTag className="icon-dim-16 mt-2 mr-4" />
+                <span>Propagate tags</span>
                 <Help className="icon-dim-16 mt-2 ml-4 cursor" />
-            </TippyCustomized>
-        </div>
+            </div>
+        </TippyCustomized>
     )
 }

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -4,12 +4,7 @@ import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 
-export default function TagDetails({
-    index,
-    tagData,
-    setTagData,
-    removeTag,
-}: TagDetailType) {
+export default function TagDetails({ index, tagData, setTagData, removeTag }: TagDetailType) {
     const deleteTag = (): void => {
         removeTag(index)
     }
@@ -26,8 +21,20 @@ export default function TagDetails({
             >
                 <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
             </div>
-            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="key" />
-            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="value" />
+            <TagLabelValueSelector
+                selectedTagIndex={index}
+                tagData={tagData}
+                setTagData={setTagData}
+                type="key"
+                placeholder="Enter key"
+            />
+            <TagLabelValueSelector
+                selectedTagIndex={index}
+                tagData={tagData}
+                setTagData={setTagData}
+                type="value"
+                placeholder="Enter value"
+            />
             <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer" onClick={deleteTag}>
                 <DeleteCross className="icon-dim-20 mt-4" />
             </div>

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -12,6 +12,7 @@ export const TagLabelValueSelector = ({
     tagOptions,
     isRequired,
     type,
+    placeholder,
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [isPopupOpen, togglePopup] = useState<boolean>(false)
@@ -58,7 +59,9 @@ export const TagLabelValueSelector = ({
     const renderValidationsSuggestions = (): JSX.Element => {
         let field = { isValid: true, messages: [] }
         if (type === 'key') {
-            field = validationRules.propagateTagKey(selectedValue)
+            if (selectedValue || tagData.value || tagData.description) {
+                field = validationRules.propagateTagKey(selectedValue)
+            }
         } else if (isRequired || selectedValue) {
             field = validationRules.propagateTagValue(selectedValue)
         }
@@ -68,7 +71,7 @@ export const TagLabelValueSelector = ({
                     {field.messages.map((error) => (
                         <div key={error} className="flexbox p-4">
                             <span>
-                                <ErrorCross className="icon-dim-14 scr-5 mt-3 mr-4" />
+                                <ErrorCross className="fcr-5 mr-4" />
                             </span>
                             <span>{error}</span>
                         </div>
@@ -76,7 +79,7 @@ export const TagLabelValueSelector = ({
                     {type === 'key' && (
                         <div className="flexbox p-4">
                             <span>
-                                <Info className="icon-dim-14 mt-3 mr-4" />
+                                <Info className="mr-4" />
                             </span>
                             <span className="dc__italic-font-style">Key format: prefix/name or name</span>
                         </div>
@@ -110,7 +113,7 @@ export const TagLabelValueSelector = ({
     return (
         <PopupMenu onToggleCallback={(isOpen) => togglePopup(isOpen)} autoClose>
             <PopupMenu.Button
-                rootClassName={`${
+                rootClassName={`h-32 ${
                     type === 'key'
                         ? `dc__no-right-radius`
                         : `dc__no-border-radius dc__no-right-border dc__no-left-border`
@@ -122,6 +125,7 @@ export const TagLabelValueSelector = ({
                     value={selectedValue}
                     onChange={handleInputChange}
                     onBlur={handleOnBlur}
+                    placeholder={placeholder}
                 />
             </PopupMenu.Button>
             <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true}>

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -0,0 +1,92 @@
+import React, { CSSProperties } from 'react'
+import { Link } from 'react-router-dom'
+import './infoColourBar.scss'
+
+interface InfoColourBarType {
+    message: React.ReactNode
+    classname: string
+    Icon
+    iconClass?: string
+    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
+    renderActionButton?: () => JSX.Element
+    linkText?: React.ReactNode
+    redirectLink?: string
+    linkOnClick?: () => void
+    linkClass?: string
+    internalLink?: boolean
+    styles?: CSSProperties
+}
+
+function InfoColourBar({
+    message,
+    classname,
+    Icon,
+    iconClass,
+    iconSize,
+    renderActionButton,
+    linkText,
+    redirectLink,
+    linkOnClick,
+    linkClass,
+    internalLink,
+    styles,
+}: InfoColourBarType) {
+    const renderLink = () => {
+        if (!linkText) {
+            return null
+        } else if (redirectLink) {
+            if (internalLink) {
+                return (
+                    <Link
+                        to={redirectLink}
+                        onClick={linkOnClick}
+                        className="cursor dc__link dc__underline-onhover mr-5"
+                    >
+                        {linkText}
+                    </Link>
+                )
+            }
+
+            return (
+                <a
+                    href={redirectLink}
+                    target="_blank"
+                    onClick={linkOnClick}
+                    className="cursor dc__link dc__underline-onhover mr-5"
+                >
+                    {linkText}
+                </a>
+            )
+        }
+
+        return (
+            linkOnClick && (
+                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover">
+                    {linkText}
+                </div>
+            )
+        )
+    }
+
+    return (
+        <div className="info-bar-container">
+            <div
+                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-16 pr-16 br-4 top fs-13 fw-4`}
+                style={styles}
+            >
+                <div className={`flex top ${typeof renderActionButton === 'function' ? 'mr-5' : ''}`}>
+                    <div className={`icon-dim-${iconSize ?? '20'} mr-10`}>
+                        <Icon className={`icon-dim-${iconSize ?? '20'} ${iconClass || ''} mr-8`} />
+                    </div>
+                    <div className={`info-bar-message-wrapper ${linkClass || ''}`}>
+                        <span className={linkText && redirectLink ? 'mr-5' : ''}>{message}</span>
+                        {renderLink()}
+                    </div>
+                </div>
+                {typeof renderActionButton === 'function' && renderActionButton()}
+            </div>
+        </div>
+    )
+}
+
+export default InfoColourBar

package/src/Common/InfoColorBar/infoColourBar.scss

@@ -0,0 +1,28 @@
+.info-bar-container {
+    .info_text .success {
+        background-color: var(--G100);
+    }
+    .warn {
+        background: var(--Y100);
+        border: solid var(--Y200);
+
+        .warning-icon path:nth-child(2) {
+            fill: var(--Y700);
+        }
+    }
+
+    .info_bar {
+        background-color: var(--B100);
+        border: 1px solid var(--B200);
+    }
+
+    .error_bar {
+        background-color: var(--R100);
+        border: 1px solid var(--R200);
+    }
+
+    .question-bar {
+        background-color: var(--V100);
+        border: 1px solid var(--V200);
+    }
+}

package/src/Common/MultiSelectCustomization.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import Select, { components } from 'react-select'
+import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
+import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
+import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
+
+export const Option = (props) => {
+    const { selectOption, data } = props
+    return (
+        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
+            <input
+                checked={props.isSelected}
+                disabled={props.isDisabled}
+                onChange={(e) => selectOption(data)}
+                type="checkbox"
+                style={{ height: '16px', width: '16px', flex: '0 0 16px' }}
+                className="mr-8"
+            />
+            <components.Option {...props} />
+        </div>
+    )
+}
+
+export const SingleSelectOption = (props) => {
+    const { selectOption, data } = props
+    const style = { height: '16px', width: '16px', flex: '0 0 16px' }
+    const onClick = (e) => selectOption(data)
+    return (
+        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
+            {props.isSelected ? (
+                <Check onClick={onClick} className="mr-8 icon-dim-16" style={style} />
+            ) : (
+                <span onClick={onClick} className="mr-8" style={style} />
+            )}
+            <components.Option {...props} />
+        </div>
+    )
+}
+
+export const MultiValueContainer = (props) => {
+    const { children, data, innerProps, selectProps } = props
+    const { label, value } = data
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            <div className={`flex fs-12 ml-4 cn-9`}>{label}</div>
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
+
+export const ClearIndicator = (props) => {
+    const {
+        children = <ClearIcon className="icon-dim-24" />,
+        getStyles,
+        innerProps: { ref, ...restInnerProps },
+    } = props
+    return (
+        <div {...restInnerProps} ref={ref} style={getStyles('clearIndicator', props)}>
+            <div className="flex pointer">{children}</div>
+        </div>
+    )
+}
+
+export const MultiValueRemove = (props) => {
+    const {
+        data,
+        innerProps: { onClick, onMouseDown },
+        selectProps,
+    } = props
+    return (
+        <components.MultiValueRemove {...props}>
+            <ClearIcon
+                {...{ onClick, onMouseDown }}
+                onClick={(e) => onClick(data)}
+                style={{ height: '18px', width: '18px' }}
+            />
+        </components.MultiValueRemove>
+    )
+}
+
+export const MultiValueChipContainer = ({ validator,  isAllSelected = false, ...props }) => {
+    const { children, data, innerProps, selectProps } = props
+    const { label, value } = data
+    const isValidEmail = validator ? validator(value) : true
+
+    if(isAllSelected && value !== '*') return null
+
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            <div className={`flex fs-12 pl-4 pr-4`}>
+                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
+                <div className={`${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
+            </div>
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
+
+export const multiSelectStyles = {
+  control: (base, state) => ({
+      ...base,
+      cursor: state.isDisabled ? 'not-allowed' : 'normal',
+      border: state.isFocused ? '1px solid #06c' : '1px solid #d6dbdf',
+      boxShadow: 'none',
+      minheight: '24px !important'
+  }),
+  menu: (base, state) => ({
+      ...base,
+      top: `40px`,
+  }),
+  option: (base, state) => {
+      return ({
+          ...base,
+          backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+          color: 'var(--N900)',
+          padding: '8px 12px',
+      })
+  },
+  container: (base, state) => ({
+      ...base,
+      cursor: state.isDisabled ? 'not-allowed' : 'normal'
+  }),
+  valueContainer: (base, state) => ({
+      ...base,
+      color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
+  }),
+}
+
+interface CustomSelect {
+    sortSelected?: boolean
+    options: any[]
+    onChange: (...args) => void
+    value?: any
+    name?: string
+    placeholder?: string
+    className?: string
+    classNamePrefix?: string
+    menuPortalTarget?: any
+    components?: object
+    styles?: object
+    isMulti?: boolean
+    isDisabled?: boolean
+    closeMenuOnSelect?: boolean
+    hideSelectedOptions?: boolean
+    formatOptionLabel?: (...args) => any
+}
+
+export const CustomSelect: React.FC<CustomSelect> = (props) => {
+    return <Select {...props} />
+}

package/src/Common/Types.ts

@@ -18,6 +18,7 @@ export interface TagType {
     value?: string
     description?: string
     propagate: boolean
+    mandatoryProjectIdsCsv?: string[]
     isInvalidKey?: boolean
     isInvalidValue?: boolean
 }
@@ -51,4 +52,5 @@ export interface TagLabelValueSelectorType {
   tagOptions?: OptionType[]
   isRequired?: boolean
   type?: string
+  placeholder?: string
 }

package/src/Common/index.ts

@@ -19,4 +19,6 @@ export * from './RadioGroup'
 export { default as PopupMenu } from './PopupMenu'
 export * from './TippyCustomized'
 export * from './CustomTagSelector'
-export * from './Dialogs'
+export * from './Dialogs'
+export * from './MultiSelectCustomization'
+export * from './InfoColorBar/InfoColourbar'