dashboard home org cards (#2630)

* add cards to dashboard home page for each org contract

* display contract name on org tab

* fix tests

* add tests

* don't pass in empty dict

* fix mobile tab title

* fix typescript issue

* use paginated factory for contracts

* simplify user query

* pass OrganizationPage directly in and rename props

* missed one property

* restyle card for multiple contracts as indicated in figma

* bold the org name in the tab

* fix typescript error

* updated mobile styling

* fix bottom border on mobile cards

* don't use separate queries for contracts because they're already coming across as part of the org

Author: gumaerc

frontends/api/src/mitxonline/test-utils/factories/contracts.ts

@@ -0,0 +1,21 @@
+import { faker } from "@faker-js/faker/locale/en"
+import type { ContractPage } from "@mitodl/mitxonline-api-axios/v2"
+import { makePaginatedFactory } from "ol-test-utilities"
+
+const contract = (overrides: Partial<ContractPage> = {}): ContractPage => ({
+  id: faker.number.int(),
+  active: true,
+  contract_end: faker.date.future().toISOString(),
+  contract_start: faker.date.past().toISOString(),
+  description: faker.lorem.sentence(),
+  integration_type: "non-sso" as const,
+  name: faker.company.name(),
+  organization: faker.number.int(),
+  slug: faker.lorem.slug(),
+  membership_type: faker.helpers.arrayElement(["managed", "unmanaged"]),
+  ...overrides,
+})
+
+const contracts = makePaginatedFactory(contract)
+
+export { contract, contracts }

frontends/api/src/mitxonline/test-utils/factories/index.ts

@@ -5,6 +5,7 @@ import * as courses from "./courses"
 import * as organizations from "./organization"
 import * as user from "./user"
 import * as requirements from "./requirements"
+import * as contracts from "./contracts"
 
 export {
   mitx as enrollment,
@@ -14,4 +15,5 @@ export {
   user,
   pages,
   requirements,
+  contracts,
 }

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx

@@ -540,4 +540,8 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   )
 }
 
-export { DashboardCard, getDefaultContextMenuItems }
+export {
+  DashboardCard,
+  CardRoot as DashboardCardRoot,
+  getDefaultContextMenuItems,
+}

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx

@@ -30,6 +30,7 @@ const Wrapper = styled.div(({ theme }) => ({
     padding: "0",
   },
 }))
+
 const DashboardCardStyled = styled(DashboardCard)({
   borderRadius: "8px",
   boxShadow: "0px 1px 6px 0px rgba(3, 21, 45, 0.05)",