Merge pull request #2458 from devtron-labs/feature/application-template

feat: add support for application templates in devtron apps

Author: eshankvaish

.env

@@ -64,6 +64,7 @@ FEATURE_DEFAULT_MERGE_STRATEGY=
 FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
+FEATURE_APPLICATION_TEMPLATES_ENABLE=true
 FEATURE_CODE_MIRROR_ENABLE=false
 FEATURE_EXPERIMENTAL_THEMING_ENABLE=true
 FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false

.eslintignore

@@ -8,8 +8,6 @@ vite.config.mts
 # The following files have eslint errors/warnings
 src/App.tsx
 src/Pages/GlobalConfigurations/Authorization/APITokens/__tests__/ApiTokens.test.tsx
-src/components/AppSelector/AppSelector.tsx
-src/components/AppSelector/AppSelectorUtil.tsx
 src/components/AppSelector/ChartSelector.tsx
 src/components/ApplicationGroup/AppGroup.service.ts
 src/components/ApplicationGroup/AppGroup.types.ts

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.9.7",
+        "@devtron-labs/devtron-fe-common-lib": "1.9.8",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/App/CreateAppModal/AppToCloneSelector.tsx

@@ -0,0 +1,61 @@
+import {
+    AppSelectorNoOptionsMessage as appSelectorNoOptionsMessage,
+    ComponentSizeType,
+    InfoBlock,
+    SelectPicker,
+    SelectPickerProps,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { appListOptions } from '@Components/AppSelector/AppSelectorUtil'
+import { useState } from 'react'
+import { AppToCloneSelectorProps } from './types'
+
+const AppToCloneSelector = ({ isJobView, error, handleCloneIdChange }: AppToCloneSelectorProps) => {
+    const [inputValue, setInputValue] = useState('')
+    const [areOptionsLoading, setAreOptionsLoading] = useState(false)
+    const [options, setOptions] = useState([])
+
+    const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {
+        setInputValue(val)
+        setAreOptionsLoading(true)
+        const fetchedOptions = await appListOptions(val, isJobView)
+        setAreOptionsLoading(false)
+        setOptions(fetchedOptions)
+    }
+
+    const onChange = (selectedClonedApp) => {
+        handleCloneIdChange(selectedClonedApp.value)
+    }
+
+    const noOptionsMessage: SelectPickerProps['noOptionsMessage'] = () =>
+        appSelectorNoOptionsMessage({
+            inputValue,
+        })
+
+    return (
+        <>
+            <SelectPicker
+                label={`Select an ${isJobView ? 'job' : 'app'} to clone`}
+                inputId={`${isJobView ? 'job' : 'app'}-name-for-clone`}
+                options={options}
+                onChange={onChange}
+                placeholder={`Select ${isJobView ? 'job' : 'app'}`}
+                inputValue={inputValue}
+                onInputChange={onInputChange}
+                isLoading={areOptionsLoading}
+                noOptionsMessage={noOptionsMessage}
+                error={error}
+                size={ComponentSizeType.large}
+            />
+            <InfoBlock
+                heading="Important:"
+                description={
+                    isJobView
+                        ? 'Do not forget to modify git repositories and corresponding branches to be used for each Job Pipeline if required.'
+                        : 'Do not forget to modify git repositories, corresponding branches and container registries to be used for each CI Pipeline if required.'
+                }
+            />
+        </>
+    )
+}
+
+export default AppToCloneSelector

src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx

@@ -0,0 +1,142 @@
+import { CustomInput, TagsContainer, Textarea } from '@devtron-labs/devtron-fe-common-lib'
+import { ReactComponent as ICDevtronApp } from '@Icons/ic-devtron-app.svg'
+import { ReactComponent as ICCaretLeftSmall } from '@Icons/ic-caret-left-small.svg'
+import { ChangeEvent } from 'react'
+import { importComponentFromFELibrary } from '@Components/common'
+import { APP_TYPE } from '@Config/constants'
+import ProjectSelector from './ProjectSelector'
+import {
+    ApplicationInfoFormProps,
+    CreateAppFormStateActionType,
+    CreateAppFormStateType,
+    CreationMethodType,
+    HandleFormStateChangeParamsType,
+    ProjectSelectorProps,
+} from './types'
+import AppToCloneSelector from './AppToCloneSelector'
+
+const MandatoryTagsContainer = importComponentFromFELibrary('MandatoryTagsContainer', null, 'function')
+
+const ApplicationInfoForm = ({
+    formState,
+    handleFormStateChange,
+    isJobView,
+    formErrorState,
+    handleTagErrorChange,
+    selectedCreationMethod,
+    isTagsAccordionExpanded,
+    toggleIsTagsAccordionExpanded,
+}: ApplicationInfoFormProps) => {
+    const handleInputChange =
+        (
+            action: Extract<
+                HandleFormStateChangeParamsType['action'],
+                CreateAppFormStateActionType.updateName | CreateAppFormStateActionType.updateDescription
+            >,
+        ) =>
+        (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            handleFormStateChange({ action, value: event.target.value })
+        }
+
+    const handleProjectIdChange: ProjectSelectorProps['handleProjectIdChange'] = (projectId) => {
+        handleFormStateChange({
+            action: CreateAppFormStateActionType.updateProjectId,
+            value: projectId,
+        })
+    }
+
+    const handleTagsUpdate = (tags: CreateAppFormStateType['tags']) => {
+        handleFormStateChange({
+            action: CreateAppFormStateActionType.updateTags,
+            value: tags,
+        })
+    }
+
+    const handleCloneIdChange = (cloneId) => {
+        handleFormStateChange({
+            action: CreateAppFormStateActionType.updateCloneAppId,
+            value: cloneId,
+        })
+    }
+
+    return (
+        // key is required for ensuring autoFocus on name on creation method change
+        <div className="flexbox-col dc__gap-16 p-20 br-8 border__secondary bg__primary" key={selectedCreationMethod}>
+            <ICDevtronApp className="icon-dim-48 dc__no-shrink" />
+            <div className="flexbox dc__gap-8">
+                <ProjectSelector
+                    selectedProjectId={formState.projectId}
+                    handleProjectIdChange={handleProjectIdChange}
+                    error={formErrorState.projectId}
+                />
+                <span className="pt-26 fs-20 lh-36 cn-7 dc__no-shrink">/</span>
+                <CustomInput
+                    label={isJobView ? 'Job name' : 'Application name'}
+                    required
+                    name="name"
+                    onChange={handleInputChange(CreateAppFormStateActionType.updateName)}
+                    value={formState.name}
+                    placeholder="Enter name"
+                    error={formErrorState.name}
+                    helperText={
+                        !isJobView && 'Apps are NOT env specific and can be used to deploy to multiple environments.'
+                    }
+                    fullWidth
+                    autoFocus
+                />
+            </div>
+            <Textarea
+                label="Description"
+                name="description"
+                value={formState.description}
+                onChange={handleInputChange(CreateAppFormStateActionType.updateDescription)}
+                placeholder={isJobView ? 'Describe this job' : 'Write a description for this application'}
+                fullWidth
+                error={formErrorState.description}
+            />
+            <div className="flexbox-col dc__gap-16">
+                <button
+                    className="dc__transparent p-0 flex left dc__gap-8 dc__w-fit-content"
+                    type="button"
+                    onClick={toggleIsTagsAccordionExpanded}
+                >
+                    <ICCaretLeftSmall
+                        className={`scn-7 dc__no-shrink dc__transition--transform ${isTagsAccordionExpanded ? 'dc__flip-270' : 'dc__flip-180'}`}
+                    />
+                    <span className="fs-13 fw-6 lh-20 cn-9">Add tags to {isJobView ? 'job' : 'application'}</span>
+                </button>
+                <div className={!isTagsAccordionExpanded ? 'dc__hide-section' : ''}>
+                    {MandatoryTagsContainer ? (
+                        <MandatoryTagsContainer
+                            isCreateApp
+                            appType={isJobView ? APP_TYPE.JOB : APP_TYPE.DEVTRON_APPS}
+                            projectId={formState.projectId}
+                            tags={formState.tags}
+                            setTags={handleTagsUpdate}
+                            tagsError={formErrorState.tags}
+                            setTagErrors={handleTagErrorChange}
+                        />
+                    ) : (
+                        <TagsContainer
+                            appType={isJobView ? APP_TYPE.JOB : APP_TYPE.DEVTRON_APPS}
+                            isCreateApp
+                            rows={formState.tags}
+                            setRows={handleTagsUpdate}
+                            tagsError={formErrorState.tags}
+                            setTagErrors={handleTagErrorChange}
+                        />
+                    )}
+                </div>
+            </div>
+            {selectedCreationMethod === CreationMethodType.clone && (
+                <AppToCloneSelector
+                    error={formErrorState.cloneAppId}
+                    isJobView={isJobView}
+                    handleCloneIdChange={handleCloneIdChange}
+                />
+            )}
+        </div>
+    )
+}
+
+export default ApplicationInfoForm