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

feat(web): integrations store modal show the drawer over the integrations list #3032

Merged

Conversation

LetItRock
Copy link
Contributor

What change does this PR introduce?

In the Integrations Store modal, we will show the integration settings form in the drawer that will be shown when clicking on the integration tile. The drawer will be rendered over the integrations list.

Why was this change needed?

This PR is a part of improvements over the onboarding process.

Other information (Screenshots)

Screenshot 2023-03-16 at 14 11 12
Screenshot 2023-03-16 at 14 11 33

Screen.Recording.2023-03-16.at.14.30.22.mov

@LetItRock LetItRock self-assigned this Mar 16, 2023
@linear
Copy link

linear bot commented Mar 16, 2023

Comment on lines +8 to +10
const DescriptionHolder = styled.div`
max-width: 220px;
`;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

added here some small updates like allowing to override CSS

Comment on lines +274 to +279
<ConfigureProviderButton
onClick={() => {
setIntegrationsModalVisible(true);
setPopoverOpened(false);
}}
>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

when modal is shown hide the configure provider popover

Comment on lines +67 to +70
}, [isFormOpened, setProvider, setFormIsOpened, closeIntegration]);

const handleKeyDown = useCallback(
(e) => {
useEffect(() => {
const handleKeyDown = (e) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed some issues with handling Esc button

Comment on lines +149 to +157
<Drawer
opened={isFormOpened}
position="right"
onClose={handleCloseForm}
withOverlay={false}
withCloseButton={false}
closeOnEscape={false}
classNames={drawerClasses}
>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

the integration settings is shown in the drawer

</MantinePopover.Dropdown>
</MantinePopover>
)}
</UnstyledButtonStyled>
<IntegrationsStoreModal
Copy link
Contributor Author

Choose a reason for hiding this comment

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

moved the modal outside, because we don't want receive the mouse events on the node button when hovering over the modal

…ore' into nv-1850-integrations-store-modal-show-drawer
Copy link
Contributor

@p-fernandez p-fernandez left a comment

Choose a reason for hiding this comment

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

🌟

Copy link
Contributor

@djabarovgeorge djabarovgeorge left a comment

Choose a reason for hiding this comment

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

Looks amazing, love the split PRs really easier to look at the smaller batches.

…ore' into nv-1850-integrations-store-modal-show-drawer
Base automatically changed from nv-1785-configure-provider-popover-with-integrations-store to getting-started-flow March 17, 2023 09:57
@LetItRock LetItRock merged commit 5ab5239 into getting-started-flow Mar 17, 2023
@LetItRock LetItRock deleted the nv-1850-integrations-store-modal-show-drawer branch March 17, 2023 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants