Merge pull request #627 from devtron-labs/feat/license-manager

feat: add license card and license info modal

Author: arunjaindev

src/Assets/IconV2/ic-key.svg

@@ -400,6 +400,7 @@ export const DATE_TIME_FORMATS = {
     TWELVE_HOURS_EXPORT_FORMAT: 'DD-MMM-YYYY hh.mm A',
     DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
     DD_MMM_YYYY: 'DD MMM YYYY',
+    'DD/MM/YYYY': 'DD/MM/YYYY',
 }
 
 export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'

src/Assets/IconV2/ic-timer.svg

@@ -84,7 +84,7 @@ const ConfirmationModalBody = ({
     return (
         <Backdrop onEscape={shouldCloseOnEscape ? handleCloseWrapper : noop}>
             <motion.div
-                className={`${isLandscapeView ? 'w-500' : 'w-400'} confirmation-modal border__secondary flexbox-col br-8 bg__primary dc__m-auto mt-40 w-400`}
+                className={`${isLandscapeView ? 'w-500' : 'w-400'} confirmation-modal border__secondary flexbox-col br-8 bg__primary dc__m-auto mt-40`}
                 exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
                 initial={{ y: 100, opacity: 0, scale: 0.75 }}
                 animate={{ y: 0, opacity: 1, scale: 1 }}

src/Common/Constants.ts

@@ -0,0 +1,75 @@
+import { ClipboardButton } from '@Common/index'
+import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
+import { DevtronLicenseCardProps, ENTERPRISE_SUPPORT_LINK, LicenseStatus } from '@Shared/index'
+import { Button, ButtonVariantType } from '../Button'
+import { Icon } from '../Icon'
+import { getLicenseColorsAccordingToStatus, getTTLInHumanReadableFormat } from './utils'
+import './licenseCard.scss'
+
+export const DevtronLicenseCard = ({
+    enterpriseName,
+    licenseKey,
+    licenseSuffix,
+    expiryDate,
+    licenseStatus,
+    isTrial,
+    ttl,
+}: DevtronLicenseCardProps) => {
+    const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
+    const remainingTime = getTTLInHumanReadableFormat(ttl)
+    const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
+
+    return (
+        <div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
+            <div className="license-card flexbox-col br-12 h-200 bg__tertiary">
+                <div className="p-20 flexbox-col dc__content-space flex-grow-1">
+                    <div className="flexbox dc__align-items-center dc__content-space">
+                        <span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5 dc__truncate">{enterpriseName}</span>
+                        <Icon name="ic-devtron" color="N900" size={24} />
+                    </div>
+                    <div className="flexbox-col dc__gap-4">
+                        <div className="flexbox dc__align-items-center dc__gap-6">
+                            <Icon name="ic-key" color={null} size={20} />
+                            <div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 font-ibm-plex-mono">
+                                <span>&bull;&bull;&bull;&bull;</span>
+                                <span>{licenseSuffix || licenseKey?.slice(-8)}</span>
+                            </div>
+                            {licenseKey && <ClipboardButton content={licenseKey} />}
+                        </div>
+                        <div className="flexbox dc__align-items-center dc__gap-4">
+                            <span>{expiryDate}</span>
+                            <span>•</span>
+                            <span style={{ color: textColor }}>{remainingTimeString}</span>
+                        </div>
+                    </div>
+                </div>
+                {isTrial && (
+                    <span className="trial-license-badge flexbox dc__align-items-center px-20 py-6 cn-9 fs-11 fw-5 lh-1-5">
+                        TRIAL LICENSE
+                    </span>
+                )}
+            </div>
+            {licenseStatus !== LicenseStatus.ACTIVE && (
+                <div className="p-16 flexbox-col dc__gap-8">
+                    <div className="flexbox dc__gap-8">
+                        <span>
+                            To renew your license mail us at&nbsp;
+                            <a href={`mailto:${ENTERPRISE_SUPPORT_LINK}`}>{ENTERPRISE_SUPPORT_LINK}</a> or contact your
+                            Devtron representative.
+                        </span>
+                        <Icon name={ttl < 0 ? 'ic-timer' : 'ic-error'} color={ttl < 0 ? 'Y500' : 'R500'} size={16} />
+                    </div>
+                    {/* TODO: Add onClick, and common out the button */}
+                    <Button
+                        dataTestId="contact-support"
+                        startIcon={<ICChatSupport />}
+                        text="Contact support"
+                        variant={ButtonVariantType.text}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default DevtronLicenseCard

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1 @@
+export { default as DevtronLicenseCard } from './DevtronLicenseCard'

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -0,0 +1,15 @@
+.license-card {
+    border: 1px solid var(--border-secondary-translucent, rgba(255, 255, 255, 0.1));
+    background: radial-gradient(340.2% 100% at 0% 0%, var(--bg-primary, #0f0f10) 0%, var(--bg-tertiary, #030303) 100%);
+    box-shadow:
+        0px 1px 1px 0px rgba(0, 0, 0, 0.04),
+        0px 2px 6px 0px rgba(0, 0, 0, 0.04),
+        0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+
+    .trial-license-badge {
+        background-color: var(--bg-hover);
+        letter-spacing: 0.55px;
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+}

src/Shared/Components/DevtronLicenseCard/index.tsx

@@ -0,0 +1,18 @@
+import { LicenseStatus } from '@Shared/index'
+import moment from 'moment'
+
+export const getLicenseColorsAccordingToStatus = (
+    licenseStatus: LicenseStatus,
+): { bgColor: string; textColor: string } => {
+    switch (licenseStatus) {
+        case LicenseStatus.ACTIVE:
+            return { bgColor: 'var(--G100)', textColor: 'var(--G500)' }
+        case LicenseStatus.REMINDER_THRESHOLD_REACHED:
+            return { bgColor: 'var(--Y100)', textColor: 'var(--Y700)' }
+        default:
+            return { bgColor: 'var(--R100)', textColor: 'var(--R500)' }
+    }
+}
+
+export const getTTLInHumanReadableFormat = (ttl: number): string =>
+    moment.duration(Math.abs(ttl), 'seconds').humanize(false)

src/Shared/Components/DevtronLicenseCard/licenseCard.scss

@@ -26,6 +26,7 @@ import { ReactComponent as Feedback } from '../../../Assets/Icon/ic-feedback.svg
 import { ReactComponent as Discord } from '../../../Assets/Icon/ic-discord-fill.svg'
 import { ReactComponent as File } from '../../../Assets/Icon/ic-file-text.svg'
 import { useMainContext } from '../../Providers'
+import { Icon } from '../Icon'
 
 const HelpNav = ({
     className,
@@ -35,7 +36,7 @@ const HelpNav = ({
     setGettingStartedClicked,
     showHelpCard,
 }: HelpNavType) => {
-    const { currentServerInfo } = useMainContext()
+    const { currentServerInfo, handleOpenLicenseInfoDialog } = useMainContext()
     const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
     const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
 
@@ -44,14 +45,12 @@ const HelpNav = ({
             name: 'View documentation',
             link: DOCUMENTATION_HOME_PAGE,
             icon: File,
-            showSeparator: true,
         },
 
         {
             name: 'Join discord community',
             link: DISCORD_LINK,
             icon: Discord,
-            showSeparator: isEnterprise,
         },
         ...(isEnterprise ? EnterpriseHelpOptions : OSSHelpOptions),
     ]
@@ -75,7 +74,7 @@ const HelpNav = ({
         <div onClick={stopPropagation} className="help-card__option help-card__link flex left cn-9">
             <Feedback />
             <SliderButton
-                className="dc__transparent help-card__option-name ml-12 cn-9 fs-14"
+                className="dc__transparent ml-12 cn-9 fs-14"
                 id={FEEDBACK_FORM_ID}
                 onClose={toggleHelpCard}
                 autoClose={2000}
@@ -92,7 +91,6 @@ const HelpNav = ({
 
     const renderHelpOptions = (): JSX.Element => (
         <>
-            {' '}
             {CommonHelpOptions.map((option, index) => (
                 <Fragment key={option.name}>
                     <a
@@ -105,12 +103,22 @@ const HelpNav = ({
                         onClick={handleHelpOptions}
                     >
                         <option.icon />
-                        <div className="help-card__option-name ml-12 cn-9 fs-14">{option.name}</div>
+                        <div className="ml-12 cn-9 fs-14">{option.name}</div>
                     </a>
                     {isEnterprise && index === 1 && (
-                        <div className="help__enterprise pl-8 pb-4-imp pt-4-imp dc__gap-12 flexbox dc__align-items-center h-28">
-                            Enterprise Support
-                        </div>
+                        <>
+                            <button
+                                type="button"
+                                className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
+                                onClick={handleOpenLicenseInfoDialog}
+                            >
+                                <Icon name="ic-devtron" color="N600" size={20} />
+                                About Devtron
+                            </button>
+                            <div className="help__enterprise pl-8 pb-4-imp pt-4-imp dc__gap-12 flexbox dc__align-items-center h-28">
+                                Enterprise Support
+                            </div>
+                        </>
                     )}
                 </Fragment>
             ))}
@@ -128,7 +136,7 @@ const HelpNav = ({
                         onClick={onClickGettingStarted}
                     >
                         <GettingStartedIcon className="scn-6" />
-                        <div className="help-card__option-name ml-12 cn-9 fs-14" data-testid="getting-started-link">
+                        <div className="ml-12 cn-9 fs-14" data-testid="getting-started-link">
                             Getting started
                         </div>
                     </NavLink>

src/Shared/Components/DevtronLicenseCard/utils.tsx

@@ -39,7 +39,6 @@ export const OSSHelpOptions: HelpOptionType[] = [
         name: 'Chat with support',
         link: DISCORD_LINK,
         icon: Chat,
-        showSeparator: true,
     },
 
     {