Skip to content
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.

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

[WEB-2542] Fix: display filter and tooltip issues in list layout. #5696

Merged
merged 3 commits into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
2 changes: 1 addition & 1 deletion web/app/profile/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ import { USER_ROLES } from "@/constants/workspace";
import { useUser, useUserSettings } from "@/hooks/store";
// import { ProfileSettingsLayout } from "@/layouts/settings-layout";
// layouts
import { FileService } from "@/services/file.service";
import { ENABLE_LOCAL_DB_CACHE } from "@/plane-web/constants/issues";
import { FileService } from "@/services/file.service";
// services
// types

Expand Down
8 changes: 4 additions & 4 deletions web/core/components/issues/issue-layouts/list/block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
};

//TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
const keyMinWidth = (projectIdentifier?.length ?? 0) * 7;
const keyMinWidth = displayProperties?.key ? (projectIdentifier?.length ?? 0) * 7 : 0;

return (
<ControlLink
Expand Down Expand Up @@ -178,7 +178,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
</>
}
disabled={issue.project_id === projectId}
renderByDefault={false}
>
<div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
<MultipleSelectEntityAction
Expand All @@ -196,13 +195,14 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
</div>
</Tooltip>
)}
{displayProperties && displayProperties?.key && (
{displayProperties && (displayProperties.key || displayProperties.issue_type) && (
<div className="flex-shrink-0" style={{ minWidth: `${keyMinWidth}px` }}>
{issue.project_id && (
<IssueIdentifier
issueId={issueId}
projectId={issue.project_id}
textContainerClassName="text-xs font-medium text-custom-text-300"
displayProperties={displayProperties}
Comment on lines +198 to +205
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

IssueIdentifier does not utilize displayProperties.issue_type

The IssueIdentifier component currently only uses displayProperties.key to determine rendering. The displayProperties.issue_type property is not referenced or utilized within the component. Therefore, the change to include issue_type in the conditional rendering does not have any effect.

  • IssueIdentifier component (web/ce/components/issues/issue-details/issue-identifier.tsx) only references displayProperties.key.
🔗 Analysis chain

Improved flexibility in IssueIdentifier rendering

The modification to render IssueIdentifier when either displayProperties.key or displayProperties.issue_type is present improves the component's flexibility. Passing the entire displayProperties object to IssueIdentifier is a good practice for maintaining consistency.

Please verify that the IssueIdentifier component correctly handles the new displayProperties prop. Run the following script to check its implementation:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the IssueIdentifier component's handling of displayProperties

# Test: Search for the IssueIdentifier component definition
rg --type typescript -A 10 'export const IssueIdentifier'

Length of output: 94


Script:

#!/bin/bash
# Description: Verify the IssueIdentifier component's handling of displayProperties

# Test: Search for the IssueIdentifier component definition in .ts and .tsx files
rg -g "*.ts" -g "*.tsx" -A 10 'export const IssueIdentifier'

Length of output: 1212


Script:

#!/bin/bash
# Description: Verify the usage of displayProperties within IssueIdentifier component

# Test: Search for usage of displayProperties in issue-identifier.tsx
rg -g 'issue-identifier.tsx' 'displayProperties'

Length of output: 439


Script:

#!/bin/bash
# Description: Verify all usages of displayProperties within IssueIdentifier component

# Test: Search for specific properties of displayProperties in issue-identifier.tsx
rg -g 'issue-identifier.tsx' 'displayProperties\.(key|issue_type)'

Length of output: 206

/>
)}
</div>
Expand Down Expand Up @@ -293,4 +293,4 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
</Row>
</ControlLink>
);
});
});
Loading