Merge pull request #568 from devtron-labs/feat/template-detail

feat: template detail

Author: eshankvaish

src/Common/Constants.ts

@@ -83,6 +83,8 @@ export const URLS = {
     CONFIG_DRIFT: 'config-drift',
     RESOURCE_BROWSER: '/resource-browser',
     COMPARE_CLUSTERS: '/compare-clusters',
+    APP_CONFIG: 'edit',
+    GLOBAL_CONFIG: '/global-config',
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP,
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_CREATE: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/create`,
     // NOTE: using appId since we are re-using AppConfig component

src/Common/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
 import './styles.scss'
+import { SUB_PIXEL_ERROR } from './constants'
 
 const Tooltip = ({
     shortcutKeyCombo,
@@ -33,7 +34,9 @@ const Tooltip = ({
 
     const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
         const { currentTarget: node } = event
-        const isTextOverflowing = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight
+        const isTextOverflowing =
+            node.scrollWidth > node.clientWidth + SUB_PIXEL_ERROR ||
+            node.scrollHeight > node.clientHeight + SUB_PIXEL_ERROR
         if (isTextOverflowing && !isTextTruncated) {
             setIsTextTruncated(true)
         } else if (!isTextOverflowing && isTextTruncated) {

src/Common/Tooltip/constants.tsx

@@ -17,3 +17,5 @@
 export const TOOLTIP_CONTENTS = {
     INVALID_INPUT: 'Valid input is required for all mandatory fields.',
 }
+
+export const SUB_PIXEL_ERROR = 1

src/Pages/Applications/DevtronApps/Details/AppConfigurations/types.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ResourceKindType } from '@Shared/types'
 import { ReactNode, SyntheticEvent } from 'react'
 
 export enum ConfigHeaderTabType {
@@ -54,3 +55,35 @@ export interface OverrideStrategyTippyContentProps {
      */
     children?: ReactNode
 }
+
+export interface AppConfigProps {
+    appName: string
+    resourceKind: Extract<ResourceKindType, ResourceKindType.devtronApplication | ResourceKindType.job>
+    filteredEnvIds?: string
+    isTemplateView?: boolean
+}
+
+export enum GetTemplateAPIRouteType {
+    GIT_MATERIAL = 'git-material',
+    CI_BUILD_CONFIG = 'ci-build-config',
+    STAGE_STATUS = 'stage-status',
+    CD_DEPLOY_CONFIG = 'cd-deploy-config',
+    CD_ENV_LIST = 'cd-env-list',
+    CONFIG_DEPLOYMENT_TEMPLATE = 'config/deployment-template',
+    CONFIG_CM = 'config/config-map',
+    CONFIG_CS = 'config/secret',
+    WORKFLOW_LIST = 'workflow/list',
+    OVERVIEW = 'overview',
+    README = 'readme',
+    CD_PIPELINE_LIST = 'cd-pipeline/list',
+    EXTERNAL_CI_LIST = 'external-ci/list',
+    EXTERNAL_CI = 'external-ci',
+    CI_PIPELINE = 'ci-pipeline',
+    CD_PIPELINE = 'cd-pipeline',
+    CONFIG_STRATEGY = 'config/strategy',
+}
+
+export interface GetTemplateAPIRouteProps {
+    type: GetTemplateAPIRouteType
+    queryParams: { id: string | number } & Record<string, any>
+}

src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx

@@ -66,7 +66,9 @@ const GenericInfoCard = ({
                             </Tooltip>
                         </div>
 
-                        <p className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate--clamp-3">{description}</p>
+                        {description && (
+                            <p className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate--clamp-3">{description}</p>
+                        )}
                     </div>
                 </>
             )}

src/Shared/Components/GraphVisualizer/styles.scss

@@ -1,8 +1,15 @@
 // REACT FLOW
 .graph-visualizer {
     .react-flow {
+        --xy-attribution-background-color: var(--bg-tertiary);
         --xy-edge-stroke-default: var(--N200);
         --xy-background-color-default: var(--bg-secondary);
+
+        &__attribution {
+            a {
+                color: var(--N700);
+            }
+        }
     }
 }
 

src/Shared/Components/ReactSelect/constants.ts renamed to src/Shared/Components/ReactSelect/constants.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-export const CommonGroupedDropdownStyles = {
+import { components, DropdownIndicatorProps, StylesConfig } from 'react-select'
+import { ReactComponent as DropDownIcon } from '@Icons/ic-chevron-down.svg'
+
+export const CommonGroupedDropdownStyles: StylesConfig = {
     container: (base, state) => ({
         ...base,
         ...(state.isDisabled && {
@@ -109,3 +112,85 @@ export const CommonGroupedDropdownStyles = {
         backgroundColor: 'var(--bg-primary)',
     }),
 }
+
+export const APP_SELECTOR_STYLES: StylesConfig = {
+    control: (base, state) => ({
+        ...base,
+        border: state.menuIsOpen ? '1px solid var(--B500)' : 'unset',
+        boxShadow: 'none',
+        color: 'var(--N900)',
+        minHeight: '32px',
+        minWidth: state.menuIsOpen ? '300px' : 'unset',
+        justifyContent: state.menuIsOpen ? 'space-between' : 'flex-start',
+        cursor: 'pointer',
+        backgroundColor: 'var(--bg-primary)',
+    }),
+    valueContainer: (base, state) => ({
+        ...base,
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        flexBasis: '0px',
+        justifyContent: 'flex-end',
+        padding: state.selectProps.menuIsOpen ? '0 0 0 4px' : '0',
+        color: state.selectProps.menuIsOpen ? 'var(--N500)' : 'var(--N900)',
+        height: '30px',
+    }),
+    singleValue: (base, state) => ({
+        ...base,
+        color: state.selectProps.menuIsOpen ? 'var(--N500)' : 'var(--N900)',
+    }),
+    menu: (base) => ({
+        ...base,
+        backgroundColor: 'var(--bg-primary)',
+        minWidth: '300px',
+        fontSize: '14px',
+        fontWeight: 'normal',
+    }),
+    menuList: (base) => ({
+        ...base,
+        padding: '8px',
+    }),
+    option: (base, state) => ({
+        ...base,
+        borderRadius: '4px',
+        color: state.isSelected ? 'var(--B500)' : 'var(--N900)',
+        // eslint-disable-next-line no-nested-ternary
+        backgroundColor: state.isSelected ? 'var(--B100)' : state.isFocused ? 'var(--N100)' : 'var(--bg-primary)',
+        fontWeight: state.isSelected ? 600 : 'normal',
+        marginRight: '8px',
+    }),
+    input: (base) => ({
+        ...base,
+        margin: '0',
+        flex: 'unset',
+        color: 'var(--N900)',
+    }),
+    dropdownIndicator: (base) => ({
+        ...base,
+        padding: '0 4px 0 4px',
+    }),
+}
+
+export const AppSelectorDropdownIndicator = (props: DropdownIndicatorProps) => {
+    const { selectProps } = props
+
+    return (
+        <components.DropdownIndicator {...props}>
+            <DropDownIcon
+                className="rotate"
+                style={{
+                    ['--rotateBy' as any]: selectProps.menuIsOpen ? '180deg' : '0deg',
+                    height: '24px',
+                    width: '24px',
+                }}
+            />
+        </components.DropdownIndicator>
+    )
+}
+
+export const AppSelectorNoOptionsMessage = (inputObj: { inputValue: string }): string => {
+    if (inputObj && (inputObj.inputValue === '' || inputObj.inputValue.length < 3)) {
+        return 'Type 3 chars to see matching results'
+    }
+    return 'No matching results'
+}

src/Shared/Components/WorkflowOptionsModal/WorkflowOptionsModal.tsx

@@ -46,6 +46,8 @@ const WorkflowOptionsModal = ({
     resetChangeCIPayload,
     linkedCDSourceVariant,
     isAppGroup = false,
+    getTemplateAPIRoute,
+    isTemplateView,
 }: Readonly<WorkflowOptionsModalProps>) => {
     const [currentCIPipelineType, setCurrentCIPipelineType] = useState<CIPipelineNodeType | WorkflowNodeType.WEBHOOK>(
         null,
@@ -112,7 +114,10 @@ const WorkflowOptionsModal = ({
             if (containsCDPipeline) {
                 // Only need to disable it in case of error
                 setLoadingWebhook(true)
-                saveCDPipeline(getSwitchToWebhookPayload(changeCIPayload))
+                saveCDPipeline(getSwitchToWebhookPayload(changeCIPayload), {
+                    getTemplateAPIRoute,
+                    isTemplateView,
+                })
                     .then((response) => {
                         if (response.result) {
                             ToastManager.showToast({

src/Shared/Components/WorkflowOptionsModal/types.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { AppConfigProps, GetTemplateAPIRouteProps } from '@Pages/index'
 import { ChangeCIPayloadType, CIPipelineNodeType, WorkflowType } from '@Shared/types'
 
 interface LinkedCDSourceVariant {
@@ -31,7 +32,7 @@ export interface SourceTypeCardProps extends LinkedCDSourceVariant {
     isDisabled?: boolean
 }
 
-export interface WorkflowOptionsModalProps {
+export interface WorkflowOptionsModalProps extends Required<Pick<AppConfigProps, 'isTemplateView'>> {
     handleCloseWorkflowOptionsModal: () => void
     addCIPipeline: (type: CIPipelineNodeType, workflowId?: number | string) => void
     addWebhookCD: (workflowId?: number | string) => void
@@ -44,4 +45,5 @@ export interface WorkflowOptionsModalProps {
     getWorkflows?: () => void
     linkedCDSourceVariant?: LinkedCDSourceVariant
     isAppGroup?: boolean
+    getTemplateAPIRoute: (props: GetTemplateAPIRouteProps) => string
 }

src/Shared/Services/common.service.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { AppConfigProps, GetTemplateAPIRouteType } from '@Pages/index'
+import { WorkflowOptionsModalProps } from '@Shared/Components/WorkflowOptionsModal/types'
 import { getUrlWithSearchParams, post, ROUTES } from '../../Common'
 import { GetPolicyApiUrlProps, GetResourceApiUrlProps } from './types'
 
@@ -23,4 +25,21 @@ export const getResourceApiUrl = <T>({ baseUrl, kind, version, suffix, queryPara
 export const getPolicyApiUrl = <T>({ kind, version, queryParams, suffix }: GetPolicyApiUrlProps<T>) =>
     getUrlWithSearchParams(`global/policy/${kind}/${version}${suffix ? `/${suffix}` : ''}`, queryParams)
 
-export const saveCDPipeline = (request) => post(ROUTES.CD_CONFIG, request)
+export const saveCDPipeline = (
+    request,
+    {
+        getTemplateAPIRoute,
+        isTemplateView,
+    }: Pick<WorkflowOptionsModalProps, 'getTemplateAPIRoute'> & Required<Pick<AppConfigProps, 'isTemplateView'>>,
+) => {
+    const url = isTemplateView
+        ? getTemplateAPIRoute({
+              type: GetTemplateAPIRouteType.CD_PIPELINE,
+              queryParams: {
+                  id: request.appId,
+              },
+          })
+        : ROUTES.CD_CONFIG
+
+    return post(url, request)
+}