From d51cc2de10578ac2034f66eb3a766be5d7482b10 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 3 Sep 2024 17:15:38 -0400 Subject: [PATCH 01/17] remove broken parent_topic_name API parameter and replace with parent_topic_id, fetch and display subtopics on topic channel pages --- frontends/api/src/generated/v1/api.ts | 22 ++++---- .../src/pages/ChannelPage/ChannelPage.tsx | 55 ++++++++++++++++++- learning_resources/filters.py | 24 ++------ 3 files changed, 71 insertions(+), 30 deletions(-) diff --git a/frontends/api/src/generated/v1/api.ts b/frontends/api/src/generated/v1/api.ts index 821164a00d..09d442f00e 100644 --- a/frontends/api/src/generated/v1/api.ts +++ b/frontends/api/src/generated/v1/api.ts @@ -21272,7 +21272,7 @@ export const TopicsApiAxiosParamCreator = function ( * @param {number} [limit] Number of results to return per page. * @param {Array} [name] Multiple values may be separated by commas. * @param {number} [offset] The initial index from which to return the results. - * @param {Array} [parent_topic_name] Multiple values may be separated by commas. + * @param {Array} [parent_topic_id] Multiple values may be separated by commas. * @param {*} [options] Override http request option. * @throws {RequiredError} */ @@ -21281,7 +21281,7 @@ export const TopicsApiAxiosParamCreator = function ( limit?: number, name?: Array, offset?: number, - parent_topic_name?: Array, + parent_topic_id?: Array, options: RawAxiosRequestConfig = {}, ): Promise => { const localVarPath = `/api/v1/topics/` @@ -21316,8 +21316,8 @@ export const TopicsApiAxiosParamCreator = function ( localVarQueryParameter["offset"] = offset } - if (parent_topic_name) { - localVarQueryParameter["parent_topic_name"] = parent_topic_name.join( + if (parent_topic_id) { + localVarQueryParameter["parent_topic_id"] = parent_topic_id.join( COLLECTION_FORMATS.csv, ) } @@ -21399,7 +21399,7 @@ export const TopicsApiFp = function (configuration?: Configuration) { * @param {number} [limit] Number of results to return per page. * @param {Array} [name] Multiple values may be separated by commas. * @param {number} [offset] The initial index from which to return the results. - * @param {Array} [parent_topic_name] Multiple values may be separated by commas. + * @param {Array} [parent_topic_id] Multiple values may be separated by commas. * @param {*} [options] Override http request option. * @throws {RequiredError} */ @@ -21408,7 +21408,7 @@ export const TopicsApiFp = function (configuration?: Configuration) { limit?: number, name?: Array, offset?: number, - parent_topic_name?: Array, + parent_topic_id?: Array, options?: RawAxiosRequestConfig, ): Promise< ( @@ -21421,7 +21421,7 @@ export const TopicsApiFp = function (configuration?: Configuration) { limit, name, offset, - parent_topic_name, + parent_topic_id, options, ) const index = configuration?.serverIndex ?? 0 @@ -21497,7 +21497,7 @@ export const TopicsApiFactory = function ( requestParameters.limit, requestParameters.name, requestParameters.offset, - requestParameters.parent_topic_name, + requestParameters.parent_topic_id, options, ) .then((request) => request(axios, basePath)) @@ -21556,10 +21556,10 @@ export interface TopicsApiTopicsListRequest { /** * Multiple values may be separated by commas. - * @type {Array} + * @type {Array} * @memberof TopicsApiTopicsList */ - readonly parent_topic_name?: Array + readonly parent_topic_id?: Array } /** @@ -21601,7 +21601,7 @@ export class TopicsApi extends BaseAPI { requestParameters.limit, requestParameters.name, requestParameters.offset, - requestParameters.parent_topic_name, + requestParameters.parent_topic_id, options, ) .then((request) => request(this.axios, this.basePath)) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 4e68174a03..22567a9da1 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -9,16 +9,61 @@ import type { BooleanFacets, } from "@mitodl/course-search-utils" import { ChannelTypeEnum } from "api/v0" +import { useLearningResourceTopics } from "api/hooks/learningResources" +import { ChipLink, Container, styled, Typography } from "ol-components" + +const SubTopicsContainer = styled(Container)({ + paddingTop: "50px", +}) + +const SubTopicsHeader = styled(Typography)(({ theme }) => ({ + marginBottom: "16px", + ...theme.typography.subtitle1, +})) + +const ChipsContainer = styled.div({ + display: "flex", + flexWrap: "wrap", + gap: "12px", +}) type RouteParams = { channelType: ChannelTypeEnum name: string } +type SubTopicDisplayProps = { + parentTopicId: number +} + +const SubTopicsDisplay: React.FC = (props) => { + const { parentTopicId } = props + const topicsQuery = useLearningResourceTopics({ + parent_topic_id: [parentTopicId], + }) + return ( + + Related Topics + + {topicsQuery.data?.results.map((topic) => ( + + ))} + + + ) +} + const ChannelPage: React.FC = () => { const { channelType, name } = useParams() const channelQuery = useChannelDetail(String(channelType), String(name)) const searchParams: Facets & BooleanFacets = {} + const publicDescription = channelQuery.data?.public_description if (channelQuery.data?.search_filter) { const urlParams = new URLSearchParams(channelQuery.data.search_filter) @@ -37,7 +82,15 @@ const ChannelPage: React.FC = () => { channelType && ( <> -

{channelQuery.data?.public_description}

+ {publicDescription && ( + {publicDescription} + )} + {channelQuery.data?.channel_type === ChannelTypeEnum.Topic && + channelQuery.data?.topic_detail.topic ? ( + + ) : null} {channelQuery.data?.search_filter && ( Date: Wed, 4 Sep 2024 14:39:15 -0400 Subject: [PATCH 02/17] fix typo --- frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 22567a9da1..5e97d181bb 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -88,7 +88,7 @@ const ChannelPage: React.FC = () => { {channelQuery.data?.channel_type === ChannelTypeEnum.Topic && channelQuery.data?.topic_detail.topic ? ( ) : null} {channelQuery.data?.search_filter && ( From db91655d1072e78c3c51a4eee0cdeb2c449f4c2d Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 4 Sep 2024 14:57:34 -0400 Subject: [PATCH 03/17] fix existing tests --- .../src/pages/ChannelPage/ChannelPage.test.tsx | 10 ++++++++++ .../mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 4 ++-- .../src/pages/ChannelPage/ChannelSearch.test.tsx | 10 ++++++++++ .../ChannelPage/EditChannelAppearanceForm.test.tsx | 12 +++++++++++- 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index 98f6230fff..4d6c3ccc69 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -104,6 +104,16 @@ const setupApis = ( results: [], }) + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + setMockResponse.get( + urls.topics.list({ parent_topic_id: [channel.topic_detail.topic] }), + factories.learningResources.topics({ count: 5 }), + ) + } + return { channel, } diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 5e97d181bb..ed0dc6b1a6 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -86,9 +86,9 @@ const ChannelPage: React.FC = () => { {publicDescription} )} {channelQuery.data?.channel_type === ChannelTypeEnum.Topic && - channelQuery.data?.topic_detail.topic ? ( + channelQuery.data?.topic_detail?.topic ? ( ) : null} {channelQuery.data?.search_filter && ( diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.test.tsx index 80c8fc2f00..3a3f87409c 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.test.tsx @@ -76,6 +76,16 @@ const setMockApiResponses = ({ results: [], }) + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + setMockResponse.get( + urls.topics.list({ parent_topic_id: [channel.topic_detail.topic] }), + factories.learningResources.topics({ count: 5 }), + ) + } + return { channel, } diff --git a/frontends/mit-learn/src/pages/ChannelPage/EditChannelAppearanceForm.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/EditChannelAppearanceForm.test.tsx index 6fcdb13e5a..5c18977909 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/EditChannelAppearanceForm.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/EditChannelAppearanceForm.test.tsx @@ -9,7 +9,7 @@ import { factories, urls, setMockResponse } from "api/test-utils" import { channels as factory } from "api/test-utils/factories" import { makeChannelViewPath, makeChannelEditPath } from "@/common/urls" import { makeWidgetListResponse } from "ol-widgets/src/factories" -import type { Channel } from "api/v0" +import { ChannelTypeEnum, type Channel } from "api/v0" const setupApis = (channelOverrides: Partial) => { const channel = factory.channel({ is_moderator: true, ...channelOverrides }) @@ -33,6 +33,16 @@ const setupApis = (channelOverrides: Partial) => { results: [], }) + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + setMockResponse.get( + urls.topics.list({ parent_topic_id: [channel.topic_detail.topic] }), + factories.learningResources.topics({ count: 5 }), + ) + } + return channel } From 5c0f9927e24675a17a5ad90a28f3c4cee15bf27c Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 4 Sep 2024 16:00:46 -0400 Subject: [PATCH 04/17] test that subtopic chips appear properly --- .../pages/ChannelPage/ChannelPage.test.tsx | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index 4d6c3ccc69..6b948836bd 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -108,10 +108,15 @@ const setupApis = ( channel.channel_type === ChannelTypeEnum.Topic && channel.topic_detail.topic ) { + const subTopics = factories.learningResources.topics({ count: 5 }) setMockResponse.get( urls.topics.list({ parent_topic_id: [channel.topic_detail.topic] }), - factories.learningResources.topics({ count: 5 }), + subTopics, ) + return { + channel, + subTopics, + } } return { @@ -257,6 +262,39 @@ describe.each(NON_UNIT_CHANNEL_TYPES)( ]) }) }) + + if (channelType === ChannelTypeEnum.Topic) { + test("Subtopics display", async () => { + const { channel, subTopics } = setupApis({ + search_filter: "topic=Physics", + channel_type: channelType, + }) + renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) + + await waitFor(() => { + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + expect(makeRequest).toHaveBeenCalledWith( + "get", + urls.topics.list({ + parent_topic_id: [channel.topic_detail.topic], + }), + undefined, + ) + const links = screen.getAllByRole("link") + if (subTopics) { + for (const topic of subTopics.results) { + const link = links.find((el) => el.textContent === topic.name) + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute("href", topic.channel_url) + } + } + } + }) + }) + } }, ) From 45d92d0b9897530d5e1e6c00e3b9282e431a9fb4 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Wed, 4 Sep 2024 16:03:22 -0400 Subject: [PATCH 05/17] mobile styles --- .../mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index ed0dc6b1a6..0143c704ad 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -12,12 +12,15 @@ import { ChannelTypeEnum } from "api/v0" import { useLearningResourceTopics } from "api/hooks/learningResources" import { ChipLink, Container, styled, Typography } from "ol-components" -const SubTopicsContainer = styled(Container)({ +const SubTopicsContainer = styled(Container)(({ theme }) => ({ paddingTop: "50px", -}) + [theme.breakpoints.down("md")]: { + paddingTop: "24px", + }, +})) const SubTopicsHeader = styled(Typography)(({ theme }) => ({ - marginBottom: "16px", + marginBottom: "10px", ...theme.typography.subtitle1, })) From ff517fe61fe3a0632a0b29935c839092d00ebc27 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Thu, 5 Sep 2024 13:57:58 -0400 Subject: [PATCH 06/17] adjust desktop top padding --- frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 0143c704ad..0e086c5249 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -13,7 +13,7 @@ import { useLearningResourceTopics } from "api/hooks/learningResources" import { ChipLink, Container, styled, Typography } from "ol-components" const SubTopicsContainer = styled(Container)(({ theme }) => ({ - paddingTop: "50px", + paddingTop: "40px", [theme.breakpoints.down("md")]: { paddingTop: "24px", }, From 9102e10acbef39d49cd9d9451aa2308871144b60 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Thu, 5 Sep 2024 14:14:07 -0400 Subject: [PATCH 07/17] move topic test to its own describe block --- .../pages/ChannelPage/ChannelPage.test.tsx | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index 6b948836bd..3b87fbc17f 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -262,41 +262,41 @@ describe.each(NON_UNIT_CHANNEL_TYPES)( ]) }) }) + }, +) - if (channelType === ChannelTypeEnum.Topic) { - test("Subtopics display", async () => { - const { channel, subTopics } = setupApis({ - search_filter: "topic=Physics", - channel_type: channelType, - }) - renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) +describe("Channel Pages, Topic only", () => { + test("Subtopics display", async () => { + const { channel, subTopics } = setupApis({ + search_filter: "topic=Physics", + channel_type: ChannelTypeEnum.Topic, + }) + renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) - await waitFor(() => { - if ( - channel.channel_type === ChannelTypeEnum.Topic && - channel.topic_detail.topic - ) { - expect(makeRequest).toHaveBeenCalledWith( - "get", - urls.topics.list({ - parent_topic_id: [channel.topic_detail.topic], - }), - undefined, - ) - const links = screen.getAllByRole("link") - if (subTopics) { - for (const topic of subTopics.results) { - const link = links.find((el) => el.textContent === topic.name) - expect(link).toBeInTheDocument() - expect(link).toHaveAttribute("href", topic.channel_url) - } - } + await waitFor(() => { + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + expect(makeRequest).toHaveBeenCalledWith( + "get", + urls.topics.list({ + parent_topic_id: [channel.topic_detail.topic], + }), + undefined, + ) + const links = screen.getAllByRole("link") + if (subTopics) { + for (const topic of subTopics.results) { + const link = links.find((el) => el.textContent === topic.name) + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute("href", topic.channel_url) } - }) - }) - } - }, -) + } + } + }) + }) +}) describe("Channel Pages, Unit only", () => { it("Sets the expected meta tags", async () => { From 6c7d6ddc610e21add2f9edfc12790bffe5dd352e Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Thu, 5 Sep 2024 15:03:17 -0400 Subject: [PATCH 08/17] regenerate openapi after rebase --- openapi/specs/v1.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/openapi/specs/v1.yaml b/openapi/specs/v1.yaml index 4c1e3ab103..dbf8de09b2 100644 --- a/openapi/specs/v1.yaml +++ b/openapi/specs/v1.yaml @@ -6308,11 +6308,11 @@ paths: schema: type: integer - in: query - name: parent_topic_name + name: parent_topic_id schema: type: array items: - type: string + type: number description: Multiple values may be separated by commas. explode: false style: form From cec26ff63913c6c19ac183062462ae91918ada65 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Thu, 5 Sep 2024 18:50:36 -0400 Subject: [PATCH 09/17] don't display subtopics section at all if there are no results --- .../src/pages/ChannelPage/ChannelPage.tsx | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 0e086c5249..52a6fc1d83 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -44,21 +44,24 @@ const SubTopicsDisplay: React.FC = (props) => { const topicsQuery = useLearningResourceTopics({ parent_topic_id: [parentTopicId], }) + const totalSubtopics = topicsQuery.data?.results?.length ?? 0 return ( - - Related Topics - - {topicsQuery.data?.results.map((topic) => ( - - ))} - - + totalSubtopics > 0 && ( + + Related Topics + + {topicsQuery.data?.results.map((topic) => ( + + ))} + + + ) ) } From 11af07901737518c0118f3385fe278077dd07b39 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Thu, 5 Sep 2024 18:54:28 -0400 Subject: [PATCH 10/17] filter out topics without a channel url --- frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index 52a6fc1d83..b1baf87e5f 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -44,13 +44,16 @@ const SubTopicsDisplay: React.FC = (props) => { const topicsQuery = useLearningResourceTopics({ parent_topic_id: [parentTopicId], }) - const totalSubtopics = topicsQuery.data?.results?.length ?? 0 + const totalSubtopics = topicsQuery.data?.results.length ?? 0 + const subTopics = topicsQuery.data?.results.filter( + (topic) => topic.channel_url, + ) return ( totalSubtopics > 0 && ( Related Topics - {topicsQuery.data?.results.map((topic) => ( + {subTopics?.map((topic) => ( Date: Fri, 6 Sep 2024 09:35:30 -0400 Subject: [PATCH 11/17] adjust channel search box top margins --- frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx index 29a920b54e..334868c06b 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx @@ -23,11 +23,11 @@ import { styled, VisuallyHidden } from "ol-components" const SearchInputContainer = styled.div` padding-bottom: 40px; - margin-top: 80px; + margin-top: 64px; ${({ theme }) => theme.breakpoints.down("md")} { padding-bottom: 35px; - margin-top: 40px; + margin-top: 24px; } ` From c49298bc7544b3b7cc74d461e114f24d5a4145fb Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 09:57:57 -0400 Subject: [PATCH 12/17] put top padding on a wrapper container instead of margin on search input --- .../mit-learn/src/pages/ChannelPage/ChannelSearch.tsx | 2 -- .../src/pages/ChannelPage/DefaultChannelTemplate.tsx | 9 ++++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx index 334868c06b..30fec19a8c 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelSearch.tsx @@ -23,11 +23,9 @@ import { styled, VisuallyHidden } from "ol-components" const SearchInputContainer = styled.div` padding-bottom: 40px; - margin-top: 64px; ${({ theme }) => theme.breakpoints.down("md")} { padding-bottom: 35px; - margin-top: 24px; } ` diff --git a/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx b/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx index 1a997ddafe..6060829577 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx @@ -12,6 +12,13 @@ import { } from "./ChannelPageTemplate" import MetaTags from "@/page-components/MetaTags/MetaTags" +const ChildrenContainer = styled.div(({ theme }) => ({ + paddingTop: "64px", + [theme.breakpoints.down("sm")]: { + paddingTop: "24px", + }, +})) + const ChannelControlsContainer = styled.div(({ theme }) => ({ display: "flex", flexDirection: "row", @@ -107,7 +114,7 @@ const DefaultChannelTemplate: React.FC = ({ } /> - {children} + {children} ) } From cfef2fb54d7efd1bcc3b05bca6d27fde85aeec7e Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 14:28:48 -0400 Subject: [PATCH 13/17] update spacing rules again --- frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 6 +++--- .../src/pages/ChannelPage/DefaultChannelTemplate.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index b1baf87e5f..ebc05671c3 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -13,9 +13,9 @@ import { useLearningResourceTopics } from "api/hooks/learningResources" import { ChipLink, Container, styled, Typography } from "ol-components" const SubTopicsContainer = styled(Container)(({ theme }) => ({ - paddingTop: "40px", - [theme.breakpoints.down("md")]: { - paddingTop: "24px", + marginBottom: "60px", + [theme.breakpoints.down("sm")]: { + marginBottom: "24px", }, })) diff --git a/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx b/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx index 6060829577..eade19f177 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/DefaultChannelTemplate.tsx @@ -13,7 +13,7 @@ import { import MetaTags from "@/page-components/MetaTags/MetaTags" const ChildrenContainer = styled.div(({ theme }) => ({ - paddingTop: "64px", + paddingTop: "40px", [theme.breakpoints.down("sm")]: { paddingTop: "24px", }, From 508d82519fd92e148c433207ee89f9e39800f960 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 14:59:06 -0400 Subject: [PATCH 14/17] use propsNotNil on channel_url --- frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx index ebc05671c3..022e35ebe4 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.tsx @@ -11,6 +11,7 @@ import type { import { ChannelTypeEnum } from "api/v0" import { useLearningResourceTopics } from "api/hooks/learningResources" import { ChipLink, Container, styled, Typography } from "ol-components" +import { propsNotNil } from "ol-utilities" const SubTopicsContainer = styled(Container)(({ theme }) => ({ marginBottom: "60px", @@ -46,7 +47,7 @@ const SubTopicsDisplay: React.FC = (props) => { }) const totalSubtopics = topicsQuery.data?.results.length ?? 0 const subTopics = topicsQuery.data?.results.filter( - (topic) => topic.channel_url, + propsNotNil(["channel_url"]), ) return ( totalSubtopics > 0 && ( @@ -58,7 +59,7 @@ const SubTopicsDisplay: React.FC = (props) => { size="large" variant="outlinedWhite" key={topic.id} - href={topic.channel_url ? topic.channel_url : ""} + href={topic.channel_url} label={topic.name} /> ))} From 05b397e3d95b8b52a90a67499ec0e12b9b4bb3c5 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 15:29:12 -0400 Subject: [PATCH 15/17] simplify test --- .../pages/ChannelPage/ChannelPage.test.tsx | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index 3b87fbc17f..7180293958 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -11,6 +11,7 @@ import { } from "../../test-utils" import ChannelSearch from "./ChannelSearch" import { assertHeadings } from "ol-test-utilities" +import invariant from "tiny-invariant" jest.mock("./ChannelSearch", () => { const actual = jest.requireActual("./ChannelSearch") @@ -273,26 +274,19 @@ describe("Channel Pages, Topic only", () => { }) renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) - await waitFor(() => { + await waitFor(async () => { if ( channel.channel_type === ChannelTypeEnum.Topic && channel.topic_detail.topic ) { - expect(makeRequest).toHaveBeenCalledWith( - "get", - urls.topics.list({ - parent_topic_id: [channel.topic_detail.topic], - }), - undefined, - ) - const links = screen.getAllByRole("link") - if (subTopics) { - for (const topic of subTopics.results) { - const link = links.find((el) => el.textContent === topic.name) - expect(link).toBeInTheDocument() - expect(link).toHaveAttribute("href", topic.channel_url) - } - } + invariant(subTopics) + const links = await screen.findAllByRole("link", { + // name arg can be string, regex, or function + name: (name) => subTopics?.results.map((t) => t.name).includes(name), + }) + links.forEach((link, i) => { + expect(link).toHaveAttribute("href", subTopics.results[i].channel_url) + }) } }) }) From 692d0103b945478b1fd676c245187814914f5819 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 15:35:59 -0400 Subject: [PATCH 16/17] remove waitFor --- .../pages/ChannelPage/ChannelPage.test.tsx | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index 7180293958..b6c8a43ca9 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -274,21 +274,19 @@ describe("Channel Pages, Topic only", () => { }) renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) - await waitFor(async () => { - if ( - channel.channel_type === ChannelTypeEnum.Topic && - channel.topic_detail.topic - ) { - invariant(subTopics) - const links = await screen.findAllByRole("link", { - // name arg can be string, regex, or function - name: (name) => subTopics?.results.map((t) => t.name).includes(name), - }) - links.forEach((link, i) => { - expect(link).toHaveAttribute("href", subTopics.results[i].channel_url) - }) - } - }) + if ( + channel.channel_type === ChannelTypeEnum.Topic && + channel.topic_detail.topic + ) { + invariant(subTopics) + const links = await screen.findAllByRole("link", { + // name arg can be string, regex, or function + name: (name) => subTopics?.results.map((t) => t.name).includes(name), + }) + links.forEach((link, i) => { + expect(link).toHaveAttribute("href", subTopics.results[i].channel_url) + }) + } }) }) From 80d73bcd2ea9ad54e9c08eef963b9c51c7b4a038 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Fri, 6 Sep 2024 15:36:29 -0400 Subject: [PATCH 17/17] remove conditional --- .../pages/ChannelPage/ChannelPage.test.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx index b6c8a43ca9..39643f66ce 100644 --- a/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx +++ b/frontends/mit-learn/src/pages/ChannelPage/ChannelPage.test.tsx @@ -274,19 +274,14 @@ describe("Channel Pages, Topic only", () => { }) renderTestApp({ url: `/c/${channel.channel_type}/${channel.name}` }) - if ( - channel.channel_type === ChannelTypeEnum.Topic && - channel.topic_detail.topic - ) { - invariant(subTopics) - const links = await screen.findAllByRole("link", { - // name arg can be string, regex, or function - name: (name) => subTopics?.results.map((t) => t.name).includes(name), - }) - links.forEach((link, i) => { - expect(link).toHaveAttribute("href", subTopics.results[i].channel_url) - }) - } + invariant(subTopics) + const links = await screen.findAllByRole("link", { + // name arg can be string, regex, or function + name: (name) => subTopics?.results.map((t) => t.name).includes(name), + }) + links.forEach((link, i) => { + expect(link).toHaveAttribute("href", subTopics.results[i].channel_url) + }) }) })