Admin-UI logo hook is broken #3493
Comments
|
+1, running into the same issue. Here's my file layout: My import aotLogo from "./logo";
export default {
logo: aotLogo,
pages: () => [
// Ordering existing list pages
{
label: "Arts on Tour Data",
children: [
{ listKey: "Season" },
{ listKey: "Event" },
{ listKey: "Artist" }
]
},
{
label: "Media",
children: [{ listKey: "Photo" }, { listKey: "Video" }]
},
{
label: "Staff",
children: [{ listKey: "User" }]
}
]
};My import React from "react";
const aotLogo = React.memo(({ ...props }) => {
return <img alt="The Arts on Tour logo." style="display: block; width: 100%; height: auto; max-height: 220px" src="./logo.png" {...props} />;
});
export default aotLogo;Error output in the browser console: This is on Chrome & MacOS. |
logo: () => <AotLogo />, // change case for this logo component |
|
Got things working, thank you for your help! Thanks to @gautamsi and some more React reading, here are my final files:
import React from "react";
import AotLogo from "./logo";
export default {
logo: () => <AotLogo />,
pages: () => [
// Ordering existing list pages
{
label: "Arts on Tour Data",
children: [
{ listKey: "Season" },
{ listKey: "Event" },
{ listKey: "Artist" }
]
},
{
label: "Media",
children: [{ listKey: "Photo" }, { listKey: "Video" }]
},
{
label: "Staff",
children: [{ listKey: "User" }]
}
]
};
import React from "react";
import logoImg from "./logo.png";
const AotLogo = React.memo(({ ...props }) => {
const logoStyles = {
display: "block",
height: "100%",
width: "100%",
maxWidth: "350px"
};
return (
<img
alt="The Arts on Tour logo."
style={logoStyles}
src={logoImg}
{...props}
/>
);
});
export default AotLogo; |
|
Just coming back to this now - thanks @gautamsi @jordanthornquest for sorting this out. I suppose this should now be a documentation update? |
|
Took me like 5 hours of pulling my hair out to get this working even with the help of this issue and code provided here. Better documentation how it works would be definately appreciated. |
|
@jordanthornquest jordanthornquest : thx for the solution, I have some issues to load es6 modules into keystonejs. could you probably help here how you configured everything so that this works? thx |
|
It looks like there hasn't been any activity here in over 6 months. Sorry about that! We've flagged this issue for special attention. It wil be manually reviewed by maintainers, not automatically closed. If you have any additional information please leave us a comment. It really helps! Thank you for you contribution. :) |
|
Keystone 5 has officially moved into active maintenance mode as we push towards the next major new version Keystone Next, you can find out more information about this transition here. In an effort to sustain the project going forward, we're cleaning up and closing old issues such as this one. If you feel this issue is still relevant for Keystone Next, please let us know. |
Bug report
Describe the bug
Adding a logo hook to the Admin UI as described in https://www.keystonejs.com/keystonejs/app-admin-ui/#usage-1 doesn't work
To Reproduce
Follow instructions in the Admin UI App documentation page, create an index.js file in /admin-ui/ directory that exports logo pointing to a react component (just copy the existing KeystoneLogo.js component from /node_modules/@keystonejs/app-admin-ui/client/components and export that). Start the admin UI and try to sign-in but the page crashes with blank screen and the console displays
`Signin.js:139 Uncaught TypeError: getCustomLogo is not a function
at SignInPage (Signin.js:139)
at renderWithHooks (react-dom.development.js:14803)
at mountIndeterminateComponent (react-dom.development.js:17482)
at beginWork (react-dom.development.js:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
SignInPage @ Signin.js:139
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
react-dom.development.js:19527 The above error occurred in the component:
in SignInPage (at public.js:41)
in Route (at public.js:41)
in Switch (at public.js:39)
in Router (created by BrowserRouter)
in BrowserRouter (at public.js:38)
in ToastProvider (at public.js:34)
in ApolloProvider (at public.js:33)
in HooksProvider (at public.js:32)
in Keystone (at public.js:56)
in AdminMetaProvider (at public.js:55)
in Suspense (at public.js:54)`
Expected behaviour
The signin screen should be displayed with the logo changed to the one exported in the hooks.
System information
The text was updated successfully, but these errors were encountered: