Merge pull request #562 from devtron-labs/feat/template-list

feat: add GenericInfoCard

Author: eshankvaish

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,73 @@
+import { cloneElement } from 'react'
+import { Link } from 'react-router-dom'
+import { GenericInfoCardProps } from './types'
+import { getClassNameForBorderVariant } from './utils'
+
+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-2">
+                    <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 ${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">
+                            <h3 className="fw-6 fs-13 lh-20 cn-9 m-0">{title}</h3>
+                            <h4 className="fw-4 fs-12 lh-16 cn-7 m-0">By {author}</h4>
+                        </div>
+
+                        <p className="fw-4 fs-12 lh-16 cn-7 m-0">{description}</p>
+                    </div>
+                </>
+            )}
+        </div>
+    )
+
+    if (!linkProps && !onClick) {
+        return renderContent()
+    }
+
+    if (linkProps) {
+        return <Link {...linkProps}>{renderContent()}</Link>
+    }
+
+    return (
+        <button type="button" onClick={onClick} className="dc__unset-button-styles">
+            {renderContent()}
+        </button>
+    )
+}
+
+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/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<HTMLButtonElement>
+          linkProps?: never
+      }
+)
+
+export enum GenericInfoCardBorderVariant {
+    ROUNDED = 'rounded',
+    NONE = 'none',
+}
+
+export type GenericInfoCardProps = { borderVariant: GenericInfoCardBorderVariant } & (
+    | ({
+          isLoading: true
+      } & Partial<BaseGenericInfoCardProps>)
+    | ({
+          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 'br-4 dc__border-n1'
+}

src/Shared/Components/index.ts

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