Add Issue Link Creation Feature in IssueModal Component #15
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The changes introduce a new feature allowing users to input a link connection between issues directly in the IssueModal component. Two dropdowns were added: one for defining the link type, and another for selecting the issue to be linked. The buttons for creating the link, cancelling the operation, or searching for an issue were also incorporated.
The main modification involves adding a vector_search column and corresponding index to the 'issues' table in sequelize migrations. This newly added TSVECTOR type column is used for improved full-text search. Meanwhile, the resolvers.js file has been updated to use the exact match operator for the 'id' search field and case-insensitive like for the 'title' field.
The field 'vectorSearch' of the type TSVECTOR has been added to the Issue model in the database. The search functionality in resolvers.js has also been updated to utilize this new field for more efficient and accurate search results. The commit removes the redundant condition which checks if either projectId or id is not provided.
The code has been simplified by switching to async/await pattern from promises for better readability and ease of understanding. This was done in the `up` and `down` functions within the `add-issue-vector-search` migrations script. Unnecessary console logs have also been removed.
This update includes the addition of 'project' details to the 'Issue' GraphQL type, enabling these details to be accessed with the issue. Additionally, the "LinkIssueSearch" function in 'IssueLinkedIssues.tsx' has been enhanced to actually perform a query and return matching issues. To improve performance, a debounce function has been implemented to delay the search trigger by 300ms.
A comment has been added to the IssueLinkedIssues file in the frontend components to highlight an existing CSS bug. The bug is causing a problem with how the dropdown appears in a modal. This comment will serve as a reminder to fix the issue in the future.
The update simplifies the mapped Listbox.Option elements in the IssueLinkedIssues component by directly using 'link.value' as the key prop instead of 'linkIdx'. This can potentially optimize react re-renderings for this component.
This commit introduces methods for creating and deleting issue links. These new functionalities are introduced in the backend and connected to the frontend via GraphQL queries and mutations. Changes also include type definitions and model adjustments for proper link handling.
A delete issue link mutation has been implemented on both the frontend and backend. On the frontend, it's represented as a 'X' icon in the issue links section. On the backend, it's handled by destroying the corresponding record in the IssueLinks model in the database.
A new type named 'IssueLink' has been defined to accommodate link data including 'issueId', 'linkedIssueId', and 'linkType'. Two new functions have been added: 'handleDeleteIssueLink' and 'handleCreateIssueLink' for issue link handling on deletion and creation events respectively. In these functions, mutation calls for creating and deleting issue links have been abstracted.
A new feature is implemented to enable opening of linked issues from the issue modal list. A function named 'handleOpenIssue' is added which takes an issue id and navigates to the respective issue detail page. Click actions are also added to the issue id and title list items to trigger this function.
PR Analysis(review updated until commit 4c99cdc)
PR Feedback
How to useInstructions
|
|
/describe |
github-actions
bot
changed the title
|
PR Description updated to latest commit (88e6b48) |
The codebase has been refactored to split the complex IssueLinkedIssues component into separate, more manageable elements. This change improves readability and maintainability, as each subcomponent can now be understood and manipulated independently. The subcomponents were moved into their respective files: LinkIssueTypeDropdown, LinkIssueSearch, and the Index file for the IssueLinkedIssues.
The code in the LinkIssueSearch component has been refactored for improved readability and efficiency. The sequence of useState and useLazyQuery hooks have been reordered, creating a logical, easy-to-follow flow within the component. The code also optimizes performance by implementing a debounce function on handleChange for efficient search results.
|
/review |
|
Persistent review updated to latest commit 4c99cdc |
The unused setter function for the "linkTypeInverted" field in the issue-links model has been removed. This cleanup further simplifies the model and enhances code readability.
|
/improve |
The code now includes the DeleteIssueLink mutation in GraphQL schema. The new feature enables us to remove the issue links in the application. The respective GraphQL documents have been generated and added to the schema.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Comment on lines
198
to
199
| export function gql(source: string) { | ||
| return (documents as any)[source] ?? {}; |
There was a problem hiding this comment.
Suggestion: Avoid using any type in TypeScript. It's better to provide a specific type or use a generic if the type is not known.
Suggested change
| export function gql(source: string) { | |
| return (documents as any)[source] ?? {}; | |
| export function gql(source: string) { | |
| return (documents as Record<string, unknown>)[source] ?? {}; | |
| } |
Comment on lines
+10
to
+24
| const LinkIssueSearch = ({ | ||
| stateCallback, | ||
| }: { | ||
| stateCallback?: (args: any) => void; | ||
| }) => { | ||
| const [selected, setSelected] = useState({}); | ||
| const [query, setQuery] = useState(''); | ||
| const [searchIssues, { data, error, loading }] = useLazyQuery( | ||
| GET_ISSUES_QUERY, | ||
| { | ||
| fetchPolicy: 'network-only', | ||
| } | ||
| ); | ||
| const handleChange = (e: any) => { | ||
| setQuery(e.target.value); |
There was a problem hiding this comment.
Suggestion: Use a more specific type than 'any' for the 'stateCallback' function parameter and 'e' parameter in 'handleChange' function.
Suggested change
| const LinkIssueSearch = ({ | |
| stateCallback, | |
| }: { | |
| stateCallback?: (args: any) => void; | |
| }) => { | |
| const [selected, setSelected] = useState({}); | |
| const [query, setQuery] = useState(''); | |
| const [searchIssues, { data, error, loading }] = useLazyQuery( | |
| GET_ISSUES_QUERY, | |
| { | |
| fetchPolicy: 'network-only', | |
| } | |
| ); | |
| const handleChange = (e: any) => { | |
| setQuery(e.target.value); | |
| interface StateCallbackArgs { | |
| selectedIssue: Record<string, unknown>; | |
| } | |
| const LinkIssueSearch = ({ | |
| stateCallback, | |
| }: { | |
| stateCallback?: (args: StateCallbackArgs) => void; | |
| }) => { | |
| ... | |
| const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { | |
| setQuery(e.target.value); | |
| }; | |
| ... | |
| }; |
frontend/components/Button/index.tsx
Outdated
Comment on lines
+4
to
7
| // TODO: make small/medium/large variants | ||
| export const Button = ({ | ||
| text, | ||
| variant, |
There was a problem hiding this comment.
Suggestion: Add a TODO comment to remind of the need to implement button size variants.
Suggested change
| // TODO: make small/medium/large variants | |
| export const Button = ({ | |
| text, | |
| variant, | |
| // TODO: Implement small/medium/large variants for the button | |
| export const Button = ({ | |
| text, | |
| variant, | |
| ... | |
| }; |
backend/src/db/models/issue-links.js
Outdated
Comment on lines
38
to
42
| linkTypeInverted: { | ||
| type: DataTypes.STRING, | ||
| type: DataTypes.VIRTUAL, | ||
| get() { | ||
| return inverseLinkType?.[this.getDataValue('linkType')]; | ||
| }, |
There was a problem hiding this comment.
Suggestion: It's better to use DataTypes.STRING for 'linkTypeInverted' as it's a string type.
Suggested change
| linkTypeInverted: { | |
| type: DataTypes.STRING, | |
| type: DataTypes.VIRTUAL, | |
| get() { | |
| return inverseLinkType?.[this.getDataValue('linkType')]; | |
| }, | |
| linkTypeInverted: { | |
| type: DataTypes.STRING, | |
| get() { | |
| return inverseLinkType?.[this.getDataValue('linkType')]; | |
| }, | |
| }, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Type
Enhancement
Description
LinkIssueSearchandLinkIssueTypeDropdownfor selecting the issue to be linked and the type of link respectively.issuesresolver to utilize the newvectorSearchfield for more efficient and accurate search results.vectorSearchfield in the Issue model for improved full-text search.PR changes walkthrough
5 files
IssueLinkedIssues.tsx
frontend/components/IssueModal/IssueLinkedIssues.tsx
This file has been significantly updated to support the
creation of issue links directly in the IssueModal
component. It introduces new components such as
LinkIssueSearchandLinkIssueTypeDropdownto facilitatethe selection of the issue to be linked and the type of link
respectively. It also includes the necessary GraphQL
mutations to create and delete issue links. Additionally, it
adds a CSS bug comment and optimizes the key prop in the
IssueLinkedIssues component.
gql-queries-mutations.ts
frontend/gql/gql-queries-mutations.ts
This file has been updated to include new GraphQL queries
and mutations. The
GET_ISSUES_QUERYis added to fetchissues based on a search query, and the
CREATE_ISSUE_LINK_MUTATIONandDELETE_ISSUE_LINK_MUTATIONare added to create and deleteissue links respectively. A comment about creating
small/medium/large variants for the Button component is also
added.
resolvers.js
backend/src/resolvers.js
This file has been updated to include new resolvers for
creating and deleting issue links. It also modifies the
issuesresolver to utilize the newvectorSearchfieldfor more efficient and accurate search results. The
condition which checks if either projectId or id is not
provided is removed.
type-defs.js
backend/src/type-defs.js
This file has been updated to include new input types for
creating and deleting issue links. These input types are
used in the new mutations added to the Mutation type.
issue.js
backend/src/db/models/issue.js
This file has been updated to include a new
vectorSearchfield of the type TSVECTOR in the Issue model. This field is
used for improved full-text search. The Issue model is also
updated to include a relationship with the Project model.