Show resubmit channel to community library CTA after channel publish #5541
Conversation
AlexVelezLl
left a comment
AlexVelezLl
left a comment
There was a problem hiding this comment.
Thanks @taoerman! Looking good, just a little concerned about the KModal styles overrides, and noted a couple of nitpicks. Thanks!
| <template #actions> | ||
| <div class="resubmit-modal-actions"> | ||
| <KButton | ||
| class="resubmit-modal-dismiss-btn" | ||
| :style="dismissButtonStyles" | ||
| data-test="dismiss-button" | ||
| @click="handleDismiss" | ||
| > | ||
| {{ dismissButtonText }} | ||
| </KButton> | ||
| <KButton | ||
| class="resubmit-modal-resubmit-btn" | ||
| primary | ||
| data-test="resubmit-button" | ||
| @click="handleResubmit" | ||
| > | ||
| {{ resubmitButtonText }} | ||
| </KButton> | ||
| </div> | ||
| </template> |
There was a problem hiding this comment.
Is there any reason why we need these buttons to be in the #actions slot instead of using the KModal props? (It is not completely incorrect, it is more so because this slot is just for when we want specific styles handling on KModal actions)
| [data-test='resubmit-modal'], | ||
| [data-test='resubmit-modal'] > *, | ||
| [data-test='resubmit-modal'] [role='dialog'], | ||
| [data-test='resubmit-modal'] .KModal, | ||
| [data-test='resubmit-modal'] .modal { | ||
| width: 500px !important; | ||
| max-width: 500px !important; | ||
| max-height: 284px !important; | ||
| } | ||
| [data-test='resubmit-modal'] h1, | ||
| [data-test='resubmit-modal'] h2, | ||
| [data-test='resubmit-modal'] h3, | ||
| [data-test='resubmit-modal'] h4, | ||
| [data-test='resubmit-modal'] .modal-title, | ||
| [data-test='resubmit-modal'] [class*='title'] { | ||
| width: 452px; | ||
| height: 52px; | ||
| font-family: 'Noto Sans', sans-serif; | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| line-height: 130%; | ||
| letter-spacing: 0%; | ||
| vertical-align: middle; | ||
| } | ||
| .resubmit-modal-content { | ||
| padding: 8px 0; | ||
| margin-top: 35px; | ||
| } | ||
| .resubmit-modal-description, | ||
| .resubmit-modal-question { | ||
| width: 100%; | ||
| min-height: 40px; | ||
| padding: 0; | ||
| margin: 0; | ||
| font-family: 'Noto Sans', sans-serif; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| line-height: 140%; | ||
| letter-spacing: 0%; | ||
| vertical-align: middle; | ||
| } | ||
| .resubmit-modal-actions { | ||
| display: flex; | ||
| gap: 10px; | ||
| justify-content: flex-end; | ||
| width: 452px; | ||
| min-height: 40px; | ||
| padding-top: 16px; | ||
| } | ||
| .resubmit-modal-dismiss-btn:hover { | ||
| background-color: var(--hover-bg-color) !important; | ||
| } | ||
| .resubmit-modal-resubmit-btn { | ||
| height: 40px; | ||
| } |
There was a problem hiding this comment.
Hmm, are all of these styles added to match exactly the Figma specs? I don't think we need almost any of them; we can rely on KModal's inner styles to have a consistent view across modals in the application.
There was a problem hiding this comment.
Should the resubmit CL modal be checked and triggered by this component? If so, we can show a loader here, until that check finishes, and then we can emit a showResubmitCommunityLibraryModal or something like that.
| this.resubmitModalChannel = { | ||
| ...this.currentChannel, | ||
| version: latestSubmission.channel_version, | ||
| }; |
There was a problem hiding this comment.
We won't need to update the channel version in this way after this is merged!
| if (Array.isArray(response)) { | ||
| submissions = response; | ||
| } else if (response && response.results && Array.isArray(response.results)) { | ||
| submissions = response.results; | ||
| } |
There was a problem hiding this comment.
I don't think we need to check the response type. In this point of the application, it should always be the same.
| computed: { | ||
| title() { | ||
| return communityChannelsStrings.resubmitModalTitle$(); | ||
| }, | ||
| description() { | ||
| return communityChannelsStrings.resubmitModalBodyFirst$({ | ||
| channelName: this.channel.name, | ||
| version: this.channel.version, | ||
| }); | ||
| }, | ||
| question() { | ||
| return communityChannelsStrings.resubmitModalBodySecond$(); | ||
| }, | ||
| dismissButtonText() { | ||
| return communityChannelsStrings.dismissButton$(); | ||
| }, | ||
| resubmitButtonText() { | ||
| return communityChannelsStrings.resubmitButton$(); | ||
| }, | ||
| dismissButtonStyles() { | ||
| return { | ||
| color: this.$themeTokens.primary, | ||
| backgroundColor: this.$themePalette.grey.v_100, | ||
| '--hover-bg-color': this.$themePalette.grey.v_200, | ||
| }; | ||
| }, | ||
| }, | ||
| methods: { | ||
| handleDismiss() { | ||
| this.$emit('dismiss'); | ||
| this.$emit('input', false); | ||
| }, | ||
| handleResubmit() { | ||
| this.$emit('resubmit'); | ||
| this.$emit('input', false); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Oh, and just one last thing! 😅 Could we migrate this to use the Vue Composition API instead? Thanks!
2 participants
Summary
Implemented ResubmitChannelModal to prompt users to resubmit a channel to the Community Library when publishing a channel that already has submissions. The modal appears immediately on publish click (not after completion, another issue has added a loader to make sure the side panel would load updated data from backend) and shows the channel name and the version already in the submission queue.
References
Fixed #5451
Reviewer guidance
test manually.