diff --git a/Release-Notes.md b/Release-Notes.md new file mode 100644 index 00000000..33c2d406 --- /dev/null +++ b/Release-Notes.md @@ -0,0 +1,13 @@ +## v0.13.0 + + - Begin refactor of fetching api data. This move is towards creating data/backend specific fetchers and preparation for dynamic routes. + + - HTTP base fetcher added. + + - JSON HTTP fetcher added. + + - Django fetcher added. + + - Markdown HTTP fetcher added. + + - Github fetcher added. diff --git a/includes/usr/share/nginx/html/mock/api/v2/OPTIONS.json b/includes/usr/share/nginx/html/mock/api/v2/OPTIONS.json index 5b7a14c5..3133d822 100644 --- a/includes/usr/share/nginx/html/mock/api/v2/OPTIONS.json +++ b/includes/usr/share/nginx/html/mock/api/v2/OPTIONS.json @@ -97,5 +97,63 @@ } ] } - ] + ], + "routes": { + "id": "root", + "path": "/", + "children": [ + { + "id": "settings", + "path": "settings", + "component": "settings", + "loader": "django," + }, + { + "path": ":module", + "children": [ + { + "path": "ticket", + "children": [ + { + "path": ":type", + "children": [ + { + "index": true, + "component": "list", + "loader": "django" + }, + { + "path": ":pk", + "component": "ticket", + "loader": "django" + } + ] + } + ] + }, + { + "path": ":model", + "children": [ + { + "index": true, + "component": "list", + "loader": "django" + }, + { + "path": ":pk", + "children": [ + { + "index": true, + "component": "detail", + "loader": "django" + + } + ] + } + ] + } + ] + } + ] + } } \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index a9784709..06aeb085 100644 --- a/jest.config.js +++ b/jest.config.js @@ -33,7 +33,8 @@ const config = { coveragePathIgnorePatterns: [ // "/node_modules/" "\\.tmp\\.", - "src/images/icons" + "src/images/icons", + "src/types", ], // Indicates which provider should be used to instrument code for coverage diff --git a/package-lock.json b/package-lock.json index 4b93ee64..e2e16d03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@patternfly/react-icons": "^6.6.0", "@patternfly/react-table": "^6.6.0", "clipboard": "^2.0.11", - "dompurify": "^3.4.12", + "dompurify": "^3.4.13", "highlight.js": "^11.11.1", "markdown-it": "^14.3.0", "markdown-it-admon": "^1.0.1", @@ -7509,9 +7509,9 @@ } }, "node_modules/dompurify": { - "version": "3.4.12", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.12.tgz", - "integrity": "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==", + "version": "3.4.13", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.13.tgz", + "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==", "license": "(MPL-2.0 OR Apache-2.0)", "optionalDependencies": { "@types/trusted-types": "^2.0.7" diff --git a/package.json b/package.json index 37f2801c..3d0ae45c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@patternfly/react-icons": "^6.6.0", "@patternfly/react-table": "^6.6.0", "clipboard": "^2.0.11", - "dompurify": "^3.4.12", + "dompurify": "^3.4.13", "highlight.js": "^11.11.1", "markdown-it": "^14.3.0", "markdown-it-admon": "^1.0.1", diff --git a/src/App.js b/src/App.js deleted file mode 100644 index b6c3432d..00000000 --- a/src/App.js +++ /dev/null @@ -1,333 +0,0 @@ -import { - Route, - RouterProvider, - createBrowserRouter, - createRoutesFromElements, -} from 'react-router' - -import { - Content, - PageSection -} from '@patternfly/react-core'; - -import Detail from "./layout/Detail"; -import ErrorPage from "./layout/Error"; -import List from "./layout/List"; -import RootLayout from "./layout/Root"; -import Ticket from "./layout/Ticket"; -import History from "./layout/history"; -import Settings from "./layout/Settings"; -import { apiFetch } from "./hooks/apiFetch"; -import { UserProvider } from './hooks/UserContext'; -import { APISubmitAction } from './components/DisplayFields'; - -const Login = () => { - - if (!window.env) { - return
Loading...
; // Wait until `window.env` is defined - } - - window.location.replace(window.env.API_URL + '/auth/login'); - return
redirecting...
; - - }; -const Logout = () => { - - const logout = apiFetch( - window.env.API_URL + '/auth/logout', - null, - 'POST', - null, - false - ) - - window.location.replace( window.env.API_URL + '/auth/login'); - - return( -
logout
- ) -} - -function DefaultFallback() { - return ( - - Loading - - ); - } - - -function App() { - - const router = createBrowserRouter( - - createRoutesFromElements( - } - errorElement={} - > - - } - HydrateFallback={DefaultFallback} - > - - {/* ******************************************************** - SoF - Re-Write - ******************************************************** */} - - - {/* ******************************************************** - Redirects - ******************************************************** */} - - } /> - - - } /> - - - {/* ******************************************************** - Settings View - ******************************************************** */} - - } - loader = {pagedLoader} - /> - - - {/* ******************************************************** - Site Routes - ******************************************************** */} - - - - - - {/* ******************************************************** - Entity models - ******************************************************** */} - - - - - } - loader = {pagedLoader} /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - - - {/* ******************************************************** - Git Repository Models - ******************************************************** */} - - - - - } - loader = {pagedLoader} /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - - - {/* ******************************************************** - Tickets View - ******************************************************** */} - - - - } - loader = {pagedLoader} /> - - - } - action={APISubmitAction} loader = {pagedLoader} /> - - - } - action={APISubmitAction} - loader = {pagedLoader} - shouldRevalidate={({ currentParams, nextParams }) => { - - const reValidate = ( - currentParams.module !== nextParams.module || - currentParams.model !== nextParams.model || - currentParams.id !== nextParams.id - ) - - return reValidate - - }} - /> - - - - - - false} - > - - false} - /> - - - - - - - - - - - - - - } loader = {pagedLoader} /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - { - - const reValidate = ( - currentParams.module !== nextParams.module || - currentParams.model !== nextParams.model || - currentParams.id !== nextParams.id - ) - - return reValidate - - }} - > - - - } - loader = {pagedLoader} - action={APISubmitAction} - shouldRevalidate={({ currentParams, nextParams }) => { - - const reValidate = ( - currentParams.module !== nextParams.module || - currentParams.model !== nextParams.model || - currentParams.pk !== nextParams.pk - ) - - return reValidate - - }} - /> - - - {/* ******************************************************** - History View - ******************************************************** */} - - } - loader = {pagedLoader} /> - - - - - false} - > - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - - - - - - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - } - loader = {pagedLoader} - action={APISubmitAction} shouldRevalidate={() => false} - /> - - - - - - - - - - {/* ******************************************************** - EoF - Re-Write - ******************************************************** */} - - - - )); - - - return ( - - - - ); -} - -export default App; - - -const pagedLoader = async ({request, params}) => { - - console.debug('Page Loader', request) - - const {api_metadata, api_page_data} = await apiFetch( - String(request.url).replace(document.location.origin, '') - ) - - return { - metadata: api_metadata, - page_data: api_page_data - } - -} diff --git a/src/App/__test__/unit/index.test.tsx b/src/App/__test__/unit/index.test.tsx new file mode 100644 index 00000000..f4661fd2 --- /dev/null +++ b/src/App/__test__/unit/index.test.tsx @@ -0,0 +1,43 @@ +import { + render +} from '@testing-library/react'; + +import App from '../..'; + +import dynamicRouter from '../../router/dynamicRouter'; + + + +jest.mock("../../router/dynamicRouter", () => ({ + __esModule: true, + default: jest.fn(), +})); + + + +jest.mock("react-router", () => ({ + ...jest.requireActual("react-router"), + RouterProvider: jest.fn(() => null), +})); + + + +describe("App creates routes", () => { + + test("Dynamic router used",() => { + + render( ); + + + expect(dynamicRouter).toHaveBeenCalledTimes(1); + }); + + + test("Dynamic router has no args",() => { + + render( ); + + + expect(dynamicRouter).toHaveBeenCalledWith(); + }); +}); diff --git a/src/App/index.tsx b/src/App/index.tsx new file mode 100644 index 00000000..49fb707f --- /dev/null +++ b/src/App/index.tsx @@ -0,0 +1,28 @@ +import { + RouterProvider +} from "react-router/dom"; + +import dynamicRouter from "./router/dynamicRouter"; + + + +/** + * Adds the routes provided by {@link dynamicRouter}. The RouterProvider will + * be wrapped in {@link BackendProvider} using the `API_URL` that was provided + * by the backend. + * + * @summary App Entrypoint + * + * @category Other + * @since 0.13.0 + */ +function App() { + + const router = dynamicRouter(); + + return ( + + ); +} + +export default App; diff --git a/src/App/pageLoaders/__test__/unit/django.test.ts b/src/App/pageLoaders/__test__/unit/django.test.ts new file mode 100644 index 00000000..b5e83cf6 --- /dev/null +++ b/src/App/pageLoaders/__test__/unit/django.test.ts @@ -0,0 +1,94 @@ + + +import * as fetcherDjango from "../../../../hooks/useDjangoFetcher" + +import djangoLoader from "../../django"; + + + +describe("django Page Loader", () => { + + + afterEach(() => { + + jest.restoreAllMocks(); + + }); + + const url = "http://localhost/somepath" + + const request: Request = new Request(url) + + const data = '{ "name": "data" }' + const responseData = new Response(data, { + status: 200, + }); + + const metadata = '{ "name": "metadata" }' + const responseMetadata = new Response(metadata, { + status: 200, + }); + + + + test("Calls Django Fetcher", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoLoader({ request: request }); + + expect(fetch).toHaveBeenCalledWith({ + getMetadata: true, + url: request.url, + signal: request.signal, + } ); + }); + + + + test("Returns Data", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoLoader({ request: request }); + + expect(result.page_data).toEqual(JSON.parse(data)); + }); + + + + test("Returns Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoLoader({ request: request }); + + expect(result.metadata).toEqual(JSON.parse(metadata)); + }); + + + + test("Returns both Data and Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoLoader({ request: request }); + + expect(result).toEqual({ + metadata: JSON.parse(metadata), + page_data: JSON.parse(data) + }); + }); +}); diff --git a/src/App/pageLoaders/__test__/unit/djangoMetadata.test.ts b/src/App/pageLoaders/__test__/unit/djangoMetadata.test.ts new file mode 100644 index 00000000..2de756e3 --- /dev/null +++ b/src/App/pageLoaders/__test__/unit/djangoMetadata.test.ts @@ -0,0 +1,89 @@ +import * as fetcherDjango from "../../../../hooks/useDjangoFetcher" + +import djangoMetadataLoader from "../../djangoMetadata"; + + + +describe("djangoMetadata Page Loader", () => { + + + afterEach(() => { + + jest.restoreAllMocks(); + + }); + + const url = "http://localhost/somepath" + + const request: Request = new Request(url) + + const responseData = null + + const metadata = '{ "name": "metadata" }' + const responseMetadata = new Response(metadata, { + status: 200, + }); + + + + test("Calls Django Fetcher", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoMetadataLoader({ request: request }); + + expect(fetch).toHaveBeenCalledWith({ + onlyMetadata: true, + url: request.url, + signal: request.signal, + } ); + }); + + + + test("Returns Data", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoMetadataLoader({ request: request }); + + expect(result.page_data).toEqual(null); + }); + + + + test("Returns Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoMetadataLoader({ request: request }); + + expect(result.metadata).toEqual(JSON.parse(metadata)); + }); + + + + test("Returns both Data and Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoMetadataLoader({ request: request }); + + expect(result).toEqual({ + metadata: JSON.parse(metadata), + page_data: null + }); + }); +}); diff --git a/src/App/pageLoaders/__test__/unit/djangoRootMetadata.test.ts b/src/App/pageLoaders/__test__/unit/djangoRootMetadata.test.ts new file mode 100644 index 00000000..37b6acd0 --- /dev/null +++ b/src/App/pageLoaders/__test__/unit/djangoRootMetadata.test.ts @@ -0,0 +1,89 @@ +import * as fetcherDjango from "../../../../hooks/useDjangoFetcher" + +import djangoRootMetadataLoader from "../../djangoRootMetadata"; + + + +describe("djangoRootMetadata Page Loader", () => { + + + afterEach(() => { + + jest.restoreAllMocks(); + + }); + + const url = "/" + + const request: Request = new Request(url) + + const responseData = null + + const metadata = '{ "name": "metadata" }' + const responseMetadata = new Response(metadata, { + status: 200, + }); + + + + test("Calls Django Fetcher", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoRootMetadataLoader({ request: request }); + + expect(fetch).toHaveBeenCalledWith({ + onlyMetadata: true, + url: request.url, + signal: request.signal, + } ); + }); + + + + test("Returns Data", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoRootMetadataLoader({ request: request }); + + expect(result.page_data).toEqual(null); + }); + + + + test("Returns Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoRootMetadataLoader({ request: request }); + + expect(result.metadata).toEqual(JSON.parse(metadata)); + }); + + + + test("Returns both Data and Metadata", async () => { + + const fetch = jest + .spyOn(fetcherDjango, "default") + .mockResolvedValue({apiMetadata: responseMetadata, apiData: responseData}); + + + const result = await djangoRootMetadataLoader({ request: request }); + + expect(result).toEqual({ + metadata: JSON.parse(metadata), + page_data: null + }); + }); +}); diff --git a/src/App/pageLoaders/__test__/unit/github.test.ts b/src/App/pageLoaders/__test__/unit/github.test.ts new file mode 100644 index 00000000..b4f964d7 --- /dev/null +++ b/src/App/pageLoaders/__test__/unit/github.test.ts @@ -0,0 +1,70 @@ + + +import * as fetcherGithub from "../../../../hooks/useGithubFetcher" + +import githubLoader from "../../github"; + + + +describe("github Page Loader", () => { + + + afterEach(() => { + + jest.restoreAllMocks(); + + }); + + const url = "http://localhost/somepath" + + const baseURL = "http://localhost/some/path" + + const data = '## a heading\n\nSome text' + + const params = { akey: "avalue"} + + const request: Request = new Request(url) + + const responseData = new Response(data, { + status: 200, + }); + + // const metadata = '{ "name": "metadata" }' + // const responseMetadata = new Response(metadata, { + // status: 200, + // }); + + + + test("Calls Github Fetcher", async () => { + + const fetch = jest + .spyOn(fetcherGithub, "default") + .mockResolvedValue(responseData); + + + const result = await githubLoader({baseURL: baseURL, request: request, params: params }); + + expect(fetch).toHaveBeenCalledWith({ + url: request.url, + baseURL: baseURL, + params: params, + signal: request.signal, + } ); + }); + + + + test("Returns Data", async () => { + + const fetch = jest + .spyOn(fetcherGithub, "default") + .mockResolvedValue(responseData); + + + const result = await githubLoader({baseURL: "", request: request, params: params }); + + expect(data).toEqual(result); + }); + +}); diff --git a/src/App/pageLoaders/django.ts b/src/App/pageLoaders/django.ts new file mode 100644 index 00000000..52856f87 --- /dev/null +++ b/src/App/pageLoaders/django.ts @@ -0,0 +1,45 @@ +import { + loaderNamedParams +} from "."; + +import { + APIMetadata +} from "../../../types/APIMetadata"; + +import useDjangoFetcher from "../../hooks/useDjangoFetcher"; + + + +/** + * + * This loader uses a {@link useDjangoFetcher | Django backend} to fetch both + * the data and metadata. + * + * @summary Django loader that fetches both Data and Metadata. + * + * @category Loader + * @expandType loaderNamedParams + * @since 0.13.0 + */ +const djangoLoader = async ({ + baseURL, + request, +}: loaderNamedParams +): Promise<{metadata: APIMetadata, page_data: APIDataObject}> => { + + + const {apiMetadata, apiData} = await useDjangoFetcher({ + getMetadata: true, + url: request.url, + baseURL: baseURL, + signal: request.signal, + }) + + return { + metadata: await apiMetadata.clone().json(), + page_data: await apiData.clone().json() + } + +} + +export default djangoLoader; diff --git a/src/App/pageLoaders/djangoMetadata.ts b/src/App/pageLoaders/djangoMetadata.ts new file mode 100644 index 00000000..cee104d7 --- /dev/null +++ b/src/App/pageLoaders/djangoMetadata.ts @@ -0,0 +1,46 @@ +import { + loaderNamedParams +} from "."; + +import { + APIMetadata +} from "../../../types/APIMetadata"; + +import useDjangoFetcher from "../../hooks/useDjangoFetcher"; + + + +/** + * + * This loader uses a {@link useDjangoFetcher | Django backend} to fetch the + * Metadata **only**. This loader returns the the same essential object as + * {@link djangoLoader} so they can be used interchangeably. + * + * @summary Django loader that only fetches Metadata. + * + * @category Loader + * @expandType loaderNamedParams + * @since 0.13.0 + */ +const djangoMetadataLoader = async ({ + baseURL, + request, +}: loaderNamedParams): Promise<{metadata: APIMetadata, page_data: null}> => { + + console.debug('Django MetaData Loader', request) + + const {apiMetadata, apiData } = await useDjangoFetcher({ + onlyMetadata: true, + url: String(request.url).replace('/add', ''), + baseURL: baseURL, + signal: request.signal, + }) + + return { + metadata: await apiMetadata.clone().json(), + page_data: null + } + +} + +export default djangoMetadataLoader; diff --git a/src/App/pageLoaders/djangoRootMetadata.ts b/src/App/pageLoaders/djangoRootMetadata.ts new file mode 100644 index 00000000..ab953cea --- /dev/null +++ b/src/App/pageLoaders/djangoRootMetadata.ts @@ -0,0 +1,46 @@ +import { + loaderNamedParams +} from "."; + +import { + apiRootMetadata +} from "../../types/backend/apiMetadata/root"; + +import useDjangoFetcher from "../../hooks/useDjangoFetcher"; + + + +/** + * + * This loader uses a {@link useDjangoFetcher | Django backend} to fetch the + * Metadata **only**. This loader returns the the same essential object as + * {@link djangoLoader} so they can be used interchangeably. + * + * @summary Django loader that only fetches Metadata. + * + * @category Loader + * @expandType loaderNamedParams + * @since 0.13.0 + */ +const djangoRootMetadataLoader = async ({ + baseURL, + request, +}: loaderNamedParams): Promise<{metadata: apiRootMetadata, page_data: null}> => { + + console.debug('Django Root MetaData Loader', {url: '/'}) + + const {apiMetadata, apiData } = await useDjangoFetcher({ + onlyMetadata: true, + url: '/', + baseURL: baseURL, + signal: request.signal, + }) + + return { + metadata: await apiMetadata.clone().json(), + page_data: null + } + +} + +export default djangoRootMetadataLoader; diff --git a/src/App/pageLoaders/github.ts b/src/App/pageLoaders/github.ts new file mode 100644 index 00000000..612170bf --- /dev/null +++ b/src/App/pageLoaders/github.ts @@ -0,0 +1,55 @@ +import { + Params +} from "react-router"; + +import { + loaderNamedParams +} from "."; + +import useGithubFetcher from "../../hooks/useGithubFetcher"; + + + +/** + * + * @category Parameters + * @since 0.13.0 + */ +export interface githubLoaderNamedParams extends loaderNamedParams { + + /** + * Route URL Parameters. + */ + params: Params +} + + +/** + * + * This loader uses a {@link useGithubFetcher | Github backend} to fetch both + * the data and metadata. + * + * @summary Github loader that fetches both Data and Metadata. + * + * @category Loader + * @expandType githubLoaderNamedParams + * @since 0.13.0 + */ +const githubLoader = async ({ + baseURL, + request, + params +}: githubLoaderNamedParams): Promise => { + + const response = await useGithubFetcher({ + url: request.url, + baseURL: baseURL, + params: params, + signal: request.signal, + }) + + return await response.clone().text(); + +} + +export default githubLoader; diff --git a/src/App/pageLoaders/index.ts b/src/App/pageLoaders/index.ts new file mode 100644 index 00000000..a03161e1 --- /dev/null +++ b/src/App/pageLoaders/index.ts @@ -0,0 +1,27 @@ +import { + HTTPNamedParams +} from "../../functions/http" + + + +/** + * Named parameters for route loaders. + * + * @summary Route Loader Params + * + * @category Params + * @since 0.13.0 + */ +export interface loaderNamedParams { + + /** + * {@inheritDoc HTTPNamedParams.url} + */ + baseURL: HTTPNamedParams['url'] + + /** + * Request object for loader. + */ + request: Request + +} diff --git a/src/App/providers/__test__/unit/backend.test.tsx b/src/App/providers/__test__/unit/backend.test.tsx new file mode 100644 index 00000000..a8aecd9e --- /dev/null +++ b/src/App/providers/__test__/unit/backend.test.tsx @@ -0,0 +1,52 @@ +import { createRoutesStub, Outlet } from "react-router"; +import { BackendProvider, useBackendProvider } from "../../backend"; +import { render } from "@testing-library/react"; + + +describe("Backend Provider", () => { + + + test("has url", () => { + + const InnerComponent = () => { + + const provider = useBackendProvider(); + + return ( + <> + {provider.url &&

exists

} + + ); + }; + + + const Stub = createRoutesStub([ + { + Component: () => { + return ( + + + + ); + }, + handle: { + backend_url: "https://some-value" + }, + children: [ + { + path: "/", + Component: InnerComponent + } + ] + } + ]); + + + const rendered = render( + + ); + + expect(rendered.baseElement.innerHTML).toBe('

exists

') + }); + +}); diff --git a/src/App/providers/backend.tsx b/src/App/providers/backend.tsx new file mode 100644 index 00000000..3365800e --- /dev/null +++ b/src/App/providers/backend.tsx @@ -0,0 +1,135 @@ +import React, { + createContext, + useContext, + useEffect, + useState +} from "react"; + +import { + useMatches +} from "react-router"; + + + +/** + * Stores the URL of the backend for the current context. This location is the + * only location that is to be used to obtain the backend details. The intent + * is that everything that requires backend information will obtain it from + * this context. Access is via {@link useBackendProvider} + * + * @summary Backend Context + * + * @category Type + * @since 0.13.0 + */ +export type BackendContext = { + + /** + * Url to the backend + */ + url: string +} + + + +const backendContext = createContext({url: null}); + + + +/** + * @summary Props for the {@link BackendProvider} + * + * @category Props + * @since 0.13.0 + */ +export interface BackendProviderProps { + + /** + * The nodes to wrap in this provider. + */ + children: React.ReactNode +} + + + +/** + * This provider stores the {@link BackendContext | data} about the current backend. This provider is + * intended to be used so that every object under the route layout will use + * the details within this provider. For example: + * + * - Around a RouterProvider + * + * - Around a route layout. + * + * To use this provider {@link useBackendProvider} is available. + * + * @example + * + * ``` js + * + * ... + * + * return ( + * + * + * + * ); + * + * ... + * + * ``` + * + * @summary Backend context provider. + * + * @category Provider + * @expandType BackendProviderProps + * @since 0.13.0 + */ +export function BackendProvider({ + children +}: BackendProviderProps) { + + const routes = useMatches(); + + const [ url, setURL ] = useState(null); + + useEffect(() => { + + if( routes.length > 0 && url === null ) { + + for( let i = (routes.length - 1); i >= 0; i-- ) { + + if( ! Object(routes[i]).hasOwnProperty('handle') ) continue; + + if( ! Object(routes[i].handle).hasOwnProperty('backend_url') ) continue; + + setURL(routes[i].handle.backend_url); + + break; + } + } + }, []); + + + return ( + + {children} + + ); +} + + + +/** + * This hook obtains the values of the {@link BackendProvider}. + * + * @summary Hook to use BackendProvider + * + * @category Hook + * @since 0.13.0 + */ +export function useBackendProvider(): BackendContext { + + return useContext(backendContext); + +} diff --git a/src/App/router/__test__/unit/dynamicRouter.test.tsx b/src/App/router/__test__/unit/dynamicRouter.test.tsx new file mode 100644 index 00000000..882ec83f --- /dev/null +++ b/src/App/router/__test__/unit/dynamicRouter.test.tsx @@ -0,0 +1,337 @@ + +import dynamicRouter from "../../dynamicRouter"; +import { pageComponents } from "../.."; +import Base from "../../../../layouts/Base"; +import RouteErrorBoundary from "../../../../layouts/ErrorBoundary"; +import NotificationLayout from "../../../../layouts/Notifications"; +import UI from "../../../../layouts/ui"; +import PageContent from "../../../../layouts/PageContent"; + + + +// jest.mock("../../index", () => { +// const actual = jest.requireActual("../../index"); + +// let renderedRoutes = null; + +// const myRoutes = [ +// { +// index: true, +// Component: () => { + +// // const matches = useMatches(); + +// // useEffect(() => { + +// // renderedRoutes = matches; + +// // }, [ matches ]); + +// } + +// } +// ] + +// return { +// __esModule: true, +// ...actual, +// appRoutes: myRoutes, +// __mock: { +// appRoutes: myRoutes, +// renderedRoutes: renderedRoutes +// }, +// }; +// }); + + +const router = dynamicRouter(); + +const routes = router.routes; + + +describe("Error Boundary", () => { + + + // let MockApp = null + + // let renderedRoutes = null; + + // afterEach(() => { + + // jest.restoreAllMocks(); + + // MockApp = null + + // }); + + // beforeEach(() => { + + // const { __mock } = jest.requireMock("../../index"); + + // MockApp = __mock.appRoutes; + + // renderedRoutes = __mock.renderedRoutes; + + + + // }) + + const testParams = [ + { + name: 'Base - id', + value: routes[0].id, + expected: 'base' + }, + { + name: 'Base - action', + value: routes[0].action, + expected: undefined + }, + { + name: 'Base - Component', + value: routes[0].element.type, + expected: pageComponents['baseview'] + }, + { + name: 'Base - ErrorBoundary', + value: routes[0].errorElement.type, + expected: RouteErrorBoundary + }, + { + name: 'Base - HydrateFallback', + value: Object.hasOwn(routes[0], 'hydrateFallbackElement'), + expected: true + }, + { + name: 'Base - handle.base_url', + value: routes[0].handle, + expected: undefined + }, + { + name: 'Base - loader', + value: routes[0].loader, + expected: undefined + }, + { + name: 'Base - shouldRevalidate', + value: routes[0].shouldRevalidate, + expected: undefined + }, + { + name: 'Base - children', + value: routes[0].children.length, + expected: 3 + }, + + + { + name: 'Root Backend - id', + value: routes[0].children[2].id, + expected: 'root-backend' + }, + { + name: 'Root Backend - action', + value: routes[0].children[2].action, + expected: undefined + }, + { + name: 'Root Backend - Component', + value: routes[0].children[2].element.type, + expected: pageComponents['backend'] + }, + { + name: 'Root Backend - ErrorBoundary', + value: routes[0].children[2].errorElement, + expected: undefined + }, + { + name: 'Root Backend - handle.base_url', + value: routes[0].children[2].handle, + expected: { + backend_url: window.env.API_URL + } + }, + { + name: 'Root Backend - HydrateFallback', + value: routes[0].children[2].hydrateFallbackElement, + expected: undefined + }, + { + name: 'Root Backend - loader', + value: routes[0].children[2].loader, + expected: undefined + }, + { + name: 'Root Backend - shouldRevalidate', + value: routes[0].children[2].shouldRevalidate, + expected: undefined + }, + { + name: 'Root Backend - children', + value: routes[0].children[2].children.length, + expected: 1 + }, + + + + + { + name: 'Notification Provider - id', + value: routes[0].children[2].children[0].id, + expected: 'notifications' + }, + { + name: 'Notification Provider - action', + value: routes[0].children[2].children[0].action, + expected: undefined + }, + { + name: 'Notification Provider - Component', + value: routes[0].children[2].children[0].element.type, + expected: NotificationLayout + }, + { + name: 'Notification Provider - ErrorBoundary', + value: routes[0].children[2].children[0].errorElement, + expected: undefined + }, + { + name: 'Notification Provider - handle.base_url', + value: routes[0].children[2].children[0].handle, + expected: undefined + }, + { + name: 'Notification Provider - HydrateFallback', + value: routes[0].children[2].children[0].hydrateFallbackElement, + expected: undefined + }, + { + name: 'Notification Provider - loader', + value: routes[0].children[2].children[0].loader, + expected: undefined + }, + { + name: 'Notification Provider - shouldRevalidate', + value: routes[0].children[2].children[0].shouldRevalidate, + expected: undefined + }, + { + name: 'Notification Provider - children', + value: routes[0].children[2].children[0].children.length, + expected: 1 + }, + + + + + { + name: 'UI - id', + value: routes[0].children[2].children[0].children[0].id, + expected: 'UI' + }, + { + name: 'UI - action', + value: routes[0].children[2].children[0].children[0].action, + expected: undefined + }, + { + name: 'UI - Component', + value: routes[0].children[2].children[0].children[0].element.type, + expected: UI + }, + { + name: 'UI - ErrorBoundary', + value: routes[0].children[2].children[0].children[0].errorElement.type, + expected: RouteErrorBoundary + }, + { + name: 'UI - handle.base_url', + value: routes[0].children[2].children[0].children[0].handle, + expected: undefined + }, + { + name: 'UI - HydrateFallback', + value: Object.hasOwn(routes[0].children[2].children[0].children[0], 'hydrateFallbackElement'), + expected: true + }, + { + name: 'UI - loader', + value: Object.hasOwn(routes[0].children[2].children[0].children[0], 'loader'), + expected: true + }, + { + name: 'UI - shouldRevalidate', + value: Object.hasOwn(routes[0].children[2].children[0].children[0], 'shouldRevalidate'), + expected: true + }, + { + name: 'UI - children', + value: routes[0].children[2].children[0].children[0].children.length, + expected: 1 + }, + + + + { + name: 'page - id', + value: routes[0].children[2].children[0].children[0].children[0].id, + expected: 'page' + }, + { + name: 'page - action', + value: routes[0].children[2].children[0].children[0].children[0].action, + expected: undefined + }, + { + name: 'page - Component', + value: routes[0].children[2].children[0].children[0].children[0].element.type, + expected: PageContent + }, + { + name: 'page - ErrorBoundary', + value: routes[0].children[2].children[0].children[0].children[0].errorElement, + expected: undefined + }, + { + name: 'page - handle.base_url', + value: routes[0].children[2].children[0].children[0].children[0].handle, + expected: undefined + }, + { + name: 'page - HydrateFallback', + value: Object.hasOwn(routes[0].children[2].children[0].children[0].children[0], 'hydrateFallbackElement'), + expected: true + }, + { + name: 'page - loader', + value: routes[0].children[2].children[0].children[0].children[0].loader, + expected: undefined + }, + { + name: 'page - shouldRevalidate', + value: routes[0].children[2].children[0].children[0].children[0].shouldRevalidate, + expected: undefined + }, + { + name: 'page - children', + value: routes[0].children[2].children[0].children[0].children[0].children, + expected: undefined + }, + + ] + + describe("default Routes", () => { + + + test.each(testParams)( + "Route - $name", + ({value, expected}) => { + + + expect(value).toEqual(expected) + + }); + }); + + test.skip("Render checks", () => {}); +}); diff --git a/src/App/router/__test__/unit/routesFromObject.test.ts b/src/App/router/__test__/unit/routesFromObject.test.ts new file mode 100644 index 00000000..48f32ba3 --- /dev/null +++ b/src/App/router/__test__/unit/routesFromObject.test.ts @@ -0,0 +1,355 @@ +import { pageActions, pageComponents, pageLoaders } from "../.."; +import { RouteDescription } from "../../../../types/backend/apiMetadata/RouteDescriptions"; +import { routesFromObject } from "../../routesFromObject"; + + +describe("routesFromObject", () => { + + const RouteObjectValidActions: Array<{ + name: string, + routes: Array + }> = [ + { + name: "Action - api", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + action: "api" + }] + } + ] + + const RouteObjectValidComponents: Array<{ + name: string, + routes: Array + }> = [ + { + name: "Component - Backend", + routes: [{ + handle: { + backend_url: "a value" + }, + component: 'backend' + }] + }, + { + name: "Component - Base", + routes: [{ + component: 'baseview' + }] + }, + { + name: "Component - Detail", + routes: [{ + component: 'detail' + }] + }, + { + name: "Component - History", + routes: [{ + component: 'history' + }] + }, + { + name: "Component - Redirect", + routes: [{ + component: 'redirect', + handle: { + url_redirect: "a value" + }, + }] + }, + { + name: "Component - List", + routes: [{ + component: 'list' + }] + }, + { + name: "Component - Markdown", + routes: [{ + component: 'markdown' + }] + }, + { + name: "Component - Settings", + routes: [{ + component: 'settings' + }] + }, + { + name: "Component - Ticket", + routes: [{ + component: 'ticket' + }] + } + ] + + const RouteObjectValidLoaders: Array<{ + name: string, + routes: Array + }> = [ + { + name: "Loader - Django", + routes: [{ + loader: 'django' + }] + }, + { + name: "Loader - Django", + routes: [{ + loader: 'django' + }] + }, + { + name: "Loader - Django Metadata", + routes: [{ + loader: 'django_metadata' + }] + }, + { + name: "Loader - Django Root Metadata", + routes: [{ + loader: 'django_root_metadata' + }] + }, + { + name: "Loader - Github", + routes: [{ + loader: 'github' + }] + }, + ] + + + const RouteObjectNoErrors: Array<{ + name: string, + routes: Array + }> = [ + { + name: "simple root", + routes: [{ + id: "root", + path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + }] + }, + { + name: "root with index", + routes: [{ + id: "root", + path: "/", + // revalidate: false, + // hydrate: "loader", + children: [ + { + index: true + } + ] + }] + }, + ...RouteObjectValidActions, + ...RouteObjectValidComponents, + ...RouteObjectValidLoaders, + { + name: "root with children", + routes: [{ + id: "root", + path: "/", + // revalidate: false, + // hydrate: "loader", + children: [ + { + handle: { + backend_url: "a value" + }, + children: [] + }, + ...(RouteObjectValidActions.map(({name, routes}) => { return routes[0]; })), + ...(RouteObjectValidComponents.map(({name, routes}) => { return routes[0]; })), + ...(RouteObjectValidLoaders.map(({name, routes}) => { return routes[0]; })), + // ...RouteObjectValidComponents, + // ...RouteObjectValidLoaders, + ] + }] + }, + { + name: "hydrate - loader", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + hydrate: "loader", + // children: [] + }] + }, + { + name: "revalidate - true", + routes: [{ + // id: "root", + // path: "/", + revalidate: true, + // hydrate: "loader", + // children: [] + }] + }, + { + name: "revalidate - false", + routes: [{ + // id: "root", + // path: "/", + revalidate: false, + // hydrate: "loader", + // children: [] + }] + }, + ] + + + const RouteObjectExpectErrors: Array<{ + name: string, + routes: Array + }> = [ + { + name: "component specified with handle.backend_url. Only handle.backend_url required.", + routes: [{ + id: "root", + path: "/", + handle: { + backend_url: "a value" + }, + component: "redirect" + }] + }, + { + name: "Action - _. Invalid value must fail", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + action: "I dont exist" + }] + }, + { + name: "Component - _. Invalid value must fail", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + component: "I dont exist" + }] + }, + { + name: "Component - Backend, handle.backend_url is required.", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + component: 'backend' + }] + }, + { + name: "Component - Redirect. handle.url_redirect is required.", + routes: [{ + component: 'redirect' + }] + }, + { + name: "hydrate - _, Non-existent value", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + hydrate: "some random val", + // children: [] + }] + }, + { + name: "Loader - _. Invalid value must fail", + routes: [{ + // id: "root", + // path: "/", + // revalidate: false, + // hydrate: "loader", + // children: [] + loader: "I dont exist" + }] + }, + ] + + + const AllRouteObjects = [ + ...RouteObjectNoErrors, + ...RouteObjectExpectErrors, + ] + + + describe("Sanity - Test failure means the object is not tested as part of route", () => { + + test("Key length - pageActions", () => { + + expect(Object.keys(pageActions)).toHaveLength(1); + + }); + + + test("Key length - pageComponents", () => { + + expect(Object.keys(pageComponents)).toHaveLength(9); + + }); + + + test("Key length - pageLoaders", () => { + + expect(Object.keys(pageLoaders)).toHaveLength(4); + + }); + + }); + + + describe("No errors expected", () => { + + test.each(RouteObjectNoErrors)( + "$name", ({routes}) => { + + + expect( + () => routesFromObject({routes: routes}) + ).not.toThrow(Error); + }); + + }); + + describe("Errors expected", () => { + + test.each(RouteObjectExpectErrors)( + "$name", async ({routes}) => { + + + expect( + () => routesFromObject({routes: routes}) + ).toThrow(Error); + + // expect(() => routesFromObject({ routes })).toThrow(Error); + }); + + }); + + + // ToDo: write tests to ensure routes render correctly. i.e. the description adds things in right location + describe.skip("Correct Objects Render", () => {}); + +}); diff --git a/src/App/router/dynamicRouter.ts b/src/App/router/dynamicRouter.ts new file mode 100644 index 00000000..25c5bb95 --- /dev/null +++ b/src/App/router/dynamicRouter.ts @@ -0,0 +1,133 @@ +import { + createBrowserRouter, + RouteObject, +} from "react-router" + +import { + appRoutes, + pageComponents, + pageLoaders +} from "." + +import { + routesFromObject +} from "./routesFromObject" + +import + StateSplash, + { + StateIcon +} from "../../components/StateSplash" + +import useDjangoFetcher from "../../hooks/useDjangoFetcher" + +import NotificationLayout from "../../layouts/Notifications" +import PageContent from "../../layouts/PageContent" +import RouteErrorBoundary from "../../layouts/ErrorBoundary" +import UI from "../../layouts/ui" + + + +/** + * This function builds the UI routes from an object. + * + * @summary Dynamic Router + * + * @category Function + * @since 0.13.0 + */ +const dynamicRouter = () => { + + const routes: RouteObject[] = [ + { + id: "base", + Component: pageComponents['baseview'], + ErrorBoundary: RouteErrorBoundary, + HydrateFallback: () => StateSplash({titleText: "Loading UI", icon: StateIcon.loading }), + children: [ + /** + * Note: For a site that requires auth, login redirect cant + * be part of the dynamic routes. This is because the error + * boundary that uses a redirect will not have access to + * the dynamic routes until after they are loaded. + */ + { + id: "login", + path: "/login", + Component: pageComponents['redirect'], + handle: { + url_redirect: `${window.env.API_URL}/auth/login` + } + }, + { + id: "logout", + path: "/logout", + Component: pageComponents['redirect'], + handle: { + url_post: `${window.env.API_URL}/auth/logout`, + url_redirect: `${window.env.API_URL}/auth/login` + } + }, + { + id: "root-backend", + Component: pageComponents['backend'], + handle: { + backend_url: window.env.API_URL + }, + children: [ + { + id: "notifications", + Component: NotificationLayout, + children: [ + { + id: "UI", + Component: UI, + loader: (params) => pageLoaders['django_root_metadata']({ + ...params, + baseURL: window.env.API_URL, + }), + shouldRevalidate: () => false, + ErrorBoundary: RouteErrorBoundary, + HydrateFallback: () => StateSplash({titleText: "Loading UI", icon: StateIcon.loading }), + children: [ + { + id: "page", + Component: PageContent, + HydrateFallback: () => StateSplash({titleText: "Loading Page Content", icon: StateIcon.loading }), + } + ] + } + ] + } + ] + }, + ] + } + ]; + + + return createBrowserRouter( + routes, + { + basename: "", + async patchRoutesOnNavigation({ patch, path, signal, matches }) { + + if( matches.length === 0 ) { + + const { apiMetadata, apiData } = await useDjangoFetcher({ + url: '/', + onlyMetadata: true, + signal: signal + }); + + const data = await apiMetadata.clone().json(); + + patch("page", routesFromObject({routes: appRoutes })); + + } + }, + } + ) +} + +export default dynamicRouter; diff --git a/src/App/router/index.ts b/src/App/router/index.ts new file mode 100644 index 00000000..419544a1 --- /dev/null +++ b/src/App/router/index.ts @@ -0,0 +1,276 @@ + +import djangoLoader from "../pageLoaders/django" +import djangoMetadataLoader from "../pageLoaders/djangoMetadata" +import djangoRootMetadataLoader from "../pageLoaders/djangoRootMetadata" +import githubLoader from "../pageLoaders/github" + +import { + APISubmitAction +} from "../../components/DisplayFields" + +import Detail from "../../layout/Detail" +import History from "../../layout/history" +import List from "../../layout/List" +import Settings from "../../layout/Settings" +import Ticket from "../../layout/Ticket" + +import BackendLayout from "../../layouts/Backend" +import Base from "../../layouts/Base" +import Markdown from "../../layout/Markdown" +import Redirect from "../../layouts/Redirect" + +import { + RouteDescription, +} from "../../types/backend/apiMetadata/RouteDescriptions" + + + +/** + * @since 0.13.0 + */ +export const pageActions = { + api: APISubmitAction +} + + + +/** + * @since 0.13.0 + */ +export const pageComponents = { + backend: BackendLayout, + baseview: Base, + detail: Detail, + history: History, + redirect: Redirect, + list: List, + markdown: Markdown, + settings: Settings, + ticket: Ticket +}; + + + +/** + * @since 0.13.0 + */ +export const pageLoaders = { + django: djangoLoader, + django_metadata: djangoMetadataLoader, + django_root_metadata: djangoRootMetadataLoader, + github: githubLoader +}; + + + +/** + * @since 0.13.0 + */ +export const appRoutes: Array = [{ + id: "root", + path: "/", + revalidate: false, + hydrate: "loader", + children: [ + { + path: "settings", + component: "settings", + loader: 'django' + }, + { + path: ":module", + children: [ + { + path: "entity", + children: [ + { + path: ":model", + children: [ + { + index: true, + component: "list", + loader: "django", + }, + { + path: "add", + component: "detail", + action: "api", + loader: "django_metadata", + revalidate: false + + }, + { + path: ":pk", + component: "detail", + action: "api", + loader: "django", + revalidate: false + + } + ] + } + ] + }, + { + path: "git_repository", + children: [ + { + index: true, + component: "list", + loader: "django" + }, + { + path: "add", + component: "detail", + loader: "django_metadata", + action: "api", + revalidate: false + }, + { + path: ":pk", + component: "detail", + loader: "django", + action: "api", + revalidate: false + } + ] + }, + { + id: "tickets", + path: "ticket", + children: [ + { + path: ":model", + children: [ + { + index: true, + component: "list", + loader: "django", + }, + { + path: "add", + component: "ticket", + action: "api", + loader: "django_metadata" + }, + { + path: ":pk", + component: "ticket", + action: "api", + loader: "django", + // shouldRevalidate: ({ currentParams, nextParams }) => { + + // const reValidate = ( + // currentParams.module !== nextParams.module || + // currentParams.model !== nextParams.model || + // currentParams.id !== nextParams.id + // ) + + // return reValidate + + // } + }, + ] + }, + { + path: ":pk", + children: [ + { + path: ":subModel", + children: [ + { + path: ":subModelPk", + action: "api", + revalidate: false, + children: [ + { + path: ":subSubModel", + action: "api", + revalidate: false, + } + ] + } + ] + } + ] + } + ] + }, + { + path: ":model", + children: [ + { + index: true, + component: "list", + loader: "django" + }, + { + path: "add", + component: "detail", + loader: "django_metadata", + action: "api", + revalidate: false + }, + { + path: ":pk", + children: [ + { + index: true, + component: "detail", + loader: "django", + action: "api", + }, + { + path: "history", + component: "history", + loader: "django" + }, + { + path: "ticket", + children: [ + { + path: ":ticket_sub_model", + action: "api", + revalidate: false, + children: [ + { + path: ":ticket_sub_model_pk", + component: "ticket", + loader: "django", + action: "api", + revalidate: false + } + ] + } + ] + }, + { + path: ":sub_model", + children: [ + { + index: true, + component: "list", + loader: "django", + action: "api", + revalidate: false + }, + { + path: ":sub_model_pk", + component: "detail", + loader: "django", + action: "api", + revalidate: false + } + ] + } + ] + }, + + ] + } + + ] + }, + + ] +}] diff --git a/src/App/router/routesFromObject.ts b/src/App/router/routesFromObject.ts new file mode 100644 index 00000000..b8145d82 --- /dev/null +++ b/src/App/router/routesFromObject.ts @@ -0,0 +1,267 @@ +import { + RouteObject +} from "react-router"; + +import { + pageActions, + pageComponents, + pageLoaders +} from "." + +import { + RouteDescription +} from "../../types/backend/apiMetadata/RouteDescriptions"; + +import + StateSplash, + { + StateIcon +} from "../../components/StateSplash" + + + +/** + * Dynamically build routes from a description. This description is done in + * such a way that the UI does not require any changes when the description is + * updated. + * + * **Note:** Specifying handle `backend_url` will force the component to be set + * to be set to {@link BackendLayout} + * + * @summary Dynamically build the routes The UI will use. + * + * @category Function + * @since 0.13.0 + */ +export function routesFromObject({ + routes, + baseURL = window.env.API_URL +}: { + /** + * UI Route object from {@link apiRootMetadata.routes} to use to create + * routes for the UI. + */ + routes: RouteDescription[], + + /** + * Base URL for the backend. + */ + baseURL?: string +}): RouteObject[] { + + const routesObject = routes; + + let builtRoutes = []; + + for(let route of routesObject) { + + let builtRoute = { + // id: undefined, + // path: undefined, + // Component: undefined, + // HydrateFallback: undefined, + middleware: [] + // loader: undefined, + // action: undefined, + // shouldRevalidate: undefined, + // children: [], + } + + let hasBackendURL: boolean = false + + if( Object.hasOwn( Object(route), 'handle' )) { + + if( Object.hasOwn( Object(route.handle), 'backend_url') ) { + + hasBackendURL = true; + + } + } + + let hasRedirectURL: boolean = false + + if( Object.hasOwn( Object(route), 'handle' )) { + + if( Object.hasOwn( Object(route.handle), 'url_redirect') ) { + + hasRedirectURL = true; + + } + } + + + for( let [key, value] of Object.entries( route )) { + + switch( key ) { + + case "action": + + if( ! Object.hasOwn(pageActions, String(value)) ) { + + throw Error(`Invalid page action provided. '${String(value)}' does not exist`) + + } + + + builtRoute['action'] = pageActions[String(value)] + + break; + + case "children": + + let backendURL = baseURL; + + if( hasBackendURL ) { + + backendURL = route.handle.backend_url; + + } + + builtRoute["children"] = routesFromObject({ routes: value, baseURL: backendURL }) + + break; + + case "component": + + if( hasBackendURL && String(value) !== 'backend' ) { + + throw Error('A component and a backendURL can not both be defined.'); + + } + + + if( ! hasBackendURL && String(value) === 'backend' ) { + + throw Error('handle backendURL must be supplied when component=backend.'); + + } + + + if( ! hasRedirectURL && String(value) === 'redirect' ) { + + throw Error('handle redirect_url must be supplied when component=backend.'); + + } + + + if( ! Object.hasOwn(pageComponents, String(value)) ) { + + throw Error(`Invalid page component provided. '${String(value)}' does not exist`) + } + + + builtRoute["Component"] = pageComponents[String(value)]; + + break; + + case "handle": + + + if( hasBackendURL ) { + + builtRoute["Component"] = pageComponents['backend']; + + } + + builtRoute["handle"] = value; + + break; + + case "hydrate": + + if( value === 'loader' ) { + + builtRoute["HydrateFallback"] = () => StateSplash({ + titleText: "Loading Data", + icon: StateIcon.loading + }); + + break; + } + + throw Error(`hydrate only accepts value 'loader'. Value '${String(value)}' does not exist`) + + + case "id": + + builtRoute["id"] = String(value); + + break; + + case "index": + + builtRoute["index"] = Boolean(value); + + break; + + case "loader": + + if( ! Object.hasOwn(pageLoaders, String(value)) ) { + + throw Error(`Invalid page loader provided. '${String(value)}' does not exist`) + } + + + if( String(value) === 'github' ) { + + + // if( ! hasBackendURL ) { + + // throw Error('Github loader can not be used without \ + // specifying dir_root handle') + + // } + + + builtRoute['loader'] = (params) => pageLoaders['github']({ + ...params, + baseURL: baseURL, + // dirRoot: route.handle.dir_root, + }) + + } else { + + builtRoute['loader'] = (params) => pageLoaders[String(value)]({ + ...params, + baseURL: baseURL, + }) + + } + + + break; + + case "path": + + builtRoute["path"] = String(value); + + break; + + case "revalidate": + + if( value === true ) { + + builtRoute["shouldRevalidate"] = () => true; + + } else if( value === false ) { + + builtRoute["shouldRevalidate"] = () => false; + + } + + break; + + // default: + + // builtRoute[key] = value; + + } + + }; + + builtRoutes.push( builtRoute ) + + }; + + return builtRoutes; +} diff --git a/src/__test__/unit/main.test.tsx b/src/__test__/unit/main.test.tsx new file mode 100644 index 00000000..7254bd90 --- /dev/null +++ b/src/__test__/unit/main.test.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; + + + +jest.mock("react-dom/client", () => ({ + createRoot: jest.fn(), +})); + + + +const MockApp = jest.fn(() => { + return ( + app was called + ); +}); + + + +jest.mock("../../App", () => ({ + __esModule: true, + default: MockApp, +})); + + + +describe("Entrypoint", () => { + + + test("Calls App", () => { + const render = jest.fn(); + + (ReactDOM.createRoot as jest.Mock).mockReturnValue({ + render, + }); + + jest.isolateModules(() => { + require("../../main"); + }); + + expect(render).toHaveBeenCalledTimes(1); + + }); + + + test("Renders App Component", () => { + const render = jest.fn(); + + (ReactDOM.createRoot as jest.Mock).mockReturnValue({ + render, + }); + + jest.isolateModules(() => { + require("../../main"); + }); + + const element = render.mock.calls[0][0]; + + expect(element.props.children.type).toBe(MockApp); + }); + + + test("Is strict mode", () => { + const render = jest.fn(); + + (ReactDOM.createRoot as jest.Mock).mockReturnValue({ + render, + }); + + jest.isolateModules(() => { + require("../../main"); + }); + + const element = render.mock.calls[0][0]; + + expect(element.type).toBe(React.StrictMode); + }); +}); diff --git a/src/classes/Exceptions.js b/src/classes/Exceptions.js deleted file mode 100644 index 9ff63a0d..00000000 --- a/src/classes/Exceptions.js +++ /dev/null @@ -1,26 +0,0 @@ - -export class ResponseException extends Error { - - - constructor(response) { - - super(response); - - this.name = this.constructor.name; - - this.message = response.statusText; - - this.status = response.status; - - this.response = response - - } - - - toString() { - - return `message: ${this.message}, code: ${this.status}` - - } - -} diff --git a/src/classes/Exceptions.ts b/src/classes/Exceptions.ts new file mode 100644 index 00000000..5bf67d31 --- /dev/null +++ b/src/classes/Exceptions.ts @@ -0,0 +1,108 @@ + + +/** + * This Exception is the base exception for ALL http exceptions. You should not + * use this exception directly and instead use one of the predefined ones. + * + * @see HTTPNotAuthenticated + * + * @summary Base class for all HTTP Exceptions. + * + * @category Exception + * @since 0.13.0 + */ +export class HttpError extends Error { + + /** + * HTTP response that caused the error. + */ + response: Response; + + /** + * @param response - The HTTP response that was returned from the request made. + */ + constructor(response: Response) { + + super(`HTTP ${response.status}: ${response.statusText}`); + + this.name = this.constructor.name; + + this.response = response; + + } +} + + + +/** + * This exception is intended to be thrown as soon as a HTTP request returns + * a status of `401`. In the case of this exception, it must **only** be caught + * within the root ErrorBoundary + * + * @summary User is not authenticated. + * + * @category Exception + * @since 0.13.0 + * @see {@link httpRequest} + * + */ +export class HTTPNotAuthenticated extends HttpError {} + + + +/** + * This exception is intended to be thrown as soon as a HTTP request returns + * a status of `403`. In the case of this exception, it must be caught + * within the view ErrorBoundary so it can be displayed as an + * Alert. + * + * @summary User is not authorised to perform the action. + * + * @category Exception + * @since 0.13.0 + * @see {@link httpRequest} + */ +export class HTTPNotAuthorised extends HttpError {} + + + +/* istanbul ignore next */ +/** + * + * @category Exception + * @since ... + * + * @deprecated Since 0.13.0, use {@link HttpError} instead. + */ +export class ResponseException extends Error { + + /** + * + * @param response - http response object + */ + constructor(response) { + + super(response); + + this.name = this.constructor.name; + + this.message = response.statusText; + + this.status = response.status; + + this.response = response + + } + + + /** + * + * @returns string + */ + toString() { + + return `message: ${this.message}, code: ${this.status}` + + } + +} diff --git a/src/classes/__test__/unit/Exceptions.test.ts b/src/classes/__test__/unit/Exceptions.test.ts new file mode 100644 index 00000000..d7ae401f --- /dev/null +++ b/src/classes/__test__/unit/Exceptions.test.ts @@ -0,0 +1,99 @@ +import { HttpError, HTTPNotAuthenticated, HTTPNotAuthorised } from "../../Exceptions"; + + +describe("HTTP", () => { + + const HTTPExceptions = [ + { + "exception": HTTPNotAuthenticated, + "status": 401, + "statusText": "Not Authenticated" + }, + { + "exception": HTTPNotAuthorised, + "status": 403, + "statusText": "Not Authorized" + } + ] + + + describe("Instance of Error", () => { + + test.each(HTTPExceptions)( + "$exception.name", + ({ exception, status, statusText}) => { + + const response = new Response(null, { + status: status, + statusText: statusText, + }); + + const err = new exception(response); + + expect(err).toBeInstanceOf(Error); + }); + + }); + + + describe("Instance of HttpError", () => { + + test.each(HTTPExceptions)( + " - $exception.name", + ({ exception, status, statusText}) => { + + const response = new Response(null, { + status: status, + statusText: statusText, + }); + + const err = new exception(response); + + expect(err).toBeInstanceOf(HttpError); + + }); + + }); + + describe("Property Value", () => { + + describe("response", () => { + + test.each(HTTPExceptions)( + "$exception.name", + ({ exception, status, statusText}) => { + + const response = new Response(null, { + status: status, + statusText: statusText, + }); + + const err = new exception(response); + + expect(err.response).toBe(response); + }); + + }); + + + describe("message", () => { + + test.each(HTTPExceptions)( + "property message value - $exception.name", + ({ exception, status, statusText}) => { + + const response = new Response(null, { + status: status, + statusText: statusText, + }); + + const err = new exception(response); + + expect(err.message).toBe(`HTTP ${status}: ${statusText}`); + }); + + }); + }); + + +}); diff --git a/src/components/DataSet.tsx b/src/components/DataSet.tsx index ff3821fb..7d851379 100644 --- a/src/components/DataSet.tsx +++ b/src/components/DataSet.tsx @@ -43,7 +43,7 @@ import { import FieldData from "../functions/FieldData"; import IconLoader from "./IconLoader"; import URLSanitize from "../functions/URLSanitize"; -import { SearchIcon } from "@patternfly/react-icons"; +import StateSplash, { StateIcon } from "./StateSplash"; /** @@ -570,16 +570,11 @@ export const DataSetList = < }); const emptyState = ( - - - There are no results. - - + ); if( isDraggable ) { diff --git a/src/components/NotificationDrawer.tsx b/src/components/NotificationDrawer.tsx index 9e80ca94..c0ad8586 100644 --- a/src/components/NotificationDrawer.tsx +++ b/src/components/NotificationDrawer.tsx @@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, + useRef, useState } from "react"; @@ -37,13 +38,75 @@ import { /** + * This context is for notifications. As notifications are not mandatory, this + * object by default will return null. This enables the notifications feature + * to be turn "off." + * * @summary Notification Context * * @category Context * @expand * @since 0.9.0 */ -export const NotificationContext = createContext(null); +export const notificationContext = createContext({ + alerts: undefined, + setAlerts: () => undefined, + alertTimeout: undefined, + drawerRef: undefined, + isNotificationsOpen: undefined, + maxDisplayed: undefined, + notifications: undefined, + overflowMessage: undefined, + setNotificationsOpen: () => undefined, + setNotifications: () => undefined, + setOverflowMessage: () => undefined, +}); + + + +/** + * + * @category Context + * @since 0.13.0 + */ +export const NotificationContextProvider = ({ + children +}): React.JSX.Element => { + + const [ alerts, setAlerts ] = useState([]) + + const alertTimeout = 8000; + + const drawerRef = useRef(null); + + const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); + + const maxDisplayedAlerts = 2; + + const [maxDisplayed, setMaxDisplayed] = useState(maxDisplayedAlerts); + + const [overflowMessage, setOverflowMessage] = useState(''); + + const [notifications, setNotifications] = useState([]); + + return ( + + {children} + + ); +}; @@ -52,7 +115,7 @@ export const NotificationContext = createContext(null) * alerting. * * Usage of this component requires that you have declared a context provider - * using {@link NotificationContext}. + * using {@link notificationContext}. * * @summary Alerting and Notifications drawer * @@ -67,9 +130,10 @@ export const Notifications = (): React.JSX.Element => { drawerRef, isNotificationsOpen, setNotificationsOpen, maxDisplayed, + overflowMessage, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); const { markNotificationRead } = useNotificationActions(); @@ -90,6 +154,15 @@ export const Notifications = (): React.JSX.Element => { }; + const onAlertGroupOverflowClick = () => { + + setAlerts([]); + + setNotificationsOpen(true); + + } + + const onDropdownSelect = () => { setOpenDropdownKey(null); }; @@ -152,100 +225,95 @@ export const Notifications = (): React.JSX.Element => { return ( - <> - - + setNotificationsOpen(false)} > - setNotificationsOpen(false)} + !isOpen && setOpenDropdownKey(null)} + toggle={toggleRef => + onDropdownToggle('dropdown-toggle-id-0')} + aria-label="Notification drawer actions" + icon={} + /> + } > - !isOpen && setOpenDropdownKey(null)} - toggle={toggleRef => - onDropdownToggle('dropdown-toggle-id-0')} - aria-label="Notification drawer actions" - icon={} - /> - } - > - {notificationDrawerActions} - - - - - {notifications.length !== 0 && - - {notifications.map(({key, variant, title, srTitle, description, timestamp}, index) => - {notificationDrawerActions} + + + + + {notifications.length !== 0 && + + {notifications.map(({key, variant, title, srTitle, description, timestamp}, index) => + + - !isOpen && setOpenDropdownKey(null)} + toggle={toggleRef => + + onDropdownToggle(key) + } + aria-label={`Notification ${index + 1} actions`} + icon={} + /> + } > - !isOpen && setOpenDropdownKey(null)} - toggle={toggleRef => - - onDropdownToggle(key) - } - aria-label={`Notification ${index + 1} actions`} - icon={} - /> - } - > - {notificationDrawerDropdownItems(key)} - - - - {description} - - )} - } - {notifications.length === 0 && - - There are currently no notifications. - } - - - + {notificationDrawerDropdownItems(key)} + + + + {description} + + )} + } + {notifications.length === 0 && + + There are currently no notifications. + } + + ); }; @@ -288,7 +356,19 @@ export interface NotificationContextValue { isNotificationsOpen: boolean; maxDisplayed: number; notifications: Notification[]; + overflowMessage: string; setNotificationsOpen: Function; setNotifications: Function; setOverflowMessage: Function } + + +/** + * + * @category Hook + * @since 0.13.0 + */ +export const useNotificationContext = (): NotificationContextValue => { + + return useContext(notificationContext); +}; diff --git a/src/components/StateSplash.tsx b/src/components/StateSplash.tsx new file mode 100644 index 00000000..8b0f7304 --- /dev/null +++ b/src/components/StateSplash.tsx @@ -0,0 +1,245 @@ +import { + useState +} from "react"; + +import { + CodeBlock, + CodeBlockCode, + EmptyState, + EmptyStateBody, + EmptyStateFooter, + EmptyStateStatus, + EmptyStateVariant, + ExpandableSection, + Spinner, +} from "@patternfly/react-core"; + +import { + CubesIcon, + RhUiErrorFillIcon, + RhUiWarningFillIcon, + SearchIcon +} from "@patternfly/react-icons"; + + +// import CubesIconsvg from "@patternfly/react-icons/dist/static/cubes.svg" + + + +const icons = { + cubes: CubesIcon, + danger: RhUiErrorFillIcon, + search: SearchIcon, + spinner: Spinner, + warning: RhUiWarningFillIcon, +} + + + +/** + * Icon selections for {@link StateSplash} + * + * @summary Available State Icons + * + * @category Enum + * @since 0.13.0 + */ +export enum StateIcon { + + /** + * Denotes an error. + */ + danger = 'danger', + + /** + * Use for state that is empty. + */ + empty = 'cubes', + + /** + * Denotes loading. + */ + loading = 'spinner', + + /** + * Denotes Search related. + */ + search = 'search', + + /** + * Denotes a warning. + */ + warning = 'warning' + +} + + + +/** + * These props are for {@link StateSplash}. + * + * @summary Props for {@link StateSplash} + * + * @category Props + * @expandType StateIcon + * @since 0.13.0 + */ +export interface StateProps { + + /** + * Text to use as a description + */ + body?: string + /** + * Text to use for the state title. + */ + titleText: string + + /** + * Icon to display. There are occasions, that regardless of the value + * supplied to this prop, its value will be automatically set, they are: + * + * - {@link stackTrace} has a value, this to + * {@link EmptyStateStatus.danger} + * + */ + icon?: StateIcon + + /** + * Stack trace message. When this prop is provided with a value, the icon + * is set to {@link StateIcon.danger} + */ + stackTrace?: string + + /** + * Type of State. There are occasions, that regardless of the value + * supplied to this prop, its value will be automatically set, they are: + * + * - {@link icon} has been set to {@link StateIcon.danger} will set this to + * {@link EmptyStateStatus.danger} + * + * - {@link icon} has been set to {@link StateIcon.warning} will set this to + * {@link EmptyStateStatus.warning} + * + * @expandType EmptyStateStatus + */ + status?: EmptyStateStatus +} + + + +/** + * A Splash for displaying the status of state. State in this case is + * the object from a backend. This splash provides a visual representation as + * well as being a placeholder for state. + * + * It is not the intent that this component be used for opportunistic UI, That + * is what skeletons are for. State splash should only be used for route + * hydration or as the final result of state. i.e. Nothing was found, error + * occurred etc. + * + * @example + * + * Example of loading spinner. + * + * ``` js + * + * + * + * ``` + * + * Example of an error. + * + * ``` js + * + * + * + * ``` + * + * @summary State splash + * + * @category Component + * @expandType StateProps + * @since 0.13.0 + */ +const StateSplash = ({ + titleText = "Empty", + body = null, + icon = StateIcon.empty, + stackTrace = null, + status = null +}: StateProps): React.JSX.Element => { + + const [isExpanded, setIsExpanded] = useState(false); + + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + + if( stackTrace ) { + + icon = StateIcon.danger + } + + + if( icon === StateIcon.danger ) { + + status = EmptyStateStatus.danger; + + } else if( icon === StateIcon.warning ) { + + status = EmptyStateStatus.warning; + + } + + + return ( + + + {(body || stackTrace) && + {body} +
+ { stackTrace && + + + + {stackTrace} + + + + } + + } + + + + + + + ); +} + +export default StateSplash diff --git a/src/components/__test__/unit/NotificationDrawer.test.js b/src/components/__test__/unit/NotificationDrawer.test.js index a38be402..53fb3450 100644 --- a/src/components/__test__/unit/NotificationDrawer.test.js +++ b/src/components/__test__/unit/NotificationDrawer.test.js @@ -87,18 +87,17 @@ import { MemoryRouter, } from 'react-router' -// import Detail from "../../Detail" -// import RootLayout from "../../Root" -// import { UserProvider } from "../../../hooks/UserContext" -// import { Page } from "@patternfly/react-core"; -import { NotificationContext } from "../../NotificationDrawer"; +import { notificationContext, NotificationContextProvider, useNotificationContext } from "../../NotificationDrawer"; import Header from "../../page/Header"; import { UserProvider } from "../../../hooks/UserContext"; import { useNotificationActions } from "../../../hooks/useNotificationActions"; import { AlertVariant } from "@patternfly/react-core"; -import RootLayout from "../../../layout/Root"; +import UI from "../../../layouts/ui"; import userEvent from "@testing-library/user-event"; +import NotificationLayout from "../../../layouts/Notifications"; +import PageContent from "../../../layouts/PageContent"; +import { NavbarContextProvider } from "../../page/Navbar"; // import List from "../../../layout/List"; @@ -177,7 +176,24 @@ describe("NotificationDrawer", () => { }; - test("Has action menu", () => { + const rootMetadataLoader = () => { + + const optionsFilePath = path.join(baseDir, 'OPTIONS.json') + + const rawOptions = fs.readFileSync(optionsFilePath, 'utf8') + + const jsonOptions = JSON.parse(rawOptions) + + + return { + page_data: null, + metadata: jsonOptions + } + + } + + + test("Has action menu", async () => { const loader = async () => { @@ -197,9 +213,10 @@ describe("NotificationDrawer", () => { drawerRef, isNotificationsOpen, setNotificationsOpen, maxDisplayed, + overflowMessage, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -207,45 +224,59 @@ describe("NotificationDrawer", () => { setNotificationsOpen(true) - }, [isNotificationsOpen]); + }, []); return (text {isNotificationsOpen}); }; - const Stub = createRoutesStub([ - { - Component: RootLayout, - children: [ - { - path: objectMetadata.urls.self, - Component: InnerComponent, - } - ], - } - ]); - - class TestErrorBoundary extends React.Component { - state = { error: null }; - - static getDerivedStateFromError(error) { - return { error }; - } + // const Stub = createRoutesStub([ + // { + // Component: UI, + // children: [ + // { + // path: objectMetadata.urls.self, + // Component: InnerComponent, + // } + // ], + // } + // ]); - render() { - if (this.state.error) { - throw this.state.error; + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] + } + ] } + ]); - return this.props.children; - } - } const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + + const notifications = rendered.baseElement.querySelector('div[class="pf-v6-c-notification-drawer__header"]'); const actionButton = notifications.querySelector('button[class="pf-v6-c-menu-toggle pf-m-plain"]') @@ -304,7 +335,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -312,7 +343,7 @@ describe("NotificationDrawer", () => { setNotificationsOpen(true) - }, [isNotificationsOpen]); + }, []); return (text {isNotificationsOpen}); }; @@ -320,23 +351,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notificationDrawerHeader = rendered.baseElement.querySelector('div[class="pf-v6-c-notification-drawer__header"]'); const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); @@ -388,7 +434,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -404,23 +450,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notificationDrawerHeader = rendered.baseElement.querySelector('div[class="pf-v6-c-notification-drawer__header"]'); // const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); @@ -478,7 +539,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -494,23 +555,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); @@ -564,7 +640,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -580,23 +656,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); @@ -629,7 +720,7 @@ describe("NotificationDrawer", () => { }); - test("Has action menu", () => { + test("Has action menu", async () => { const loader = async () => { @@ -651,7 +742,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -667,23 +758,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); const notification = notifications.querySelector('li'); @@ -702,7 +808,7 @@ describe("NotificationDrawer", () => { }); - test("Has a title", () => { + test("Has a title", async () => { const loader = async () => { @@ -724,7 +830,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -740,23 +846,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); const notification = notifications.querySelector('li[class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-info"]'); @@ -773,7 +894,7 @@ describe("NotificationDrawer", () => { }); - test("Has a description", () => { + test("Has a description", async () => { const loader = async () => { @@ -795,7 +916,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -811,23 +932,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); const notification = notifications.querySelector('li[class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-info"]'); @@ -844,7 +980,7 @@ describe("NotificationDrawer", () => { }); - test("Has a date-time", () => { + test("Has a date-time", async () => { const loader = async () => { @@ -866,7 +1002,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -882,23 +1018,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const notifications = rendered.baseElement.querySelector('ul[class="pf-v6-c-notification-drawer__list"]'); const notification = notifications.querySelector('li[class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-info"]'); @@ -940,23 +1091,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'ul[class="pf-v6-c-alert-group pf-m-toast"]' + ); + + expect(notifications).not.toBeNull(); + + }); + const htmlElement = rendered.baseElement.querySelector('ul[class="pf-v6-c-alert-group pf-m-toast"]'); @@ -965,7 +1131,28 @@ describe("NotificationDrawer", () => { // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { + + expect(consoleErrorSpy).not.toHaveBeenCalled(); + + } + }); @@ -990,7 +1177,7 @@ describe("NotificationDrawer", () => { isNotificationsOpen, setNotificationsOpen, setNotifications, maxDisplayed - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -1004,23 +1191,38 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { - path: objectMetadata.urls.self, - Component: InnerComponent, + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] } - ], + ] } ]); - const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'div.pf-v6-c-notification-drawer__header' + ); + + expect(notifications).not.toBeNull(); + + }); + const htmlElement = rendered.baseElement.querySelector('div[id="notifications-drawer"]'); @@ -1040,59 +1242,57 @@ describe("NotificationDrawer", () => { describe("Notification Badge", () => { - test("Unread notifications badge indicator colour 'unread'", () => { - + test("Unread notifications badge indicator colour 'unread'", async () => { - const MockComponent = ({children}) => { - const alertTimeout = 8000; + const InnerComponent = () => { - const drawerRef = useRef(null); + const { setNotifications } = useNotificationContext() - const maxDisplayedAlerts = 2; + useEffect(() => { - const maxAlerts = 100; + setNotifications([unreadNotification]) - const minAlerts = 0; + }, []); + - const [ alerts, setAlerts ] = useState([]) + return (<>); + }; - const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); - const [ maxDisplayed, setMaxDisplayed ] = useState(maxDisplayedAlerts); + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + // Component: PageContent, + // children: [ + // { + path: objectMetadata.urls.self, + Component: InnerComponent, + // } + // ] + } + ] + } + ]); - const [ overflowMessage, setOverflowMessage ] = useState(''); + const rendered = render( + + + + ); - const [ notifications, setNotifications ] = useState([ unreadNotification ]); + await waitFor(() => { - return ( - -
- {children} - + const notifications = rendered.baseElement.querySelector( + 'button[aria-label="Notifications"]' ); + expect(notifications).not.toBeNull(); - }; - - - const rendered = render( - - - - - - ); + }); const htmlElement = rendered.container.querySelector('button[aria-label="Notifications"]'); @@ -1101,154 +1301,172 @@ describe("NotificationDrawer", () => { // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); - - }); - - - test("Unread notifications badge indicator colour 'alert'", () => { - - - const MockComponent = ({children}) => { + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { - const alertTimeout = 8000; - - const drawerRef = useRef(null); + expect(consoleErrorSpy).not.toHaveBeenCalled(); - const maxDisplayedAlerts = 2; + } - const maxAlerts = 100; + }); - const minAlerts = 0; - const [ alerts, setAlerts ] = useState([]) + test("Unread notifications badge indicator colour 'alert'", async () => { - const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); - const [ maxDisplayed, setMaxDisplayed ] = useState(maxDisplayedAlerts); + const InnerComponent = () => { - const [ overflowMessage, setOverflowMessage ] = useState(''); + const { setNotifications } = useNotificationContext() const alertNotification = { ...unreadNotification, variant: AlertVariant.danger } - const [ notifications, setNotifications ] = useState([ alertNotification ]); - - return ( - -
- {children} - - ); + useEffect(() => { + setNotifications([alertNotification]) + }, []); + + + return (<>); }; + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] + } + ] + } + ]); + const rendered = render( - - - - - + + + ); + await waitFor(() => { - const htmlElement = rendered.container.querySelector('button[aria-label="Notifications"]'); - - expect(String(htmlElement.classList).includes('pf-m-attention')).toBe(true); - - - // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); - - }); - - - test("Clearing notifications badge indicator colour 'read'", async () => { - - - const MockComponent = ({children}) => { - - const alertTimeout = 8000; + const notifications = rendered.baseElement.querySelector( + 'button[aria-label="Notifications"]' + ); - const drawerRef = useRef(null); + expect(notifications).not.toBeNull(); - const maxDisplayedAlerts = 2; + }); - const maxAlerts = 100; - const minAlerts = 0; + const htmlElement = rendered.container.querySelector('button[aria-label="Notifications"]'); - const [ alerts, setAlerts ] = useState([]) + expect(String(htmlElement.classList).includes('pf-m-attention')).toBe(true); - const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); - const [ maxDisplayed, setMaxDisplayed ] = useState(maxDisplayedAlerts); + // No errors are to be thrown + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { - const [ overflowMessage, setOverflowMessage ] = useState(''); + expect(consoleErrorSpy).not.toHaveBeenCalled(); - const [ notifications, setNotifications ] = useState([ unreadNotification ]); + } + }); - return ( - -
- {children} - - ); + test("Clearing notifications badge indicator colour 'read'", async () => { - }; const InnerComponent = () => { - const { setNotifications } = useContext(NotificationContext); - - let done = false + const { setNotifications } = useNotificationContext() - useEffect(()=> { + useEffect(() => { - setNotifications([]); + setNotifications([]) }, []); + return (<>); }; + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] + } + ] + } + ]); + const rendered = render( - - - - - - - + + + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'button[aria-label="Notifications"]' + ); + + expect(notifications).not.toBeNull(); + + }); + const htmlElement = rendered.container.querySelector('button[aria-label="Notifications"]'); await waitFor(() => { @@ -1264,64 +1482,82 @@ describe("NotificationDrawer", () => { // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); - - }); + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { + expect(consoleErrorSpy).not.toHaveBeenCalled(); - test("Unread message count shows for one unread message", () => { + } + }); - const MockComponent = ({children}) => { - const alertTimeout = 8000; + test("Unread message count shows for one unread message", async () => { - const drawerRef = useRef(null); - const maxDisplayedAlerts = 2; + const InnerComponent = () => { - const maxAlerts = 100; + const { setNotifications } = useNotificationContext() - const minAlerts = 0; + useEffect(() => { - const [ alerts, setAlerts ] = useState([]) + setNotifications([unreadNotification]) - const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); + }, []); + - const [ maxDisplayed, setMaxDisplayed ] = useState(maxDisplayedAlerts); + return (<>); + }; - const [ overflowMessage, setOverflowMessage ] = useState(''); - const [ notifications, setNotifications ] = useState([ unreadNotification ]); + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + Component: PageContent, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] + } + ] + } + ]); - return ( - -
- {children} - - ); + const rendered = render( + + + + ); + await waitFor(() => { - }; + const notifications = rendered.baseElement.querySelector( + 'span[class="pf-v6-c-button__text' + ); + expect(notifications).not.toBeNull(); - const rendered = render( - - - - - - ); + }); const htmlElement = rendered.container.querySelector('span[class="pf-v6-c-button__text"]'); @@ -1330,73 +1566,106 @@ describe("NotificationDrawer", () => { // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { - }); - - - test("No unread message count shows for one read message", () => { + expect(consoleErrorSpy).not.toHaveBeenCalled(); + } - const MockComponent = ({children}) => { + }); - const alertTimeout = 8000; - const drawerRef = useRef(null); + test("No unread message count shows for one read message", async () => { - const maxDisplayedAlerts = 2; - const maxAlerts = 100; + const InnerComponent = () => { - const minAlerts = 0; + const { setNotifications } = useNotificationContext() - const [ alerts, setAlerts ] = useState([]) + useEffect(() => { - const [ isNotificationsOpen, setNotificationsOpen ] = useState(false); + setNotifications([ {...unreadNotification, isNotificationRead: true} ]) - const [ maxDisplayed, setMaxDisplayed ] = useState(maxDisplayedAlerts); + }, []); + - const [ overflowMessage, setOverflowMessage ] = useState(''); + return (<>); + }; - const [ notifications, setNotifications ] = useState([ {...unreadNotification, isNotificationRead: true} ]); - return ( - -
- {children} - - ); + const Stub = createRoutesStub([ + { + Component: UI, + loader: rootMetadataLoader, + children: [ + { + path: objectMetadata.urls.self, + Component: InnerComponent, + } + ] + } + ]); + const rendered = render( + + + + ); - }; + await waitFor(() => { + const notifications = rendered.baseElement.querySelector( + 'button[aria-label="Notifications"]' + ); - const rendered = render( - - - - - - ); + expect(notifications).not.toBeNull(); + }); + const htmlElement = rendered.container.querySelector('span[class="pf-v6-c-button__text"]'); expect(htmlElement).toBe(null); // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { + + expect(consoleErrorSpy).not.toHaveBeenCalled(); + + } }); @@ -1423,7 +1692,7 @@ describe("NotificationDrawer", () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); useEffect(() => { @@ -1437,7 +1706,8 @@ describe("NotificationDrawer", () => { const Stub = createRoutesStub([ { - Component: RootLayout, + Component: UI, + loader: rootMetadataLoader, children: [ { path: objectMetadata.urls.self, @@ -1449,11 +1719,21 @@ describe("NotificationDrawer", () => { const rendered = render( - + - + ); + await waitFor(() => { + + const notifications = rendered.baseElement.querySelector( + 'button[aria-label="Notifications"]' + ); + + expect(notifications).not.toBeNull(); + + }); + const htmlElement = rendered.container.querySelector('button[aria-label="Notifications"]'); expect( @@ -1471,7 +1751,27 @@ describe("NotificationDrawer", () => { // No errors are to be thrown - expect(consoleErrorSpy).not.toHaveBeenCalled(); + if( allowedErrors['has_action_menu'] == consoleErrorSpy.mock.calls?.[0]?.[0] ) { + /** + * To Do: FixMe + * Upstream: + * Bug: https://github.com/patternfly/patternfly-react/issues/12295 + * PR: https://github.com/patternfly/patternfly-react/pull/12315 + * + * There is a bug in PatternFly when used with react 19. in my case + * the file in question was `/home/sysadmin/git/centurion-erp-ui/node_modules/@patternfly/react-core/dist/js/components/Drawer/DrawerPanelContent.js` + * + * Issue presented itself when updating to `@patternfly/react-core@6.5.1` + * version `6.4.0` didn't have the issue + */ + + expect(true); + + } else { + + expect(consoleErrorSpy).not.toHaveBeenCalled(); + + } }); diff --git a/src/components/page/Footer.tsx b/src/components/page/Footer.tsx index faceb4ed..ae0a2d2e 100644 --- a/src/components/page/Footer.tsx +++ b/src/components/page/Footer.tsx @@ -1,9 +1,20 @@ -import React, { useEffect, useState } from "react"; +import + React, + { + useEffect, + useState, +} from "react"; -import { PageSection } from "@patternfly/react-core"; +import { + PageSection +} from "@patternfly/react-core"; +import { + BackendVersion +} from "../../types/backend/apiMetadata/root"; + import IconLoader from "../IconLoader"; @@ -19,7 +30,7 @@ export type FooterProps = { /** * Version data for the API that's in use */ - api_version_data + api_version_data: BackendVersion } diff --git a/src/components/page/Header.tsx b/src/components/page/Header.tsx index 38a3f683..0fa1e05d 100644 --- a/src/components/page/Header.tsx +++ b/src/components/page/Header.tsx @@ -1,3 +1,7 @@ +import { + Link, +} from "react-router"; + import { Masthead, MastheadContent, @@ -7,8 +11,15 @@ import { Title, } from "@patternfly/react-core"; -import { Link } from "react-router"; import HeaderToolbar from "./HeaderToolbar"; +import { + useNavbarContext +} from "./Navbar"; + +import '../../../node_modules/@patternfly/patternfly/components/Masthead/masthead.css' + + + /** @@ -18,18 +29,7 @@ import HeaderToolbar from "./HeaderToolbar"; * @expand * @since 0.1.0 */ -export type HeaderProps = { - - /** - * Is the sidebar open or closed. - */ - isSidebarOpen: boolean, - - /** - * Callback to run when the sidebar toggle is press. - */ - onSidebarToggle: () => void -} +export type HeaderProps = {} @@ -43,10 +43,10 @@ export type HeaderProps = { * @since 0.1.0 */ const Header = ({ - isSidebarOpen, - onSidebarToggle }: HeaderProps): React.JSX.Element => { + const { isSidebarOpen, onSidebarToggle } = useNavbarContext(); + return ( diff --git a/src/components/page/HeaderToolbar.tsx b/src/components/page/HeaderToolbar.tsx index c0fa964e..ff4096f9 100644 --- a/src/components/page/HeaderToolbar.tsx +++ b/src/components/page/HeaderToolbar.tsx @@ -4,7 +4,8 @@ import { useState } from "react"; import { - Link + Link, + useRevalidator } from "react-router"; import { @@ -27,19 +28,28 @@ import { } from "@patternfly/react-core"; -import { CogIcon } from '@patternfly/react-icons'; -import { EllipsisVIcon } from '@patternfly/react-icons'; -import { HelpIcon } from '@patternfly/react-icons'; +import { + CogIcon, + EllipsisVIcon, + HelpIcon, + QuestionCircleIcon, + RhUiRefreshIcon +} from '@patternfly/react-icons'; + // @ts-expect-error TS[2307] import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -import { QuestionCircleIcon } from '@patternfly/react-icons'; + import UserContext from "../../hooks/UserContext"; import { useTheme, THEME_TYPES } from '../../hooks/useTheme'; import URLSanitize from "../../functions/URLSanitize"; -import { NotificationContext } from "../NotificationDrawer"; -import { useNotificationActions } from "../../hooks/useNotificationActions"; +import { + useNotificationContext +} from "../NotificationDrawer"; +import { + useNotificationActions +} from "../../hooks/useNotificationActions"; @@ -61,7 +71,7 @@ const HeaderToolbar = () => { maxDisplayed, notifications, setNotifications, setOverflowMessage - } = useContext(NotificationContext); + } = useNotificationContext(); const { buildOverflowMessage, removeAllAlerts } = useNotificationActions(); @@ -76,6 +86,8 @@ const HeaderToolbar = () => { const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR); + const revalidator = useRevalidator(); + const onKebabDropdownSelect = () => { setIsKebabDropdownOpen(false); }; @@ -108,28 +120,35 @@ const HeaderToolbar = () => { }; - const totalUnreadNotifications = notifications.reduce( - (total, n) => total + (!n.isNotificationRead ? 1 : 0), - 0 - ); + let totalUnreadNotifications = null; + let notificationUnreadVariant = null; + if( isNotificationsOpen !== undefined ) { - const notificationUnreadVariant = notifications.reduce( - (total, n) => total + ((n.variant === AlertVariant.danger && !n.isNotificationRead ) ? 1 : 0), - 0 - ) > 0 ? NotificationBadgeVariant.attention : NotificationBadgeVariant.unread; + totalUnreadNotifications = notifications.reduce( + (total, n) => total + (!n.isNotificationRead ? 1 : 0), + 0 + ); + notificationUnreadVariant = notifications.reduce( + (total, n) => total + ((n.variant === AlertVariant.danger && !n.isNotificationRead ) ? 1 : 0), + 0 + ) > 0 ? NotificationBadgeVariant.attention : NotificationBadgeVariant.unread; - useEffect(() => { - setOverflowMessage(buildOverflowMessage()); - }, [ - maxDisplayed, - notifications, - alerts - ]); + useEffect(() => { + + setOverflowMessage(buildOverflowMessage()); + + }, [ + maxDisplayed, + notifications, + alerts + ]); + + } useEffect(() => { // AutoMagic set based off of user preferences @@ -205,13 +224,26 @@ const HeaderToolbar = () => { lg: 'visible' }} > - +