Skip to content

feat: Global cluster & env categories #2714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

feat: Global cluster & env categories #2714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1b3216
initial commit
vivek-devtron May 16, 2025
eea72b4
added dropdown on cluster
vivek-devtron May 16, 2025
6427d31
env payload fix
vivek-devtron May 16, 2025
09c6672
chore: css fixes
shivani170 May 20, 2025
a72eaa5
Merge branch 'develop' into feat/cluster-env-categories
shivani170 May 22, 2025
e8fd67e
chore: cluster & environment code refactoring
shivani170 May 22, 2025
cf50800
fix: Payload update for category in environment drawer
shivani170 May 22, 2025
b609290
fix: CSS fixes
shivani170 May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 71 additions & 58 deletions ...figurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
import { ReactComponent as ICAdd } from '@Icons/ic-add.svg'
import { ReactComponent as Close } from '@Icons/ic-close.svg'
import { ReactComponent as Trash } from '@Icons/ic-delete-interactive.svg'
import { AssignCategorySelect } from '@Components/cluster/AssignCategorySelect'
import { deleteEnvironment, saveEnvironment, updateEnvironment } from '@Components/cluster/cluster.service'
import { getNamespaceFromLocalStorage } from '@Components/cluster/cluster.util'
import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Components/cluster/constants'
Expand Down Expand Up @@ -70,6 +71,7 @@ export const ClusterEnvironmentDrawer = ({
hideClusterDrawer,
isVirtual,
clusterName,
category,
}: ClusterEnvironmentDrawerProps) => {
// STATES
// Manages the loading state for create and update actions
Expand Down Expand Up @@ -152,6 +154,7 @@ export const ClusterEnvironmentDrawer = ({
environmentName: environmentName ?? '',
namespace: !id ? getNamespaceFromLocalStorage(parsedNamespace) : parsedNamespace,
isProduction: !!isProduction,
category,
description: description ?? '',
},
validations: clusterEnvironmentDrawerFormValidationSchema({ isNamespaceMandatory: !isVirtual }),
Expand Down Expand Up @@ -273,6 +276,10 @@ export const ClusterEnvironmentDrawer = ({
/>
)

const handleSelectedCategory = (_selectedCategory) => {
register('category').onChange({ target: { name: 'category', value: _selectedCategory } })
}

const renderContent = () => {
if (!clusterId) {
return (
Expand All @@ -291,69 +298,75 @@ export const ClusterEnvironmentDrawer = ({
onSubmit={handleSubmit(namespaceLabels.labels ? withLabelEditValidation : onValidation())}
noValidate
>
<div className="dc__overflow-auto p-20 flex-grow-1">
<div className="mb-16">
<CustomInput
disabled={!!environmentName}
placeholder={id ? 'sample-env-name' : 'Eg. production'}
value={data.environmentName}
error={errors.environmentName}
{...register('environmentName')}
label="Environment Name"
autoFocus={!id}
shouldTrim={false}
required
/>
</div>
<div className="mb-16">
<CustomInput
disabled={!!namespace}
placeholder={id ? 'sample-namespace' : 'Eg. prod'}
value={data.namespace}
error={errors.namespace}
{...register('namespace')}
label="Namespace"
shouldTrim={false}
required={!isVirtual}
/>
</div>
<div className="flexbox-col dc__overflow-auto p-20 flex-grow-1 dc__gap-16">
<CustomInput
disabled={!!environmentName}
placeholder={id ? 'sample-env-name' : 'Eg. production'}
value={data.environmentName}
error={errors.environmentName}
{...register('environmentName')}
label="Environment Name"
autoFocus={!id}
shouldTrim={false}
required
/>

<CustomInput
disabled={!!namespace}
placeholder={id ? 'sample-namespace' : 'Eg. prod'}
value={data.namespace}
error={errors.namespace}
{...register('namespace')}
label="Namespace"
shouldTrim={false}
required={!isVirtual}
/>

<CustomInput
placeholder="Add a description for this environment"
value={data.description}
error={errors.description}
{...register('description')}
label="Description (Maximum 40 characters allowed)"
autoFocus={!!id}
shouldTrim={false}
/>
{!isVirtual && (
<div className="mb-16 flex left">
<label htmlFor="env-production-checkbox" className="pr-16 flex cursor">
<input
id="env-production-checkbox"
data-testid="production"
type="radio"
checked={data.isProduction}
value="true"
{...register('isProduction', { sanitizeFn: (value) => value === 'true' })}
/>
<span className="ml-10 fw-4 mt-4 fs-13">Production</span>
</label>
<label htmlFor="env-non-production-checkbox" className="flex cursor">
<input
id="env-non-production-checkbox"
data-testid="nonProduction"
type="radio"
checked={!data.isProduction}
value="false"
{...register('isProduction', { sanitizeFn: (value) => value === 'true' })}
/>
<span className="ml-10 fw-4 mt-4 fs-13">Non - Production</span>
</label>
<div className="flex left dc__gap-24 fs-13">
<div className="dc__required-field cn-7">Type of cluster</div>
<div className="flex left dc__gap-16">
<label htmlFor="env-production-checkbox mb-0" className="flex cursor">
<input
id="env-production-checkbox"
data-testid="production"
type="radio"
checked={data.isProduction}
value="true"
{...register('isProduction', { sanitizeFn: (value) => value === 'true' })}
/>
<span className="ml-10 fw-4 mt-4">Production</span>
</label>
<label htmlFor="env-non-production-checkbox mb-0" className="flex cursor">
<input
id="env-non-production-checkbox"
data-testid="nonProduction"
type="radio"
checked={!data.isProduction}
value="false"
{...register('isProduction', { sanitizeFn: (value) => value === 'true' })}
/>
<span className="ml-10 fw-4 mt-4">Non - Production</span>
</label>
</div>
</div>
)}
<div className="mb-16">
<CustomInput
placeholder="Add a description for this environment"
value={data.description}
error={errors.description}
{...register('description')}
label="Description (Maximum 40 characters allowed)"
autoFocus={!!id}
shouldTrim={false}
<div className="w-250">
<AssignCategorySelect
selectedCategory={data.category}
setSelectedCategory={handleSelectedCategory}
/>
</div>

{EnvironmentLabels && !isVirtual && (
<div className="dc__border-top-n1 pt-16">
<EnvironmentLabels
Expand Down
3 changes: 2 additions & 1 deletion src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@
* limitations under the License.
*/

import { DeleteConfirmationModalProps, TagType } from '@devtron-labs/devtron-fe-common-lib'
import { DeleteConfirmationModalProps, OptionType, TagType } from '@devtron-labs/devtron-fe-common-lib'

export interface ClusterEnvironmentDrawerFormProps {
environmentName: string
namespace: string
isProduction: boolean
description: string
category: OptionType<number, string>
}

export interface ClusterEnvironmentDrawerProps extends ClusterEnvironmentDrawerFormProps {
Expand Down
1 change: 1 addition & 0 deletions src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const getClusterEnvironmentUpdatePayload = ({
default: data.isProduction,
description: data.description || '',
updateLabels: !!namespaceLabels,
category: data.category?.value,
...(namespaceLabels
? {
namespaceResourceVersion: resourceVersion,
Expand Down
Loading
Loading