[Connector Builder] Add ability to click on logs to expand them #19195
Conversation
github-actions
bot
added
area/platform
lmossman
changed the title
| <Text className={styles.numLogsDisplay} size="xs" bold> | ||
| {logs.length} | ||
| </Text> |
There was a problem hiding this comment.
We have a NumberBadge component that should ideally be used here. (I know not directly relevant to this PR, but I just noticed it). We can extend that for more colors if needed.
There was a problem hiding this comment.
I was not aware of that, thanks!
| .tabPanel::after { | ||
| content: ""; | ||
| position: absolute; | ||
| z-index: 1; |
There was a problem hiding this comment.
We usually tend to maintain all z-indexes (since they are a global numbering system across all of the webapp) in the _z-indices.scss utility. Given that the purpose here is only to lift it slightly above the content, i.e. doing a "+1" I feel we can keep this in place here.
| pointer-events: none; | ||
| background-image: linear-gradient(to bottom, colors.$transparentColor, colors.$white 100%); | ||
| width: 100%; | ||
| height: 2vh; |
There was a problem hiding this comment.
Is there a specific reason we're having this height in dependance to the viewport height, instead of just a static (e.g. rem or px) height?
There was a problem hiding this comment.
I was thinking that if the window height is small, the blur should be smaller so that more of the content is visible. But looking back on that decision, I think it makes more sense to just always keep the blur a small pixel value, since it doesn't really ever need to be large
|
|
||
| const handleLogsTitleClick = () => { | ||
| // expand to 50% if it is currently less than 50%, otherwise minimize it | ||
| setLogsFlex((prevFlex) => (prevFlex < 0.5 ? 0.5 : 0)); |
There was a problem hiding this comment.
Minor nitpick: my personal feeling would be that we should always collapse it if it's somewhat open and open to 50% if it's completely closed. It feels a bit more aligned with what I personally would expect, but not having extremely strong feelings around that.
There was a problem hiding this comment.
I think that would make sense too! I was going back and forth between that approach and the one I implemented, so your comment has convinced me
airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Tim Roes <tim@airbyte.io>
…ls.tsx Co-authored-by: Tim Roes <tim@airbyte.io>
…ls.tsx Co-authored-by: Tim Roes <tim@airbyte.io>
* add ability to click on logs to expand them * memoize the result and log formatting * set flex in a controlled way * fix flex sizing of title * use NumberBadge * use static height for fade * Update airbyte-webapp/src/components/StreamTestingPanel/utils.ts Co-authored-by: Tim Roes <tim@airbyte.io> * Update airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx Co-authored-by: Tim Roes <tim@airbyte.io> * Update airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx Co-authored-by: Tim Roes <tim@airbyte.io> * remove comment * fix behavior of title click Co-authored-by: Tim Roes <tim@airbyte.io>
What
This change comes from a suggestion on an earlier PR, and it allows users to click on the Connector logs title in the logs drawer of the Connector Builder to expand the log drawer to a 50% size (and click it again to minimize it).
Screen recording demonstrating this:
Screen.Recording.2022-11-08.at.6.04.57.PM.mov
How