chore: import doc link component in info icon tippy

Author: shivani170

src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

@@ -22,7 +22,6 @@ import { Moment } from 'moment'
 
 import {
     CustomInput,
-    getDocumentationUrl,
     InfoIconTippy,
     ServerErrors,
     showError,
@@ -58,7 +57,7 @@ export const renderQuestionwithTippy = () => (
     <InfoIconTippy
         heading={API_COMPONENTS.TITLE}
         infoText={API_COMPONENTS.QUESTION_ICON_INFO}
-        documentationLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_API_TOKEN)}
+        documentationLink={DOCUMENTATION.GLOBAL_CONFIG_API_TOKEN}
         documentationLinkText="View Documentation"
         iconClassName="icon-dim-20 fcn-9 ml-4"
     />

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx

@@ -20,14 +20,12 @@ import {
     Button,
     ButtonComponentType,
     ComponentSizeType,
-    getDocumentationUrl,
-    InfoIconTippy,
+    FeatureTitleWithInfo,
     SearchBar,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-add.svg'
-import { ReactComponent as ArrowSquareOut } from '../../../../../assets/icons/ic-arrow-square-out.svg'
 import { DOCUMENTATION } from '../../../../../config'
 import ExportPermissionGroupsToCsv from './ExportPermissionGroupsToCsv'
 import { PermissionGroupListHeaderProps } from './types'
@@ -44,24 +42,13 @@ const PermissionGroupListHeader = ({
     return (
         <div className="flex dc__content-space pl-20 pr-20 pt-16">
             <div className="flex dc__gap-8">
-                <h2 className="fs-16 lh-32 cn-9 fw-6 m-0">Permission Groups</h2>
-                <InfoIconTippy
-                    infoText="Permission groups allow you to easily manage user permissions by assigning desired permissions to a group and assigning these groups to users to provide all underlying permissions."
-                    heading="Permission Groups"
-                    additionalContent={
-                        <div className="pl-12 pb-12">
-                            <a
-                                href={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_GROUPS)}
-                                target="_blank"
-                                rel="noreferrer noreferrer"
-                                className="anchor flexbox flex-align-center fs-13 dc__gap-4"
-                            >
-                                View Documentation
-                                <ArrowSquareOut className="icon-dim-14 scb-5" />
-                            </a>
-                        </div>
+                <FeatureTitleWithInfo
+                    title="Permission Groups"
+                    renderDescriptionContent={() =>
+                        'Permission groups allow you to easily manage user permissions by assigning desired permissions to a group and assigning these groups to users to provide all underlying permissions.'
                     }
-                    iconClassName="mw-20 icon-dim-20 fcn-6"
+                    docLink={DOCUMENTATION.GLOBAL_CONFIG_GROUPS}
+                    showInfoIconTippy
                 />
             </div>
             <div className="flex dc__gap-8">

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -39,7 +39,6 @@ import {
     DEFAULT_SECRET_PLACEHOLDER,
     ErrorScreenManager,
     FeatureTitleWithInfo,
-    getDocumentationUrl,
     InfoBlock,
     MODES,
     noop,
@@ -834,7 +833,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                         <FeatureTitleWithInfo
                             title={HEADER_TEXT.SSO_LOGIN.title}
                             renderDescriptionContent={() => HEADER_TEXT.SSO_LOGIN.description}
-                            docLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_SSO)}
+                            docLink={DOCUMENTATION.GLOBAL_CONFIG_SSO}
                             showInfoIconTippy
                             dataTestId="sso-login-heading"
                         />

src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx

@@ -20,14 +20,12 @@ import {
     Button,
     ButtonComponentType,
     ComponentSizeType,
-    getDocumentationUrl,
-    InfoIconTippy,
+    FeatureTitleWithInfo,
     SearchBar,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-add.svg'
-import { ReactComponent as ArrowSquareOut } from '../../../../../assets/icons/ic-arrow-square-out.svg'
 import { importComponentFromFELibrary } from '../../../../../components/common'
 import { DOCUMENTATION } from '../../../../../config'
 import ExportUserPermissionsToCsv from './ExportUserPermissionsToCsv'
@@ -50,24 +48,13 @@ const UserPermissionListHeader = ({
     return (
         <div className="flex dc__content-space px-20 dc__zi-2 pt-16">
             <div className="flex dc__gap-8">
-                <h2 className="fs-16 lh-32 cn-9 fw-6 m-0">User Permissions</h2>
-                <InfoIconTippy
-                    infoText="Manage your organization's users and their permissions."
-                    heading="User Permissions"
-                    additionalContent={
-                        <div className="pl-12 pb-12">
-                            <a
-                                href={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_USER)}
-                                target="_blank"
-                                rel="noreferrer noreferrer"
-                                className="anchor flexbox flex-align-center fs-13 dc__gap-4"
-                            >
-                                View Documentation
-                                <ArrowSquareOut className="icon-dim-14 scb-5" />
-                            </a>
-                        </div>
+                <FeatureTitleWithInfo
+                    title="User Permissions"
+                    renderDescriptionContent={() =>
+                        "Manage your organization's users and their permissions. You can assign users to permission groups to provide all underlying permissions."
                     }
-                    iconClassName="mw-20 icon-dim-20 fcn-6"
+                    docLink={DOCUMENTATION.GLOBAL_CONFIG_USER}
+                    showInfoIconTippy
                 />
             </div>
             <div className="flex dc__gap-8">

src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsListHeader.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { getDocumentationUrl, InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 
 import { CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT, DOCUMENTATION } from '@Config/constants'
 
@@ -38,7 +38,7 @@ const DeploymentChartsListHeader = ({
                     </p>
                 }
                 documentationLinkText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.documentationLinkText}
-                documentationLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_CUSTOM_CHART)}
+                documentationLink={DOCUMENTATION.GLOBAL_CONFIG_CUSTOM_CHART}
                 iconClassName="icon-dim-20 fcn-6"
             />
         </div>

src/components/charts/list/DiscoverCharts.tsx

@@ -826,7 +826,7 @@ export const ChartGroupListMin = ({
                         renderDescriptionContent={() =>
                             'Use chart groups to pre-configure and deploy frequently used charts together.'
                         }
-                        docLink={getDocumentationUrl(DOCUMENTATION.CHART_GROUP)}
+                        docLink={DOCUMENTATION.CHART_GROUP}
                         docLinkText="Learn more"
                         dataTestId="chart-store"
                         showInfoIconTippy

src/components/ciConfig/CIBuildpackBuildOptions.tsx

@@ -159,7 +159,7 @@ const BuilderTippy = () => {
             infoText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.infoText}
             additionalContent={additionalBuilderTippyContent()}
             documentationLinkText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.documentationLinkText}
-            documentationLink={getDocumentationUrl(DOCUMENTATION.APP_CI_CONFIG_BUILD_WITHOUT_DOCKER)}
+            documentationLink={DOCUMENTATION.APP_CI_CONFIG_BUILD_WITHOUT_DOCKER}
             iconClassName="icon-dim-16 fcn-6 ml-4"
         />
     )

src/components/cluster/Cluster.tsx

@@ -244,7 +244,7 @@ class ClusterList extends Component<ClusterListProps, any> {
                     <FeatureTitleWithInfo
                         title={moduleBasedTitle}
                         renderDescriptionContent={() => `Manage your organization’s ${moduleBasedTitle.toLowerCase()}.`}
-                        docLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_CLUSTER)}
+                        docLink={DOCUMENTATION.GLOBAL_CONFIG_CLUSTER}
                         showInfoIconTippy
                         additionalContainerClasses="mb-20"
                     />

src/components/externalLinks/ExternalLinks.tsx

@@ -22,7 +22,6 @@ import {
     ErrorScreenManager,
     FilterChips,
     getClusterListMin,
-    getDocumentationUrl,
     InfoIconTippy,
     Progressing,
     SearchBar,
@@ -265,7 +264,7 @@ const ExternalLinks = ({ isAppConfigView, userRole }: ExternalLinksProps) => {
                         heading="External Links"
                         infoText="Configure links to third-party applications (e.g. Kibana, New Relic) for quick access. Configured
                     links will be available in the App details page."
-                        documentationLink={getDocumentationUrl(DOCUMENTATION.EXTERNAL_LINKS)}
+                        documentationLink={DOCUMENTATION.EXTERNAL_LINKS}
                         iconClassName="icon-dim-20 fcn-6 ml-8"
                     />
                 </h3>

src/components/notifications/Notifications.tsx

@@ -35,7 +35,7 @@ export default class Notifications extends Component<NotificationsProps, {}> {
                     <FeatureTitleWithInfo
                         title={HEADER_TEXT.NOTIFICATIONS.title}
                         renderDescriptionContent={() => HEADER_TEXT.NOTIFICATIONS.description}
-                        docLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_NOTIFICATION)}
+                        docLink={DOCUMENTATION.GLOBAL_CONFIG_NOTIFICATION}
                         showInfoIconTippy
                         dataTestId="notifications-feature-title"
                     />