[Remove Vuetify from Studio] Informative pages in Accounts #5635
+204
−32
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| <template> | ||
|
|
||
| <div class="message-layout-wrapper"> | ||
| <StudioPage | ||
| :centered="true" | ||
| :marginTop="0" | ||
| > | ||
| <div class="message-layout-content"> | ||
| <h1 class="message-header"> | ||
| {{ header }} | ||
| </h1> | ||
| <p | ||
| v-if="text" | ||
| class="message-text" | ||
| > | ||
| {{ text }} | ||
| </p> | ||
| <div class="message-slot-container"> | ||
| <slot></slot> | ||
| </div> | ||
| <div class="link-container"> | ||
| <slot name="back"> | ||
| <KRouterLink | ||
| :to="{ name: 'Main' }" | ||
| :text="$tr('backToLogin')" | ||
| appearance="basic-link" | ||
| /> | ||
| </slot> | ||
| </div> | ||
| </div> | ||
| </StudioPage> | ||
| </div> | ||
|
|
||
| </template> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| import StudioPage from '../../shared/views/StudioPage'; | ||
|
|
||
| export default { | ||
| name: 'StudioMessageLayout', | ||
| components: { | ||
| StudioPage, | ||
| }, | ||
| props: { | ||
| header: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| text: { | ||
| type: String, | ||
| required: false, | ||
| default: '', | ||
| }, | ||
| }, | ||
| $trs: { | ||
| backToLogin: 'Continue to sign-in page', | ||
| }, | ||
| }; | ||
|
|
||
| </script> | ||
|
|
||
|
|
||
| <style scoped> | ||
|
|
||
| .message-layout-wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
|
Member
There was a problem hiding this comment. Would you please add a comment here on that it was needed because of Vuetify problems? That way, we can understand later more easily, and cleanup after Vuetify is gone.
Contributor
Author
There was a problem hiding this comment. Sure, I have added it :) |
||
| .link, | ||
| a.link { | ||
| /* Removes Vuetify default button background and border styles */ | ||
| background-color: transparent !important; | ||
| border-color: transparent !important; | ||
| } | ||
|
|
||
| .message-layout-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 900px; | ||
| padding-top: 80px; | ||
| padding-bottom: 48px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .message-header { | ||
| margin-bottom: 6px; | ||
| font-size: 24px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .message-text { | ||
| margin-top: 4px; | ||
| margin-bottom: 20px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .message-slot-container { | ||
| max-width: 400px; | ||
| margin: 24px auto 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .link-container { | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { render, screen } from '@testing-library/vue'; | ||
| import VueRouter from 'vue-router'; | ||
| import StudioMessageLayout from '../StudioMessageLayout.vue'; | ||
|
|
||
| const createRouter = () => { | ||
| return new VueRouter({ | ||
| mode: 'abstract', | ||
| routes: [{ path: '/', name: 'Main', component: { template: '<div />' } }], | ||
| }); | ||
| }; | ||
|
|
||
| const renderComponent = (props = {}, slots = {}) => { | ||
| return render(StudioMessageLayout, { | ||
| props: { | ||
| header: 'Default Header', | ||
| ...props, | ||
| }, | ||
| slots, | ||
| routes: createRouter(), | ||
| stubs: { | ||
| StudioPage: { | ||
| template: '<div class="studio-page-stub"><slot /></div>', | ||
| }, | ||
| KRouterLink: { | ||
| props: ['to', 'text', 'appearance'], | ||
| template: '<a href="#">{{ text }}</a>', | ||
| }, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| describe('StudioMessageLayout', () => { | ||
| it('renders with required header prop', () => { | ||
| renderComponent({ header: 'Test Message' }); | ||
|
|
||
| expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Message'); | ||
| }); | ||
|
|
||
| it('renders with optional text prop', () => { | ||
| renderComponent({ | ||
| header: 'Header', | ||
| text: 'This is additional information', | ||
| }); | ||
|
|
||
| expect(screen.getByText('This is additional information')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders default slot content', () => { | ||
| renderComponent({ header: 'Header' }, { default: 'Custom slot content here' }); | ||
|
|
||
| expect(screen.getByText('Custom slot content here')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders named back slot override', () => { | ||
| renderComponent({ header: 'Header' }, { back: 'Custom back content' }); | ||
|
|
||
| expect(screen.getByText('Custom back content')).toBeInTheDocument(); | ||
| expect(screen.queryByText('Continue to sign-in page')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
blocking: The acceptance criteria in issue #5631 state:
This new component has no unit tests. Consider adding tests for:
headerproptextpropbackslot overrideThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the input, I will work on this 👍