Merge pull request #1012 from devtron-labs/feat/ai-actions-and-feedback

feat: ai actions and feedback

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.22.8-beta-4",
+    "version": "1.22.8-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -23,7 +23,7 @@ import {
     sanitizeUserApprovalList,
     stringComparatorBySortOrder,
 } from '@Shared/Helpers'
-import { EnvListMinDTO, PolicyBlockInfo, RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
+import { EnvListMinDTO, PolicyBlockInfo, RegistryType, RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
 import { GitProviderType, ROUTES } from './Constants'
 import { getUrlWithSearchParams, sortCallback } from './Helper'
 import {
@@ -683,3 +683,13 @@ export const getDetailedClusterList = async (
         )
         .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
 }
+
+export const getDockerRegistriesListMin = async (
+    signal: AbortSignal,
+): Promise<ResponseType<{ id: string; registryType: RegistryType; isDefault: boolean }[]>> => get(ROUTES.DOCKER_REGISTRY_MIN, { signal })
+
+export const getGitProvidersListMin = async (
+    signal: AbortSignal,
+): Promise<
+    ResponseType<{ id: number; name: string; url: string; authMode: 'SSH' | 'USERNAME_PASSWORD' | 'ANONYMOUS' }[]>
+> => get(ROUTES.GIT_PROVIDER_MIN, { signal })

src/Common/Common.service.ts

@@ -33,6 +33,7 @@ export const DEVTRON_GPT_LINK = 'https://chatgpt.com/g/g-6826efa4362c8191b23e7bf
 
 export const PATTERNS = {
     STRING: /^[a-zA-Z0-9_]+$/,
+    APP_NAME: '^[a-z][a-z0-9-]*[a-z0-9]$/*',
     DECIMAL_NUMBERS: /^-?\d*\.?\d*$/,
     POSITIVE_DECIMAL_NUMBERS: /^\d*\.?\d*$/,
     NATURAL_NUMBERS: /^[1-9]\d*$/,
@@ -227,6 +228,8 @@ export const ROUTES = {
     ENV: 'env',
     APP_METADATA: 'app-metadata',
     RESOURCE_CONFLICTS_LIST: 'app/:appId/cd-pipeline/:pipelineId/history/:wfrId/helm-ownership-conflicts',
+    GIT_PROVIDER_MIN: 'git/provider/autocomplete',
+    DOCKER_REGISTRY_MIN: 'docker/registry/autocomplete',
 } as const
 
 export enum KEY_VALUE {

src/Common/Constants.ts

@@ -22,9 +22,9 @@ import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { ComponentSizeType } from '@Shared/constants'
 import { InstallationType } from '@Shared/types'
 
-import { TippyCustomized, TippyTheme, Tooltip } from '../../../Common'
+import { TippyCustomized, TippyTheme } from '../../../Common'
 import { POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
-import { SidePanelTab, useMainContext, useTheme, useUserEmail } from '../../Providers'
+import { useMainContext, useTheme, useUserEmail } from '../../Providers'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { ImageWithFallback } from '../ImageWithFallback'
@@ -55,10 +55,10 @@ const PageHeader = ({
     const {
         setLoginCount,
         setShowGettingStartedCard,
-        setSidePanelConfig,
         sidePanelConfig,
         tempAppWindowConfig,
         featureAskDevtronExpert,
+        AskDevtronButton,
     } = useMainContext()
     const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
 
@@ -136,28 +136,12 @@ const PageHeader = ({
         </div>
     )
 
-    const onAskButtonClick = () => {
-        handleAnalyticsEvent({
-            category: 'AI',
-            action: 'HELP_ASK_DEVTRON_AI',
-        })
-        setSidePanelConfig((prev) => ({ ...prev, state: SidePanelTab.ASK_DEVTRON }))
-    }
-
     const renderLogoutHelpSection = () => (
         <>
-            {featureAskDevtronExpert && sidePanelConfig.state === 'closed' && !tempAppWindowConfig.open && (
-                <Tooltip content="Ask Devtron AI" placement="bottom" alwaysShowTippyOnHover delay={[500, null]}>
-                    <button
-                        className="enable-svg-animation--hover flex dc__no-background p-2 dc__outline-none-imp dc__no-border"
-                        onClick={onAskButtonClick}
-                        type="button"
-                        aria-label="Ask Devtron Expert"
-                    >
-                        <Icon name="ic-devtron-ai" color={null} size={28} />
-                    </button>
-                </Tooltip>
-            )}
+            {AskDevtronButton &&
+                featureAskDevtronExpert &&
+                sidePanelConfig.state === 'closed' &&
+                !tempAppWindowConfig.open && <AskDevtronButton />}
 
             <HelpButton
                 serverInfo={currentServerInfo.serverInfo}

src/Shared/Components/Header/PageHeader.tsx

@@ -14,5 +14,6 @@
  * limitations under the License.
  */
 
+export { getProjectOptions } from './service'
 export type { UseGetResourceKindOptionsReturnType, UseGetResourceKindsOptionsProps } from './types'
 export { default as useGetResourceKindsOptions } from './useGetResourceKindsOptions'

src/Shared/Hooks/useGetResourceKindsOptions/index.ts

@@ -216,6 +216,7 @@ export type MainContext = CommonMainContextProps &
               setTempAppWindowConfig: Dispatch<SetStateAction<TempAppWindowConfig>>
               AIRecommendations?: FunctionComponent
               featureAskDevtronExpert: EnvironmentDataValuesDTO['featureAskDevtronExpert']
+              AskDevtronButton?: FunctionComponent
           }
         | {
               isLicenseDashboard: true
@@ -236,6 +237,7 @@ export type MainContext = CommonMainContextProps &
               setTempAppWindowConfig: null
               AIRecommendations?: null
               featureAskDevtronExpert?: null
+              AskDevtronButton?: null
           }
     )
 

src/Shared/Providers/MainContextProvider/types.ts

@@ -561,3 +561,31 @@ export const validateCronExpression = (expression: string): ValidationResponseTy
         }
     }
 }
+
+export const validateAppName = (value: string): Required<ValidationResponseType> => {
+    const re = PATTERNS.APP_NAME
+    const regExp = new RegExp(re)
+    const test = regExp.test(value)
+
+    if (value.length === 0) {
+        return { isValid: false, message: 'Please provide app name' }
+    }
+
+    if (value.length < 3) {
+        return { isValid: false, message: MESSAGES.getMinCharMessage(3) }
+    }
+
+    if (value.length > 30) {
+        return { isValid: false, message: MESSAGES.getMaxCharMessage(30) }
+    }
+
+    if (!test) {
+        return {
+            isValid: false,
+            message:
+                "Min 3 chars; Start with alphabet; End with alphanumeric; Use only lowercase; Allowed:(-); Do not use 'spaces'",
+        }
+    }
+
+    return { isValid: true, message: '' }
+}