feat: use main context for super admin

Author: arunjaindev

src/Shared/Components/CICDHistory/CiPipelineSourceConfig.tsx

@@ -22,6 +22,7 @@ import webhookIcon from '../../../Assets/Icon/ic-webhook.svg'
 import branchIcon from '../../../Assets/Icon/ic-branch.svg'
 import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-outlined.svg'
 import regexIcon from '../../../Assets/Icon/ic-regex.svg'
+import { _buildHoverHtmlForWebhook } from './utils'
 
 export interface CIPipelineSourceConfigInterface {
     sourceType
@@ -51,30 +52,6 @@ export const CiPipelineSourceConfig = ({
     const [sourceValueAdv, setSourceValueAdv] = useState<ReactNode>('')
     const [loading, setLoading] = useState(!!_isWebhook)
 
-    function _buildHoverHtmlForWebhook(eventName, condition, selectors) {
-        const _conditions = []
-        Object.keys(condition).forEach((_selectorId) => {
-            // eslint-disable-next-line eqeqeq
-            const _selector = selectors.find((i) => i.id == _selectorId)
-            _conditions.push({ name: _selector ? _selector.name : '', value: condition[_selectorId] })
-        })
-
-        return (
-            <>
-                <span> {eventName} Filters </span>
-                <br />
-                <ul className="m-0">
-                    {_conditions.map((_condition, index) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <li key={index}>
-                            {_condition.name} : {_condition.value}
-                        </li>
-                    ))}
-                </ul>
-            </>
-        )
-    }
-
     const updateSourceValue = () => {
         if (_isWebhook) {
             const _sourceValueObj = JSON.parse(sourceValue)
@@ -153,7 +130,7 @@ export const CiPipelineSourceConfig = ({
         regexTippyContent()
     }, [])
 
-    const getRegexOrBranchIcon = () => (_isRegex ? regexIcon : branchIcon)
+    const isRegexOrBranchIcon = _isRegex ? regexIcon : branchIcon
 
     return (
         <div className={`flex left ${showTooltip ? 'branch-name' : ''}`}>
@@ -162,7 +139,7 @@ export const CiPipelineSourceConfig = ({
                 <>
                     {showIcons && (
                         <img
-                            src={_isWebhook ? webhookIcon : getRegexOrBranchIcon()}
+                            src={_isWebhook ? webhookIcon : isRegexOrBranchIcon}
                             alt="branch"
                             className="icon-dim-12 mr-5"
                         />

src/Shared/Components/CICDHistory/DeploymentStatusDetailRow.tsx

@@ -24,16 +24,10 @@ import { ErrorInfoStatusBar } from './ErrorInfoStatusBar'
 import { DeploymentStatusDetailRowType } from './types'
 import { getManualSync } from './service'
 import { MANIFEST_STATUS_HEADERS, TERMINAL_STATUS_MAP } from './constants'
-import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
-import { ReactComponent as Check } from '../../../Assets/Icon/ic-check-grey.svg'
-import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
-import { ReactComponent as Error } from '../../../Assets/Icon/ic-error-exclamation.svg'
-import { ReactComponent as Timer } from '../../../Assets/Icon/ic-timer.svg'
-import { ReactComponent as Disconnect } from '../../../Assets/Icon/ic-disconnected.svg'
-import { ReactComponent as TimeOut } from '../../../Assets/Icon/ic-timeout-red.svg'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { ShowMoreText } from '../ShowMoreText/ShowMoreText'
 import AppStatusDetailsChart from './AppStatusDetailsChart'
+import { renderIcon } from './utils'
 
 export const DeploymentStatusDetailRow = ({
     type,
@@ -64,33 +58,6 @@ export const DeploymentStatusDetailRow = ({
         toggleCollapsed(!collapsed)
     }
 
-    const renderIcon = (iconState: string): JSX.Element => {
-        switch (iconState) {
-            case 'success':
-                return <Check className="icon-dim-20 green-tick" data-testid="success-green-tick" />
-            case 'failed':
-                return <Error className="icon-dim-20" />
-            case 'unknown':
-                return <ICHelpOutline className="icon-dim-20" />
-            case 'inprogress':
-                return (
-                    <div className="icon-dim-20">
-                        <div className="pulse-highlight" />
-                    </div>
-                )
-            case 'unreachable':
-                return <Close className="icon-dim-20" />
-            case 'loading':
-                return <div className="dc__app-summary__icon icon-dim-20 mr-6 progressing progressing--node" />
-            case 'disconnect':
-                return <Disconnect className="icon-dim-20" />
-            case 'time_out':
-                return <TimeOut className="icon-dim-20" />
-            default:
-                return <Timer className="icon-dim-20 timer-icon" />
-        }
-    }
-
     const renderDetailedData = () =>
         !collapsed ? (
             <div className="bcn-0 en-2 detail-tab_border bw-1">

src/Shared/Components/CICDHistory/History.components.tsx

@@ -15,16 +15,17 @@
  */
 
 import Tippy from '@tippyjs/react'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useLocation } from 'react-router'
-import { ClipboardButton, GenericEmptyState, extractImage, getUserRole, showError, useKeyDown } from '../../../Common'
+import { ClipboardButton, GenericEmptyState, extractImage, useKeyDown } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { GitChangesType, LogResizeButtonType, ScrollerType } from './types'
 import GitCommitInfoGeneric from '../GitCommitInfoGeneric/GitCommitInfoGeneric'
 import { CIListItem } from './Artifacts'
 import { ReactComponent as ZoomIn } from '../../../Assets/Icon/ic-fullscreen.svg'
 import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscreen.svg'
+import { useMainContext } from '../../Providers'
 
 export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResizeButtonType): JSX.Element => {
     const { pathname } = useLocation()
@@ -116,25 +117,7 @@ export const GitChanges = ({
     selectedEnvironmentName,
     renderCIListHeader,
 }: GitChangesType) => {
-    const [isSuperAdmin, setSuperAdmin] = useState<boolean>(false)
-
-    async function initialise() {
-        try {
-            const userRole = await getUserRole()
-
-            const superAdmin = userRole?.result?.roles?.includes('role:super-admin___')
-            setSuperAdmin(superAdmin)
-        } catch (err) {
-            showError(err)
-        }
-    }
-
-    useEffect(() => {
-        if (artifactId) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            initialise()
-        }
-    }, [artifactId])
+    const { isSuperAdmin } = useMainContext()
 
     if (!ciMaterials?.length || !Object.keys(gitTriggers ?? {}).length) {
         return (

src/Shared/Components/CICDHistory/utils.tsx

@@ -21,6 +21,13 @@ import {
     TriggerHistoryFilterCriteriaType,
 } from './types'
 import { ResourceKindType } from '../../types'
+import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
+import { ReactComponent as Check } from '../../../Assets/Icon/ic-check-grey.svg'
+import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
+import { ReactComponent as Error } from '../../../Assets/Icon/ic-error-exclamation.svg'
+import { ReactComponent as Timer } from '../../../Assets/Icon/ic-timer.svg'
+import { ReactComponent as Disconnect } from '../../../Assets/Icon/ic-disconnected.svg'
+import { ReactComponent as TimeOut } from '../../../Assets/Icon/ic-timeout-red.svg'
 
 export const getTriggerHistoryFilterCriteria = ({
     appId,
@@ -65,3 +72,54 @@ export const getParsedTriggerHistory = (result): DeploymentHistoryResultObject =
     }
     return parsedResult
 }
+
+export const _buildHoverHtmlForWebhook = (eventName, condition, selectors) => {
+    const _conditions = []
+    Object.keys(condition).forEach((_selectorId) => {
+        // eslint-disable-next-line eqeqeq
+        const _selector = selectors.find((i) => i.id == _selectorId)
+        _conditions.push({ name: _selector ? _selector.name : '', value: condition[_selectorId] })
+    })
+
+    return (
+        <>
+            <span> {eventName} Filters </span>
+            <br />
+            <ul className="m-0">
+                {_conditions.map((_condition, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <li key={index}>
+                        {_condition.name} : {_condition.value}
+                    </li>
+                ))}
+            </ul>
+        </>
+    )
+}
+
+export const renderIcon = (iconState: string): JSX.Element => {
+    switch (iconState) {
+        case 'success':
+            return <Check className="icon-dim-20 green-tick" data-testid="success-green-tick" />
+        case 'failed':
+            return <Error className="icon-dim-20" />
+        case 'unknown':
+            return <ICHelpOutline className="icon-dim-20" />
+        case 'inprogress':
+            return (
+                <div className="icon-dim-20">
+                    <div className="pulse-highlight" />
+                </div>
+            )
+        case 'unreachable':
+            return <Close className="icon-dim-20" />
+        case 'loading':
+            return <div className="dc__app-summary__icon icon-dim-20 mr-6 progressing progressing--node" />
+        case 'disconnect':
+            return <Disconnect className="icon-dim-20" />
+        case 'time_out':
+            return <TimeOut className="icon-dim-20" />
+        default:
+            return <Timer className="icon-dim-20 timer-icon" />
+    }
+}