Update Import from other channels page to display recommendations

[akolson]

Overview

This task involves updating the SearchOrBrowseWindow.vue to include a panel that displays recommended resources. It also involves updating the page responsiveness as described in the design specifications.

Description and outcomes

• Design requirements
  

• Markup requirements

  • This is current markup based on Vuetify. This should be updated to its KDS equivalent;

    <ImportFromChannelsModal>
        <template ...>
            <VSheet>
                ...
                
                <!-- Search bar -->
                <VLayout ...>
                    <VFlex ...>
                        <VForm ...>
                            <VTextField ...>
                                ...
                            </VTextField>
                        </VForm>
                    </VFlex>
                </VLayout>
    
                <!-- Search or Topics Browsing -->
                <ChannelList ...>
                <ContentTreeList ...>
                <SearchResultsList ...>
             </VSheet>
        </template>
    </ImportFromChannelsModal>

  • The KDS equivalent of the above could be;

    <ImportFromChannelsModal>
        <template ...>
            <KPageContainer>
                ...
                
                <KGrid ...>
                    
                    <!-- Main panel >= 800px -->
                    <KGridItem ...>
                        <!-- Search bar -->
                        <KGrid ...>
                            <KGridItem ...>
                                <KTextbox .../>
                                <KButton .../>
                            </KGridItem>
                        </KGrid>
    
                        <!-- Search or Topics Browsing -->
                        <KGrid ...>
                            <KGridItem ...>
                                <ChannelList ...>
                                <ContentTreeList ...>
                                <SearchResultsList ...>
                            </KGridItem>
                        </KGrid>
                    </KGridItem>
                    
                    <!-- Recommended resources panel >= 400px -->
                    <KGridItem ...>
                        <!-- Recommended resources -->
                    </KGridItem>
                    
                </KGrid>
             </KPageContainer>
        </template>
    </ImportFromChannelsModal>

• Styling requirements

  • The main panel should have a minimum width of 800px.
  • The recommended resources panel should have a minimum width of 400px.
    
  • The page should be responsive to different screen sizes.
  • See Figma designs for specifics on styling requirements.

• Architectural requirements

  • Replace all Vuetify components in SearchOrBrowseWindow.vue with their KDS equivalents.
  • Use the RecommendedResourceCard to implement the cards.
  • Use the KGrid component for responsiveness.

Acceptance Criteria

• The Import from other channels page is implemented as specified in the Figma designs.
• The page is responsive as described in the Figma designs.
• The page is keyboard navigable (a11y) as specified in the Figma designs.
• Tests are written to verify correctness of page.

Assumptions and Dependencies

• This is a purely UI task and does not involve implementing any API interactions. As such, static data should be used for visualization and testing purposes. Static data can be obtained from the public API.

Scope

The scope of this task is limited to;

• Updating the Import from other channels page to display recommendations.
• Updating responsiveness of the Import from other channels page.

It does not include;

• Implementing the About recommendations link click action.
• Implementing any API interactions (See Assumptions and Dependencies).

Accessibility Requirements

Please see the Figma designs for the keyboard navigation behavior

Resources

• Figma designs
• Vuetify
• RecommendedResourceCard
• KDS