Merge pull request #680 from devtron-labs/feat/trial-help-options

feat: add request support link in help nav

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.0-patch-6",
+    "version": "1.10.0-patch-7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,6 +1,6 @@
 import { ClipboardButton } from '@Common/index'
 
-import { DOCUMENTATION_HOME_PAGE } from '@Common/Constants'
+import { DOCUMENTATION } from '@Common/Constants'
 import { InfoIconTippy } from '..'
 import { InstallFingerprintInfoProps } from './types'
 
@@ -15,7 +15,7 @@ const InstallationFingerprintInfo = ({ fingerprint, showHelpTooltip = false }: I
                     documentationLinkText="Documentation"
                     iconClassName="icon-dim-20 fcn-6"
                     placement="right"
-                    documentationLink={DOCUMENTATION_HOME_PAGE}
+                    documentationLink={DOCUMENTATION.ENTERPRISE_LICENSE}
                 />
             )}
         </div>

src/Shared/Components/DevtronLicenseCard/InstallationFingerprintInfo.tsx

@@ -18,15 +18,13 @@ import { Fragment } from 'react'
 import ReactGA from 'react-ga4'
 import { NavLink } from 'react-router-dom'
 import { SliderButton } from '@typeform/embed-react'
-import { stopPropagation, DOCUMENTATION_HOME_PAGE, URLS, DISCORD_LINK } from '../../../Common'
+import { stopPropagation, URLS } from '../../../Common'
 import { InstallationType, HelpNavType, HelpOptionType } from './types'
-import { EnterpriseHelpOptions, OSSHelpOptions } from './constants'
 import { ReactComponent as GettingStartedIcon } from '../../../Assets/Icon/ic-onboarding.svg'
 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'
+import { getHelpOptions } from './utils'
 
 const HelpNav = ({
     className,
@@ -38,22 +36,10 @@ const HelpNav = ({
 }: HelpNavType) => {
     const { currentServerInfo, handleOpenLicenseInfoDialog, licenseData } = useMainContext()
     const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
+    const isTrial = licenseData?.isTrial ?? false
     const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
 
-    const CommonHelpOptions: HelpOptionType[] = [
-        {
-            name: 'View documentation',
-            link: DOCUMENTATION_HOME_PAGE,
-            icon: File,
-        },
-
-        {
-            name: 'Join discord community',
-            link: DISCORD_LINK,
-            icon: Discord,
-        },
-        ...(isEnterprise ? EnterpriseHelpOptions : OSSHelpOptions),
-    ]
+    const CommonHelpOptions: HelpOptionType[] = getHelpOptions(isEnterprise, isTrial)
 
     const onClickGettingStarted = (): void => {
         setGettingStartedClicked(true)
@@ -114,17 +100,19 @@ const HelpNav = ({
                         <div className="ml-12 cn-9 fs-14">{option.name}</div>
                     </a>
                     {/* licenseData is only set when showLicenseData is received true */}
-                    {isEnterprise && licenseData && index === 1 && (
+                    {isEnterprise && index === 1 && (
                         <>
-                            <button
-                                type="button"
-                                className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
-                                onClick={handleOpenLicenseDialog}
-                                data-testid="about-devtron"
-                            >
-                                <Icon name="ic-devtron" color="N600" size={20} />
-                                About Devtron
-                            </button>
+                            {licenseData && (
+                                <button
+                                    type="button"
+                                    className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
+                                    onClick={handleOpenLicenseDialog}
+                                    data-testid="about-devtron"
+                                >
+                                    <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>

src/Shared/Components/Header/HelpNav.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { OPEN_NEW_TICKET, RAISE_ISSUE, VIEW_ALL_TICKETS } from '@Shared/constants'
+import { CONTACT_SUPPORT_LINK, OPEN_NEW_TICKET, RAISE_ISSUE, VIEW_ALL_TICKETS } from '@Shared/constants'
 import { HelpOptionType } from './types'
 import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg'
 import { ReactComponent as EditFile } from '../../../Assets/Icon/ic-edit-file.svg'
@@ -47,3 +47,11 @@ export const OSSHelpOptions: HelpOptionType[] = [
         icon: EditFile,
     },
 ]
+
+export const TrialHelpOptions: HelpOptionType[] = [
+    {
+        name: 'Request Support',
+        link: CONTACT_SUPPORT_LINK,
+        icon: EditFile,
+    },
+]

src/Shared/Components/Header/constants.ts

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
+import { ReactComponent as File } from '@Icons/ic-file-text.svg'
+import { ReactComponent as Discord } from '@Icons/ic-discord-fill.svg'
 import { updatePostHogEvent } from './service'
-import { LOGIN_COUNT } from '../../../Common'
+import { DISCORD_LINK, DOCUMENTATION_HOME_PAGE, LOGIN_COUNT } from '../../../Common'
 import { DevtronLicenseInfo, LicenseStatus } from '../DevtronLicenseCard'
+import { EnterpriseHelpOptions, OSSHelpOptions, TrialHelpOptions } from './constants'
 
 const millisecondsInDay = 86400000
 export const getDateInMilliseconds = (days) => 1 + new Date().valueOf() + (days ?? 0) * millisecondsInDay
@@ -37,3 +40,28 @@ export const setActionWithExpiry = (key: string, days: number): void => {
 
 export const getIsShowingLicenseData = (licenseData: DevtronLicenseInfo) =>
     licenseData && (licenseData.licenseStatus !== LicenseStatus.ACTIVE || licenseData.isTrial)
+
+const getInstallationSpecificHelpOptions = (isEnterprise: boolean, isTrial: boolean) => {
+    if (isEnterprise) {
+        return isTrial ? TrialHelpOptions : EnterpriseHelpOptions
+    }
+    return OSSHelpOptions
+}
+
+export const getHelpOptions = (isEnterprise: boolean, isTrial: boolean) => {
+    const HelpOptions = getInstallationSpecificHelpOptions(isEnterprise, isTrial)
+    return [
+        {
+            name: 'View documentation',
+            link: DOCUMENTATION_HOME_PAGE,
+            icon: File,
+        },
+
+        {
+            name: 'Join discord community',
+            link: DISCORD_LINK,
+            icon: Discord,
+        },
+        ...HelpOptions,
+    ]
+}