Merge branch 'feature/application-template' of github.com:devtron-labs/devtron-fe-common-lib into feat/graph-visualizer

Author: RohitRaj011

src/Common/Constants.ts

@@ -51,6 +51,8 @@ export const PATTERNS = {
     ALPHANUMERIC_WITH_SPECIAL_CHAR_AND_SLASH: /^[A-Za-z0-9._/-]+$/, // allow alphanumeric,(.) ,(-),(_),(/)
 }
 
+const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
+
 export const URLS = {
     LOGIN_SSO: '/login/sso',
     PERMISSION_GROUPS: '/global-config/auth/groups',
@@ -81,6 +83,10 @@ export const URLS = {
     CONFIG_DRIFT: 'config-drift',
     RESOURCE_BROWSER: '/resource-browser',
     COMPARE_CLUSTERS: '/compare-clusters',
+    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
+    GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`,
 }
 
 export const ROUTES = {

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

@@ -0,0 +1,91 @@
+import { cloneElement } from 'react'
+import { Link } from 'react-router-dom'
+import { ReactComponent as ICCaretSmall } from '@Icons/ic-caret-left-small.svg'
+import { Tooltip } from '@Common/Tooltip'
+import { GenericInfoCardProps } from './types'
+import { getClassNameForBorderVariant } from './utils'
+import './styles.scss'
+
+const GenericInfoCard = ({
+    title,
+    description,
+    author,
+    isLoading,
+    borderVariant,
+    Icon,
+    onClick,
+    linkProps,
+}: GenericInfoCardProps) => {
+    const IconElement = isLoading ? <div className="shimmer" /> : Icon
+
+    const renderShimmerContent = () => (
+        <>
+            <div className="icon-dim-40 dc__no-shrink br-6">
+                <div className="shimmer shimmer__fill-dimensions" />
+            </div>
+
+            <div className="flexbox-col dc__gap-8 flex-grow-1">
+                <div className="flexbox-col dc__gap-4">
+                    <span className={isLoading ? 'shimmer w-300' : ''} />
+                    <span className={isLoading ? 'shimmer w-150 pt-2' : ''} />
+                </div>
+
+                <span className={isLoading ? 'shimmer w-600' : ''} />
+            </div>
+        </>
+    )
+
+    const renderContent = () => (
+        <div
+            className={`flexbox dc__gap-16 p-12 bg__primary generic-info-card br-8 ${getClassNameForBorderVariant(borderVariant)}`}
+        >
+            {isLoading ? (
+                renderShimmerContent()
+            ) : (
+                <>
+                    {cloneElement(IconElement, {
+                        className: `${IconElement.props?.className ?? ''} icon-dim-40 dc__no-shrink br-6 dc__fill-available-space`,
+                    })}
+
+                    <div className="flexbox-col dc__gap-8 flex-grow-1">
+                        <div className="flexbox-col">
+                            <div className="flexbox dc__align-items-center">
+                                <Tooltip content={title}>
+                                    <h3 className="fw-6 fs-13 lh-20 cn-9 m-0 generic-info-card__title dc__truncate dc__mxw-600">
+                                        {title}
+                                    </h3>
+                                </Tooltip>
+
+                                <div className="generic-info-card__arrow dc__no-shrink flex">
+                                    <ICCaretSmall className="icon-dim-16 dc__flip-180 scb-5" />
+                                </div>
+                            </div>
+
+                            <Tooltip content={author}>
+                                <h4 className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate w-300">By {author}</h4>
+                            </Tooltip>
+                        </div>
+
+                        <p className="fw-4 fs-12 lh-16 cn-7 m-0 dc__truncate--clamp-3">{description}</p>
+                    </div>
+                </>
+            )}
+        </div>
+    )
+
+    if (!linkProps && !onClick) {
+        return renderContent()
+    }
+
+    if (linkProps) {
+        return <Link {...linkProps}>{renderContent()}</Link>
+    }
+
+    return (
+        <div role="button" tabIndex={0} onClick={onClick} className="dc__unset-button-styles dc__align-unset">
+            {renderContent()}
+        </div>
+    )
+}
+
+export default GenericInfoCard

src/Shared/Components/GenericInfoCard/index.ts

@@ -0,0 +1,2 @@
+export { type GenericInfoCardProps, GenericInfoCardBorderVariant } from './types'
+export { default as GenericInfoCard } from './GenericInfoCard.component'

src/Shared/Components/GenericInfoCard/styles.scss

@@ -0,0 +1,29 @@
+.generic-info-card {
+    transition: box-shadow 0.2s ease-out;
+    
+    &__title {
+        transition: color 0.2s ease-out;
+    }
+    
+    &__arrow {
+        transition: all 0.2s ease-out;
+        transform: translateX(-20%);
+        visibility: hidden;
+    }
+    
+    &:hover {
+        position: relative;
+        z-index: 1;
+        box-shadow: var(--shadow-card-secondary);
+        
+        // NOTE: &__title was not working here
+        .generic-info-card__title {
+            color: var(--B500);
+        }
+
+        .generic-info-card__arrow {
+            transform: translateX(30%);
+            visibility: visible;
+        }
+    }
+}

src/Shared/Components/GenericInfoCard/types.ts

@@ -0,0 +1,32 @@
+import { MouseEventHandler, ReactElement } from 'react'
+import { LinkProps } from 'react-router-dom'
+
+type BaseGenericInfoCardProps = {
+    title: string
+    description: string
+    author: string
+    Icon: ReactElement
+} & (
+    | {
+          onClick?: never
+          linkProps?: Pick<LinkProps, 'to' | 'target' | 'rel'>
+      }
+    | {
+          onClick?: MouseEventHandler<HTMLDivElement>
+          linkProps?: never
+      }
+)
+
+export enum GenericInfoCardBorderVariant {
+    ROUNDED = 'rounded',
+    NONE = 'none',
+}
+
+export type GenericInfoCardProps = { borderVariant: GenericInfoCardBorderVariant } & (
+    | ({
+          isLoading: true
+      } & Partial<Record<keyof BaseGenericInfoCardProps, never>>)
+    | ({
+          isLoading?: boolean
+      } & BaseGenericInfoCardProps)
+)

src/Shared/Components/GenericInfoCard/utils.ts

@@ -0,0 +1,9 @@
+import { GenericInfoCardBorderVariant } from './types'
+
+export const getClassNameForBorderVariant = (variant: GenericInfoCardBorderVariant) => {
+    if (variant === GenericInfoCardBorderVariant.NONE) {
+        return ''
+    }
+
+    return 'dc__border-n1'
+}

src/Shared/Components/index.ts

@@ -75,3 +75,4 @@ export * from './TargetPlatforms'
 export * from './UnsavedChanges'
 export * from './UnsavedChangesDialog'
 export * from './GraphVisualizer'
+export * from './GenericInfoCard'