Web: Modify components, define new types for yaml parse/stringify endpoints #40974
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
kimlisa
added
no-changelog
| return ( | ||
| <TabLabel | ||
| role="tab" | ||
| htmlFor={`${name}-${tabName}`} | ||
| onClick={() => setActiveIndex(tabIndex)} | ||
| onClick={e => { | ||
| e.preventDefault(); |
There was a problem hiding this comment.
Is this e.preventDefault() necessary? From what I see, this is just a <label>, so there's no extra behavior on click. Pointer events are turned off when it's processing too.
There was a problem hiding this comment.
yeah i was confused by it to, but without the e.preventDefault, onChange gets called twice for some reason
| {tabContent} | ||
| <Box> | ||
| {selected && isProcessing && ( | ||
| <Spinner delay="none" size="25px" /> |
There was a problem hiding this comment.
Because of the absolute positioning, the spinner will get rendered outside of the given tab when the browser width is narrow enough.
Though I understand that this will be used only in a single place, so I guess it's good enough for now.
I suppose the issue was that you didn't want the text of the tab to jump when the spinner gets shown? I wonder if a horizontal progress bar would work here. Connect has one in LinearProgress.tsx, but we don't have stories for it unfortunately. I see that there's a story for "Animated Progress Bar", but this might be too big idk.
There was a problem hiding this comment.
I suppose the issue was that you didn't want the text of the tab to jump when the spinner gets shown?
yes
i'll add a note on this component to look into horizontal progress bar
| @@ -69,7 +73,7 @@ type props = { | |||
| // The style to render the selector in. | |||
| appearance?: 'square' | 'round'; | |||
| // The index that you'd like to select on the initial render. | |||
| initialSelected?: number; | |||
| activeIndex: number; | |||
There was a problem hiding this comment.
Good change. 👍 I mean controlling the current tab from outside of the component.
Could you update the comment and turn all comments into JSDocs?
| <FieldSelectCreatableAsync | ||
| inputId="test2" | ||
| label="FieldSelectCreatableAsync multi" |
There was a problem hiding this comment.
This one doesn't seem to ever show any options for me, even if I remove the filter in loadOptions.
There was a problem hiding this comment.
ah good catch, i forgot to set defaulOptions={true} which loadOptions on initial render
kimlisa
force-pushed
the
lisa/web-tweaks
branch
2 times, most recently
from
f76985b to
2d193c7
Compare
github-merge-queue
bot
removed this pull request from the merge queue due to no response for status checks
github-merge-queue
bot
removed this pull request from the merge queue due to no response for status checks
…points (#40974) * Web: update SlideTabs to render spinner depending on condition * Web: Add async version of FieldSelectCreatable * Web: Allow modifying fetched resources with useKeyBasedPagination * Web: Add yaml parse/stringify api endpoints and types * Web: Allow input search bgColor to take on parents bgColor * Address CRs * Update snaps and test
…points (#40974) (#41148) * Web: update SlideTabs to render spinner depending on condition * Web: Add async version of FieldSelectCreatable * Web: Allow modifying fetched resources with useKeyBasedPagination * Web: Add yaml parse/stringify api endpoints and types * Web: Allow input search bgColor to take on parents bgColor * Address CRs * Update snaps and test
part of https://github.com/gravitational/teleport.e/issues/3933
suggest reviewing by commit
This PR contains few specific changes contained in the commits:
SlideTabscomponent that I tweaked to accept aisProcessingflag that when true, render spinners and prevent tabs from being clicked on. Refactored a bit to have the caller be responsible for keeping the index state.FieldSelectCreatableuseKeyBasedPagination: this is similar to the change made here. Resource listing can be stale when we apply CRU actions to certain resources because of caching. So instead of refetching list, we need to allow modifying the frontend cached list