feat(web) - add a management connection via the ManagementPanel#6518
feat(web) - add a management connection via the ManagementPanel#6518wendybujalski merged 1 commit intomainfrom
Conversation
Dependency Review✅ No vulnerabilities or OpenSSF Scorecard issues found.Scanned FilesNone |
wendybujalski
requested review from
jobelenus,
nickgerace,
stack72 and
vbustamante
| Importing your workspace! | ||
| <template #moreContent> | ||
| <p class="italic font-sm"> | ||
| <p class="italic text-sm"> |
There was a problem hiding this comment.
"font-sm" doesn't do anything! The correct Tailwind class is "text-sm"
| keyEmitter.on("Enter", onKeyDown); | ||
| }); | ||
| onBeforeUnmount(() => { | ||
| window.removeEventListener("keydown", onKeyDown); | ||
| keyEmitter.off("Enter", onKeyDown); |
There was a problem hiding this comment.
We want to use the centralized emitters instead of creating additional addEventListeners
| export interface MouseDetails { | ||
| [key: string | symbol]: Pick< | ||
| MouseEvent, | ||
| | "button" | ||
| | "clientX" | ||
| | "clientY" | ||
| | "altKey" | ||
| | "ctrlKey" | ||
| | "metaKey" | ||
| | "shiftKey" | ||
| | "preventDefault" | ||
| | "target" | ||
| >; | ||
| } | ||
|
|
||
| const onClick = (event: MouseEvent) => { | ||
| mouseEmitter.emit("click", event); | ||
| }; | ||
| const onMouseDown = (event: MouseEvent) => { | ||
| mouseEmitter.emit("mousedown", event); | ||
| }; | ||
|
|
||
| export const mouseEmitter: Emitter<MouseDetails> = mitt<MouseDetails>(); | ||
|
|
||
| let mouseEmitterStarted = false; | ||
|
|
||
| export const startMouseEmitters = (window: Window) => { | ||
| if (mouseEmitterStarted) return; | ||
| mouseEmitterStarted = true; | ||
| window.addEventListener("click", onClick); | ||
| window.addEventListener("mousedown", onMouseDown); | ||
| }; |
There was a problem hiding this comment.
New mouseEmitter for centrally handling click and mousedown events on the whole window.
| :class=" | ||
| clsx( | ||
| 'block h-lg w-full ml-auto font-sm font-mono', | ||
| 'block h-lg w-full ml-auto text-sm font-mono', |
There was a problem hiding this comment.
Once again, "font-sm" doesn't actually do anything 😅
| }; | ||
| const closeSecretForm = () => { | ||
| secretFormOpen.value = false; | ||
| removeListeners(); |
There was a problem hiding this comment.
Fixed a bug where the listeners were not always being removed.
There was a problem hiding this comment.
The guts of this component are definitely very similar to AttributeInput, but there are enough little differences to make merging them not worth it (for now).
jobelenus
left a comment
jobelenus
left a comment
There was a problem hiding this comment.
Excellent data re-use!!!
| // general click handler for the whole page | ||
| // any click which doesn't do this behavior should have .stop on it! | ||
| const onClick = (e: MouseEvent) => { | ||
| const onClick = (e: MouseDetails["click"]) => { |
There was a problem hiding this comment.
Yeah, no reason to not apply our same "use one central event listener that emits events instead of a bunch of individual ones" structure for mouse events. Right now it's only "mousedown" and "click" but adding additional events to the same mouseEmitter when we need em should be easy :)
2 participants
How does this PR change the system?
This wraps up ENG-3083 so that the Management panel within ComponentDetails can be used to add a management connection in addition to displaying the existing management connections and functions.
The input field for selecting a component to manage is similar to but not the same as AttributeInput. Eventually those two components might have some of their parts merged into a general fuzzy search input component.
There are also a few small bug fixes and improvements wrapped into this PR as well, will point em out in the comments!
Screenshots:
Out of Scope:
The data loaded into the frontend about management connections is still not always accurate.