fix close dialog box editor notification #1228

[helioLJ]

• Created a State to check if editor isClosedor not, by default it'sfalse`, since the dialog starts open.
• Created a condition that it will return a fragment if isClosed it's true.
• Created a function responsible for close the EditorNotification.
• Passed closeEditor() to the Alert component.

1. EditorNotification.js

  const [isClosed, setIsClosed] = React.useState(false)

  if (!hasEditingAccess(user, project) || isClosed) {
    return (<></>);
  }
  
  function closeEditor() {
    setIsClosed(true)
  }

  /*
  ...
  */

        <Alert handleClose={closeEditor} signal="notify">

• Expected handleClose as a void function in AlertProps file.

2. index.ts

export interface AlertProps {
  signal?: 'notify' | 'success' | 'error';
  handleClose?: () => void;
}

• In Alert component, involved Icons.Close in a button to select it in StyledAlert.ts

3. Alert.tsx

  <button>
    <Icons.Close onClick={handleClose} />
   </button>

• Removed button border and background and added cursor pointer behavior.

4. StyledAlert.ts

> button {
    border: none;
    background: none;
    cursor: pointer;
  }

[changeset-bot]

⚠️ No Changeset found

Latest commit: 05339b0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Enjoy2Live]

@helioLJ this is a great addition! thanks for adding handleClose prop.
can you please make the onClick on the button rather than the Icon

[helioLJ]

Sure! I it will be more concise this way, ty

[Enjoy2Live]

it's recommended to write it this way: & > button {

[helioLJ]

Ok

[Enjoy2Live]

the type here is not so accurate handleClose?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; is more explicit

[helioLJ]

Thanks for your feedback, Mohammed! I'll make these changes soon as possible

[Enjoy2Live]

@helioLJ I made a PR to fix those and also add animation to the alert #1253