API Platform - React Admin and permissions error

Question

I am using API Platform and need to open an Admin access with limitation due to user roles.

Meanwhile the permission system seems to work properly accordingly to the user logged, I have an error in the console:

next-dev.js:20 Warning: Failed prop type: Invalid prop `children` supplied to `AdminGuesser`, expected one of type [function].
    at AdminGuesser

Following the documentation from react-admin (https://marmelab.com/react-admin/Permissions.html#restricting-access-to-resources-or-views), I now have something like this.

const AdminUI = () => {
  const [redirectToLogin, setRedirectToLogin] = useState(false);

  // @ts-ignore
  return <HydraAdmin
    dataProvider={dataProvider(setRedirectToLogin)}
    authProvider={authProvider}
    entrypoint={window.origin}
    i18nProvider={i18nProvider}
    layout={MyLayout}
    loginPage={LoginPage}
    theme={theme}
  >
    <CustomRoutes>
      {redirectToLogin ? <Route path="/" element={<RedirectToLogin />} /> : null}
    </CustomRoutes>
    {permissions => [
      // eslint-disable-next-line react/jsx-key
      <ResourceGuesser name={"api/vehicles"} icon={DirectionsCar} list={VehicleList} show={VehiclesShow} />,
      permissions.indexOf('ROLE_ADMIN') != -1 ?
        <>
          <ResourceGuesser name={"api/languages"} icon={Language} />
          {/*...*/}
          <ResourceGuesser name={"api/countries"} icon={Flag} />
        </>
        : null
    ]}
  </HydraAdmin>
};

The error disappears when I remove the {permissions => []} block and makes the admin unstable.

I tried to put the ResourceGuesser in a subcomponent in order to use the UsePermission hook, but the AdminGuesser seems unabled to reach the guessers if they are not directly in the <HydraAdmin> component.

Is there anything I am doing badly or is it a bug?

Thanks

Answer 1

Finally i found my way out

I had to put all the component inside the permissions => []

const AdminUI = () => {
  const [redirectToLogin, setRedirectToLogin] = useState(false);

  // @ts-ignore
  return <HydraAdmin
    dataProvider={dataProvider(setRedirectToLogin)}
    authProvider={authProvider}
    entrypoint={window.origin}
    i18nProvider={i18nProvider}
    layout={MyLayout}
    loginPage={LoginPage}
    theme={theme}
  >
    {permissions => [
      <CustomRoutes>
        {redirectToLogin ? <Route path="/" element={<RedirectToLogin />} /> : null}
      </CustomRoutes>
      // eslint-disable-next-line react/jsx-key
      <ResourceGuesser name={"api/vehicles"} icon={DirectionsCar} list={VehicleList} show={VehiclesShow} />,
      permissions.indexOf('ROLE_ADMIN') != -1 ?
        <>
          <ResourceGuesser name={"api/languages"} icon={Language} />
          {/*...*/}
          <ResourceGuesser name={"api/countries"} icon={Flag} />
        </>
        : null
    ]}
  </HydraAdmin>
};