chore: replaced all global confoguration documentation

Author: shivani170

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx

@@ -19,6 +19,7 @@ import { useState } from 'react'
 import {
     ComponentSizeType,
     DeploymentChartVersionType,
+    DocLink,
     InvalidYAMLTippyWrapper,
     PipelineMigratedFromType,
     PopupMenu,
@@ -181,15 +182,10 @@ const ChartSelectorDropdown = ({
                                             chart.description.substring(0, 250)}
                                          
                                         {CHART_DOCUMENTATION_LINK[chart.name] && (
-                                            <a
-                                                className="dc__no-decor"
-                                                href={CHART_DOCUMENTATION_LINK[chart.name]}
-                                                target="_blank"
-                                                rel="noreferrer noopener"
-                                                onClick={stopPropagation}
-                                            >
-                                                Learn more
-                                            </a>
+                                            <DocLink
+                                                docLink={CHART_DOCUMENTATION_LINK[chart.name]}
+                                                dataTestId="chart-doc-link"
+                                            />
                                         )}
                                     </div>
                                 )}

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

@@ -22,6 +22,7 @@ import { Moment } from 'moment'
 
 import {
     CustomInput,
+    getDocumentationUrl,
     InfoIconTippy,
     ServerErrors,
     showError,
@@ -57,7 +58,7 @@ export const renderQuestionwithTippy = () => (
     <InfoIconTippy
         heading={API_COMPONENTS.TITLE}
         infoText={API_COMPONENTS.QUESTION_ICON_INFO}
-        documentationLink={DOCUMENTATION.GLOBAL_CONFIG_API_TOKEN}
+        documentationLink={getDocumentationUrl(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,6 +20,7 @@ import {
     Button,
     ButtonComponentType,
     ComponentSizeType,
+    getDocumentationUrl,
     InfoIconTippy,
     SearchBar,
     useMainContext,
@@ -50,7 +51,7 @@ const PermissionGroupListHeader = ({
                     additionalContent={
                         <div className="pl-12 pb-12">
                             <a
-                                href={DOCUMENTATION.GLOBAL_CONFIG_GROUPS}
+                                href={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_GROUPS)}
                                 target="_blank"
                                 rel="noreferrer noreferrer"
                                 className="anchor flexbox flex-align-center fs-13 dc__gap-4"

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

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

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

@@ -20,6 +20,7 @@ import {
     Button,
     ButtonComponentType,
     ComponentSizeType,
+    getDocumentationUrl,
     InfoIconTippy,
     SearchBar,
     useMainContext,
@@ -56,7 +57,7 @@ const UserPermissionListHeader = ({
                     additionalContent={
                         <div className="pl-12 pb-12">
                             <a
-                                href={DOCUMENTATION.GLOBAL_CONFIG_USER}
+                                href={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_USER)}
                                 target="_blank"
                                 rel="noreferrer noreferrer"
                                 className="anchor flexbox flex-align-center fs-13 dc__gap-4"

src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsList.component.tsx

@@ -19,6 +19,7 @@ import DOMPurify from 'dompurify'
 
 import {
     APIResponseHandler,
+    DocLink,
     EMPTY_STATE_STATUS,
     GenericEmptyState,
     GenericFilterEmptyState,
@@ -87,15 +88,11 @@ const DeploymentChartsList = () => {
                     title={EMPTY_STATE_STATUS.CUSTOM_CHART_LIST.TITLE}
                     subTitle={
                         <>
-                            Import custom charts to use them in apps instead of the default system template.
-                            <a
-                                className="dc__no-decor"
-                                href={DOCUMENTATION.DEPLOYMENT_TEMPLATE}
-                                target="_blank"
-                                rel="noreferrer noopener"
-                            >
-                                Learn more
-                            </a>
+                            Import custom charts to use them in apps instead of the default system template. &nbsp;
+                            <DocLink
+                                docLink={DOCUMENTATION.DEPLOYMENT_TEMPLATE}
+                                dataTestId="deployment-charts-list-learn-more"
+                            />
                         </>
                     }
                     isButtonAvailable

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
+import { getDocumentationUrl, 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={DOCUMENTATION.CUSTOM_CHART}
+                documentationLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_CUSTOM_CHART)}
                 iconClassName="icon-dim-20 fcn-6"
             />
         </div>

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

@@ -19,6 +19,7 @@ import { useRef, useState } from 'react'
 import {
     ButtonWithLoader,
     CustomInput,
+    getDocumentationUrl,
     noop,
     showError,
     Textarea,
@@ -203,7 +204,7 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
                     📙 Need help? 
                     <a
                         className="dc__link fw-6"
-                        href={DOCUMENTATION.CUSTOM_CHART_PRE_REQUISITES}
+                        href={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_CUSTOM_CHART_PRE_REQUISITES)}
                         target="_blank"
                         rel="noreferrer noopener"
                     >

src/Pages/Shared/ConfigMapSecret/helpers.tsx

@@ -44,14 +44,7 @@ export const renderESOInfo = (isESO: boolean) =>
                         External Secrets Operator
                     </Link>
                     &nbsp;<span>should be installed in the target cluster.</span>&nbsp;
-                    <a
-                        className="anchor"
-                        href={DOCUMENTATION.EXTERNAL_SECRET}
-                        rel="noreferrer noopener"
-                        target="_blank"
-                    >
-                        Learn more
-                    </a>
+                    <DocLink docLink={DOCUMENTATION.EXTERNAL_SECRET} dataTestId="learn-more-about-external-secrets" />
                 </p>
             }
         />

src/components/CIPipelineN/CustomScriptCard.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { stopPropagation } from '@devtron-labs/devtron-fe-common-lib'
+import { getDocumentationUrl, stopPropagation } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICBookOpen } from '@Icons/ic-book-open.svg'
 import { ReactComponent as ICCDStage } from '@Icons/ic-cd-stage.svg'
@@ -38,7 +38,7 @@ const CustomScriptCard = () => (
 
                 <div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
                     <a
-                        href={DOCUMENTATION.EXECUTE_CUSTOM_SCRIPT}
+                        href={getDocumentationUrl(DOCUMENTATION.EXECUTE_CUSTOM_SCRIPT)}
                         className="anchor fs-12 fw-6 lh-20"
                         target="_blank"
                         rel="noopener noreferrer"