Skip to content

Commit ddfb722

Browse files
ivicacclaude
ivicac
and
claude
committed
732 client - Add environment badges to deployment select in deployment dialog
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 8200467 commit ddfb722

3 files changed

Lines changed: 68 additions & 42 deletions

File tree

‎client/src/pages/automation/project-deployments/components/project-deployment-dialog/ProjectDeploymentDialogBasicStep.tsx‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Badge from '@/components/Badge/Badge';
12
import {Note} from '@/components/Note';
23
import ReadOnlyInput from '@/components/ReadOnlyInput/ReadOnlyInput';
34
import {Empty} from '@/components/ui/empty';
@@ -13,7 +14,7 @@ import ProjectDeploymentDialogBasicStepTagsSelect from '@/pages/automation/proje
1314
import {useWorkflowsEnabledStore} from '@/pages/automation/project-deployments/stores/useWorkflowsEnabledStore';
1415
import {useWorkspaceStore} from '@/pages/automation/stores/useWorkspaceStore';
1516
import EnvironmentBadge from '@/shared/components/EnvironmentBadge';
16-
import {toEnvironmentName} from '@/shared/constants';
17+
import {ENVIRONMENT_CONFIGS} from '@/shared/constants/environmentConfigs';
1718
import {ProjectDeployment} from '@/shared/middleware/automation/configuration';
1819
import {useEnvironmentsQuery} from '@/shared/middleware/graphql';
1920
import {useGetWorkspaceProjectsQuery} from '@/shared/queries/automation/projects.queries';
@@ -350,17 +351,40 @@ const ProjectDeploymentDialogBasicStep = ({
350351
</SelectTrigger>
351352

352353
<SelectContent className="w-full">
353-
{projectDeployments.map((deployment) => (
354-
<SelectItem
355-
key={
356-
deployment.id?.toString() ??
357-
`${deployment.name ?? 'deployment'}-${deployment.projectVersion}`
358-
}
359-
value={deployment.id?.toString() ?? ''}
360-
>
361-
{`${deployment.name ?? `Deployment ${deployment.id}`} - V${deployment.projectVersion} - ${deployment.environmentId != null ? toEnvironmentName(deployment.environmentId) : ''}`}
362-
</SelectItem>
363-
))}
354+
{projectDeployments.map((deployment) => {
355+
const environmentConfig =
356+
deployment.environmentId != null
357+
? ENVIRONMENT_CONFIGS[deployment.environmentId]
358+
: undefined;
359+
const EnvironmentIcon = environmentConfig?.icon;
360+
361+
return (
362+
<SelectItem
363+
key={
364+
deployment.id?.toString() ??
365+
`${deployment.name ?? 'deployment'}-${deployment.projectVersion}`
366+
}
367+
value={deployment.id?.toString() ?? ''}
368+
>
369+
<div className="flex items-center gap-2">
370+
<span>
371+
{`${deployment.name ?? `Deployment ${deployment.id}`} - V${deployment.projectVersion}`}
372+
</span>
373+
374+
{environmentConfig && EnvironmentIcon && (
375+
<Badge
376+
icon={
377+
<EnvironmentIcon className="size-3" />
378+
}
379+
label={environmentConfig.label}
380+
styleType={environmentConfig.styleType}
381+
weight="semibold"
382+
/>
383+
)}
384+
</div>
385+
</SelectItem>
386+
);
387+
})}
364388
</SelectContent>
365389
</Select>
366390
)}

‎client/src/shared/components/EnvironmentSelect.tsx‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,14 @@ import {
88
DropdownMenuTrigger,
99
} from '@/components/ui/dropdown-menu';
1010
import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
11-
import {DEVELOPMENT_ENVIRONMENT, PRODUCTION_ENVIRONMENT, STAGING_ENVIRONMENT} from '@/shared/constants';
11+
import {ENVIRONMENT_CONFIGS, type EnvironmentConfigI} from '@/shared/constants/environmentConfigs';
1212
import {useEnvironmentsQuery} from '@/shared/middleware/graphql';
1313
import {useApplicationInfoStore} from '@/shared/stores/useApplicationInfoStore';
1414
import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
15-
import {BoxIcon, CheckIcon, ChevronDownIcon, FlaskConicalIcon, type LucideIcon, WrenchIcon} from 'lucide-react';
15+
import {CheckIcon, ChevronDownIcon} from 'lucide-react';
1616
import {useMemo} from 'react';
1717
import {useShallow} from 'zustand/react/shallow';
1818

19-
interface EnvironmentConfigI {
20-
description: string;
21-
icon: LucideIcon;
22-
label: string;
23-
styleType: 'primary-outline' | 'secondary-outline' | 'warning-outline';
24-
}
25-
26-
const ENVIRONMENT_CONFIGS: Record<number, EnvironmentConfigI> = {
27-
[DEVELOPMENT_ENVIRONMENT]: {
28-
description: 'Features are unstable, experimental, and may change or break frequently.',
29-
icon: WrenchIcon,
30-
label: 'DEVELOPMENT',
31-
styleType: 'secondary-outline',
32-
},
33-
[PRODUCTION_ENVIRONMENT]: {
34-
description: 'Live environment used by real users. Optimized for performance with strict safeguards.',
35-
icon: BoxIcon,
36-
label: 'PRODUCTION',
37-
styleType: 'primary-outline',
38-
},
39-
[STAGING_ENVIRONMENT]: {
40-
description: 'Used for final testing, QA, and validation before release.',
41-
icon: FlaskConicalIcon,
42-
label: 'STAGING',
43-
styleType: 'warning-outline',
44-
},
45-
};
46-
4719
interface EnvironmentOptionI {
4820
config: EnvironmentConfigI;
4921
id: string;

‎client/src/shared/constants/environmentConfigs.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {DEVELOPMENT_ENVIRONMENT, PRODUCTION_ENVIRONMENT, STAGING_ENVIRONMENT} from '@/shared/constants';
2+
import {BoxIcon, FlaskConicalIcon, type LucideIcon, WrenchIcon} from 'lucide-react';
3+
4+
export interface EnvironmentConfigI {
5+
description: string;
6+
icon: LucideIcon;
7+
label: string;
8+
styleType: 'primary-outline' | 'secondary-outline' | 'warning-outline';
9+
}
10+
11+
export const ENVIRONMENT_CONFIGS: Record<number, EnvironmentConfigI> = {
12+
[DEVELOPMENT_ENVIRONMENT]: {
13+
description: 'Features are unstable, experimental, and may change or break frequently.',
14+
icon: WrenchIcon,
15+
label: 'DEVELOPMENT',
16+
styleType: 'secondary-outline',
17+
},
18+
[PRODUCTION_ENVIRONMENT]: {
19+
description: 'Live environment used by real users. Optimized for performance with strict safeguards.',
20+
icon: BoxIcon,
21+
label: 'PRODUCTION',
22+
styleType: 'primary-outline',
23+
},
24+
[STAGING_ENVIRONMENT]: {
25+
description: 'Used for final testing, QA, and validation before release.',
26+
icon: FlaskConicalIcon,
27+
label: 'STAGING',
28+
styleType: 'warning-outline',
29+
},
30+
};

0 commit comments

Comments
 (0)