Skip to content

make the deployment card as collapsible #3320

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 6 commits into
base: master
Choose a base branch
from
Open

make the deployment card as collapsible #3320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5f125e0
make the deployment card as collapsible
Yasir761 Oct 20, 2025
c4ae3df
Make deployment card clickable; run format & typecheck
Yasir761 Oct 21, 2025
9366a86
make the all changes as suggested
Yasir761 Oct 22, 2025
550de63
make dropdown inactive
Yasir761 Oct 23, 2025
7bb69ee
Fix: prevent dropdown click from opening card
Yasir761 Nov 1, 2025
38d77c1
Merge branch 'master' into clickable-cards
Yasir761 Nov 1, 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
73 changes: 45 additions & 28 deletions ...tion/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {useProjectDeploymentsEnabledStore} from '@/pages/automation/project-depl
import {useAnalytics} from '@/shared/hooks/useAnalytics';
import {ProjectDeployment, Tag} from '@/shared/middleware/automation/configuration';
import {useUpdateProjectDeploymentTagsMutation} from '@/shared/mutations/automation/projectDeploymentTags.mutations';

import {
useDeleteProjectDeploymentMutation,
useEnableProjectDeploymentMutation,
Expand All @@ -17,7 +18,7 @@ import {ProjectDeploymentTagKeys} from '@/shared/queries/automation/projectDeplo
import {ProjectDeploymentKeys} from '@/shared/queries/automation/projectDeployments.queries';
import {useQueryClient} from '@tanstack/react-query';
import {ChevronDownIcon} from 'lucide-react';
import {useState} from 'react';
import {useCallback, useRef, useState} from 'react';

import TagList from '../../../../../shared/components/TagList';
import ProjectDeploymentDialog from '../project-deployment-dialog/ProjectDeploymentDialog';
Expand All @@ -37,47 +38,32 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
);

const {captureProjectDeploymentEnabled} = useAnalytics();

const queryClient = useQueryClient();

const deleteProjectDeploymentMutation = useDeleteProjectDeploymentMutation({
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ProjectDeploymentKeys.projectDeployments,
});
queryClient.invalidateQueries({
queryKey: ProjectDeploymentTagKeys.projectDeploymentTags,
});
queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
queryClient.invalidateQueries({queryKey: ProjectDeploymentTagKeys.projectDeploymentTags});
},
});

const updateProjectDeploymentTagsMutation = useUpdateProjectDeploymentTagsMutation({
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ProjectDeploymentKeys.projectDeployments,
});
queryClient.invalidateQueries({
queryKey: ProjectDeploymentTagKeys.projectDeploymentTags,
});
queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
queryClient.invalidateQueries({queryKey: ProjectDeploymentTagKeys.projectDeploymentTags});
},
});

const enableProjectDeploymentMutation = useEnableProjectDeploymentMutation({
onSuccess: () => {
captureProjectDeploymentEnabled();

queryClient.invalidateQueries({
queryKey: ProjectDeploymentKeys.projectDeployments,
});
queryClient.invalidateQueries({queryKey: ProjectDeploymentKeys.projectDeployments});
},
});

const handleOnCheckedChange = (value: boolean) => {
enableProjectDeploymentMutation.mutate(
{
enable: value,
id: projectDeployment.id!,
},
{enable: value, id: projectDeployment.id!},
{
onSuccess: () => {
setProjectDeploymentEnabled(projectDeployment.id!, !projectDeployment.enabled);
Expand All @@ -87,9 +73,38 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
);
};

const workflowsCollapsibleTriggerRef = useRef<HTMLButtonElement | null>(null);

const handleCardClick = useCallback((event: React.MouseEvent) => {
const target = event.target as HTMLElement;

const interactiveSelectors = [
'[data-interactive]',
'.dropdown-menu-item',
'[data-radix-dropdown-menu-item]',
'[data-radix-dropdown-menu-trigger]',
'[data-radix-collapsible-trigger]',
'button',
'input',
'svg',
].join(', ');

if (target.closest(interactiveSelectors)) {
return;
}
if (workflowsCollapsibleTriggerRef.current?.contains(target)) {
return;
}

workflowsCollapsibleTriggerRef.current?.click();
}, []);

return (
<>
<div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
<div
className="flex w-full cursor-pointer items-center justify-between rounded-md px-2 hover:bg-destructive-foreground"
onClick={(event) => handleCardClick(event)}
>
<div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
<div className="flex-1">
<div className="flex items-center justify-between">
Expand All @@ -110,7 +125,10 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe

<div className="mt-2 sm:flex sm:items-center sm:justify-between">
<div className="flex items-center">
<CollapsibleTrigger className="group mr-4 flex text-xs font-semibold text-muted-foreground">
<CollapsibleTrigger
className="group mr-4 flex text-xs font-semibold text-muted-foreground"
ref={workflowsCollapsibleTriggerRef}
>
<span className="mr-1">
{projectDeployment.projectDeploymentWorkflows?.length === 1
? `1 workflow`
Expand All @@ -120,14 +138,12 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
<ChevronDownIcon className="size-4 duration-300 group-data-[state=open]:rotate-180" />
</CollapsibleTrigger>

<div onClick={(event) => event.preventDefault()}>
<div onClick={(event) => event.stopPropagation()}>
{projectDeployment.tags && (
<TagList
getRequest={(id, tags) => ({
id: id!,
updateTagsRequest: {
tags: tags || [],
},
updateTagsRequest: {tags: tags || []},
})}
id={projectDeployment.id!}
remainingTags={remainingTags}
Expand Down Expand Up @@ -157,6 +173,7 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
checked={projectDeployment.enabled}
disabled={enableProjectDeploymentMutation.isPending}
onCheckedChange={handleOnCheckedChange}
onClick={(event) => event.stopPropagation()}
/>
</div>

Expand Down
11 changes: 11 additions & 0 deletions ...-deployments/components/project-deployment-list/ProjectDeploymentListItemDropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ const ProjectDeploymentListItemDropdownMenu = ({
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="icon" variant="ghost" >
<EllipsisVerticalIcon className="size-4 hover:cursor-pointer" />
</Button>
</DropdownMenuTrigger>

<DropdownMenuContent align="end">
<DropdownMenuItem className="dropdown-menu-item" onClick={onEditClick}>Edit</DropdownMenuItem>

<DropdownMenuItem className="dropdown-menu-item" onClick={onUpdateProjectVersionClick}>Update Project Version</DropdownMenuItem>
<Button icon={<EllipsisVerticalIcon />} size="icon" variant="ghost" />
</DropdownMenuTrigger>

Expand All @@ -37,6 +46,8 @@ const ProjectDeploymentListItemDropdownMenu = ({

<DropdownMenuSeparator className="m-0" />

<DropdownMenuItem className="text-destructive dropdown-menu-item" onClick={onDeleteClick}>
Delete
<DropdownMenuItem className="dropdown-menu-item-destructive" onClick={onDeleteClick}>
<Trash2Icon /> Delete
</DropdownMenuItem>
Expand Down