Skip to content

Commit

Permalink
Resolve issue when inter-service relation attribute value is set to n…
Browse files Browse the repository at this point in the history
…ull AutoCompleteInput crashes. (Issue #5993, PR #5995)

# Description

Previously opening the interfaces would crash the app as Autocomplete didn't handle null values

closes #5993

https://github.com/user-attachments/assets/571530ee-1ed5-4eb0-9bce-ccb433fdeaed

# Self Check:

Strike through any lines that are not applicable (`~~line~~`) then check the box

- [x] Attached issue to pull request
- [x] Changelog entry
- [ x Code is clear and sufficiently documented
- [ ] Sufficient test cases (reproduces the bug/tests the requested feature)
- [x] Correct, in line with design
- [ ] End user documentation is included or an issue is created for end-user documentation (add ref to issue here: )
  • Loading branch information
matborowczyk authored and inmantaci committed Oct 22, 2024
1 parent 4d8d168 commit f2845fa
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 6 deletions.
6 changes: 6 additions & 0 deletions changelogs/unreleased/5993-autocomplete-null-bug.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
description: Resolve issue when inter-service relation attribute value is set to null AutoCompleteInput crashes.
issue-nr: 5993
change-type: patch
destination-branches: [master, iso7]
sections:
bugfix: "{{description}}"
6 changes: 3 additions & 3 deletions cypress/e2e/scenario-2.4-expert-mode.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,9 +160,9 @@ if (Cypress.env("edition") === "iso") {
// expect to find in the history the creating state as last
cy.get('[aria-label="History-Row"]', { timeout: 30000 }).should(
($rows) => {
expect($rows[0]).to.contain("creating");
expect($rows[0]).to.contain(4);
expect($rows).to.have.length(4);
expect($rows[1]).to.contain("creating");
expect($rows[1]).to.contain(4);
expect($rows).to.have.length(5);
},
);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { AutoCompleteInput } from "./AutoCompleteInput";
interface Props {
serviceName: string;
attributeName: string;
attributeValue: string | string[];
attributeValue: string | string[] | null;
description?: string;
isOptional: boolean;
isDisabled?: boolean;
Expand All @@ -16,6 +16,22 @@ interface Props {
multi?: boolean;
}

/**
* A React component that provides an autocomplete input field for inter service relations.
*
* @props {object} props - The properties passed to the component.
* @prop {string} serviceName - The name of the service.
* @prop {string} attributeName - The name of the attribute.
* @prop {string | string[] | null} attributeValue - The value of the attribute.
* @prop {string} description - The description of the attribute.
* @prop {boolean} isOptional - Whether the attribute is optional.
* @prop {boolean} isDisabled - Whether the input field should be disabled.
* @prop {(value): void;} handleInputChange - The function to handle input changes.
* @prop {string[]} alreadySelected - The already selected options.
* @prop {boolean} multi - Whether multiple options can be selected.
*
* @returns {React.FC<Props> | null} The rendered autocomplete input field or null if the data is not yet available or fetching failed.
*/
export const AutoCompleteInputProvider: React.FC<Props> = ({
serviceName,
attributeName,
Expand Down Expand Up @@ -67,10 +83,13 @@ export const AutoCompleteInputProvider: React.FC<Props> = ({
? service_identity_attribute_value
: id;

const isSelected =
alreadySelected !== null && alreadySelected.includes(id); //it can be that the value for inter-service relation is set to null

return {
displayName,
value: id,
isSelected: alreadySelected.includes(id),
isSelected,
};
},
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,29 @@ import { AutoCompleteInputProvider } from "./AutoCompleteInputProvider";
interface Props {
serviceName: string;
attributeName: string;
attributeValue: string | string[];
attributeValue: string | string[] | null;
description?: string;
isOptional: boolean;
handleInputChange: (value) => void;
alreadySelected: string[];
multi?: boolean;
}

/**
* A React component that provides related services for the inter-service relation input.
*
* @props {object} props - The properties passed to the component.
* @prop {string} serviceName - The name of the service.
* @prop {string} attributeName - The name of the attribute.
* @prop {string | string[] | null} attributeValue - The value of the attribute.
* @prop {string} description - The description of the attribute.
* @prop {boolean} isOptional - Whether the attribute is optional.
* @prop {(value): void} handleInputChange - The function to handle input changes.
* @prop {string[]} alreadySelected - The already selected options.
* @prop {boolean} multi - Whether multiple options can be selected.
*
* @returns {React.FC<Props>| null} The rendered input with fetched related services, null if the data is not yet available or Alert if the fetching failed.
*/
export const RelatedServiceProvider: React.FC<Props> = ({
serviceName,
attributeName,
Expand Down

0 comments on commit f2845fa

Please sign in to comment.