marmelab / admin-on-rest Goto Github PK
View Code? Open in Web Editor NEWA frontend framework for building admin SPAs on top of REST services, using React and Material Design.
Home Page: https://marmelab.com/admin-on-rest
License: MIT License
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.
Home Page: https://marmelab.com/admin-on-rest
License: MIT License
What you were expecting:
I create a new app using create-react-app
as tutorial says.
I run yarn build
and production build gets created.
What happened instead:
I run yarn build
and the following error appears:
$ yarn build
yarn run v1.5.1
$ react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/admin-on-rest/src/actions/uiActions.js:3
Read more here: http://bit.ly/2tRViJ9
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c react-scripts build
Directory: /Users/pallaric/Documents/Mobile/projects/training/test-admin
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/pallaric/Documents/Mobile/projects/training/test-admin/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Steps to reproduce:
Follow the tutorial, and run yarn build
.
I am importing import { refreshView as refreshViewAction } from 'admin-on-rest/src/actions/uiActions';
Versions used:
"admin-on-rest": "^1.4.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-scripts": "1.1.1"
Porting issue #1749 from react-admin, initially reported by evancorl
What you were expecting:
When my restClient
returns a response, the ReferenceManyField
should re-render with the fetched data.
What happened instead:
When my restClient
returns a response, the ReferenceManyField
occasionally doesn't re-render with the fetched data. Instead, it continues to display the loading bar. This can be directly traced to the ids
prop being undefined.
Steps to reproduce:
The pattern I've noticed: the first attempt at loading a ReferenceManyField
renders properly. Any subsequent loads of that ReferenceManyField
will not be rendered properly.
In other words, I first load Dealer 1
with referenced salespeople. Loading Dealer 2
(or Dealer 3
, Dealer 4
, etc.) will not render the salespeople. Going back and loading Dealer 1
again, however, will render the salespeople.
My guess is this is some sort of issue related to the AOR cache. Notice how the id
prop here is undefined-undefined-objectObject-63822
:
Related code:
Here is my Edit
component for Dealers
:
export const DealerEdit = props => (
<Edit {...props} title="Edit Dealer">
<SimpleForm>
<TextInput source="name" validate={required} />
<ReferenceManyField
reference="salespeople"
target="dealerId"
label="Salespeople"
>
<Datagrid>
<TextField source="firstName" label="First Name" />
<TextField source="lastName" label="Last Name" />
<EmailField source="email" />
<DateField source="createdAt" label="Created" />
<DateField source="updatedAt" label="Updated" />
<EditButton />
</Datagrid>
</ReferenceManyField>
</SimpleForm>
</Edit>
);
And here is the data returned from my restClient
(using Apollo under the hood):
// GET_ONE (Dealer)
{
"data": {
"_id": "5ac7df3b5bc8ae1454ebd549",
"id": "5ac7df3b5bc8ae1454ebd549",
"name": "Dealer 1",
"__typename": "Dealer",
}
}
// GET_MANY_REFERENCE (Salespeople)
{
"data": [
{
"_id": "5ad3b59fc7d879946ca7e5bc",
"id": "5ad3b59fc7d879946ca7e5bc",
"firstName": "John",
"lastName": "Salesman",
"email": "[email protected]",
"createdAt": "2018-04-15T20:27:11.924Z",
"updatedAt": "2018-04-16T21:35:31.259Z",
"__typename": "DealerUser",
}
],
"total": 1
}
Environment
When pre-populating a saved value, ReferenceInput getDataStatus() will only enter the "waiting" state when matchingReferences is not set.
But on the second load of a ReferenceInput it can never enter waiting state because matchingReferences is now set.
On the second load, if the new value to be pre-populated is not already in matchingReferences then the field SHOULD enter the waiting state until it is fetched, but it will not enter the waiting state so it renders prematurely.
Related code:
Existing code in ReferenceInput:getDataStatus()
waiting:
(input.value && selectedReferenceError && !matchingReferences) ||
(!input.value && !matchingReferences),
Suggested alternative:
waiting:
(input.value && selectedReferenceError) ||
(!input.value && !matchingReferences),
What you were expecting:
ReferenceInput+Autocomplete should always prepopulate with saved reference value and should be able to enter a waiting state even when some matchingReferences have been loaded if the input.value is not found in matchingReferences.
What happened instead:
Viewing a record with a saved value pre-populates correctly initially. Switching to another record of the same type will not pre-populate the value if the value is not coincidentally already in matchingReferences.
AutocompleteInput is particularly susceptible to this because often the loaded value will not already be present in matchingReferences.
Steps to reproduce:
Environment
Upgrade to Angular 6
What you were expecting:
What happened instead:
Related code:
const validateUserCreation = (values) => {
const errors = {};
if (!values.firstName) {
errors.firstName = ['The firstName is required'];
}
if (!values.cities) {
errors.cities= ['The city is required'];
}
return errors
};
export const UserCreate = (props) => (
<Create {...props}>
<SimpleForm validate={validateUserCreation}>
<TextInput label="First Name" source="firstName" />
<SelectArrayInput label="City" source="cities" choices={[
{ id: 'us', name: 'US' },
{ id: 'canada', name: 'Canada' }
]} />
</SimpleForm>
</Create>
);
Environment
Porting issue #1644 from react-admin, initially reported by asliwinski
What you were expecting:
To be redirected to login page without errors after pressing Logout button
What happened instead:
'Not found' appears for a fraction of second before the redirection, as soon as the promise from authClient
is returned.
Steps to reproduce:
authClient
)node_modules/admin-on-rest/lib/sideEffect/saga/auth.js
with the auth.js
from src
of the repo (2 breakpoints added to catch the error):case USER_LOGOUT: {
debugger;
yield call(authClient, AUTH_LOGOUT);
debugger;
yield put(push('/login'));
break;
}
Before:
After:
Environment
What you were expecting:
ex. <BooleanInput label="OnOrOff" source="example" defaultValue={false} />
Setting defaultValue on BooleanInput component to false
will yield {value: false}
in validate function. Fields with defaultValue
should be set before validate function runs.
What happened instead:
In: <BooleanInput label="OnOrOff" source="example" defaultValue={false} />
yields: {}
in validate function.
Removing defaultValue
prop yields same result. Setting defaultValue={true}
yields expected result {example: true}
Toggling the BooleanInput field on and then off yields expected result {value: false}
Steps to reproduce:
Create a simple form. Console.log values in validateForm
const validateForm => values => {
console.log('values', values) // <- will yield empty object for boolean fields that have not been toggled
}
<Create {...props}>
<SimpleForm submitOnEnter={false} validate={validateForm}>
<BooleanInput label="Deletion" source="example" defaultValue={false} />
</SimpleForm>
</Create>
See: https://codesandbox.io/s/9856oq8l0p
Click + and view consoled values.
Environment
The tab list only changes on first rendering of the UI. The changs of state don't cause proper rendering.
I would expect following (pseudo)code to result in one of tabs showing if and onli if this.state.isAdmin is true, however it only depends on the initial value of this state field (the isAdmin
is loaded asynchronously).
<Admin ...>
<Resource ... />
{this.state.isAdmin ? <Resource ...> : null}
</Admin>
The title prop of component however rerenders correctly, and also console.logs display proper, updated state.
Porting issue #1578 from react-admin, initially reported bynatrim.
after merging #1525 the AutocompleteInput searchText is sometimes not shown
(mostly after moving mouse to address bar and reloading page by clicking in it and pressing enter)
managed to fix it by adding componentDidMount
componentDidMount() {
// delay this
window.setTimeout(() => {
this.setSearchText(this.props);
}, 100);
}
but that is probably not the best solution
(edit: using aor 1.4.0 with manually merged #1525 and react 0.16.2 )
try example from doc: https://marmelab.com/admin-on-rest/Fields.html#referencearrayfield
the one with datagrid
when you click on column header you get
Uncaught TypeError: _this.props.setSort is not a function
ie. ReferenceArrayField is not setting setSort
ReferenceArrayField needs to support sort
or add checks in DataGrid to stop sorting if no setSort set
After an edit, I follow the convention to redirect on the list.
However, I am in a case where I need to provide additional parameters in the list URL.
Is there a way to "cheat" on SimpleForm/Edit to customize the redirect ?
Here is the relevant part of my code :
const ProviderUserEditActions = ({ basePath, data }) => {
if (! data) return null
return (
<CardActions style={cardActionStyle}>
<ListButton basePath={basePath+'?'+queryString.stringify({providerId:data.providerId, providerName:data.providerName})} />
<RefreshButton />
</CardActions>
);
}
export const ProviderUserEdit = (props) => (
<Edit actions={<ProviderUserEditActions/>} title={<ProviderUserEditTitle />} {...props}>
{/*redirect=false will cause the loosing of the URL parameters :(
but this is the "least worst", because otherwise it would redirect to
'list' but without URL parameters it will completely crash...
we hope that someday we will be able to provide our own redirect
function
*/}
<SimpleForm redirect={false}>
<TextInput source="name" />
<TextInput source="email" />
<TextInput source="phone" />
<BooleanInput source="activated" />
</SimpleForm>
</Edit>
);
Porting issue #434 from react-admin, initially reported bymingchen
In list view, if I define a lot columns need to be shown, if the row length overflow the right of page, some columns can not be viewed and the page also can not support horizontal scroll.
For example, I define 12 columns, however only 10 can be viewed on page, 2 of them are in right of screen and can not be viewed.
In edit form for each custom input appear on console the next warning:
Warning: Missing translation for key "RecycleItem"
I did not find an option to disable translate
Thanks.
What you were expecting:
When a request gets canceled it should allways dispatch a FETCH_CANCEL action, to decrease the loading count.
What happened instead:
When two requests that have {cancelPrevious: true} get fired simultaneously, the FETCH_START for both gets dispatched, one of them gets canceled, but the corresponding FETCH_CANCEL never gets dispatched. This makes the loading count become locked at a greater than 0 value forever.
Steps to reproduce:
dispatch a crudGetOne and a crudGetList simultaneously (can be for diferent resources).
Environment
Porting issue #1566 from react-admin, initially reported by FDiskas
yarn check
Hi,
I'm trying to handle server validation errors once submission of a SimpleForm has been done.
My form is quite easily created:
<SimpleForm onSubmit={submitResults}>
<UserForm />
</SimpleForm>
And I have a simple way to throw a submission error, not calling the server for the moment:
const submitResults = (values) => {
throw new SubmissionError({firstname: "Firstname is wrong", lastname: "Lastname is not good", _error: "Submit Failed"});
};
According to https://marmelab.com/admin-on-rest/CreateEdit.html#validation and Redux Form, this should be fine: https://redux-form.com/6.5.0/examples/submitvalidation/.
However, I don't enter submitResults function, and the submission is made to the server which returns a 401 status which never gets understood.
What am I doing wrong?
Thanks,
Nicolas
Hi,
I'm using another api to list in Datagrid. But when I call it I'm getting an error as follows
The api that I use; https://reqres.in/api/products
Why do i get this error? Can you help me?
Thank you
I'm using a following set-up (pseudo-code cut just to demonstrate the relevant part):
<SimpleForm>
<SelectArrayInput source="..." defaultValue={[]} />
</SimpleForm>
inside a (much) larger application.
What you were expecting:
It should work (render and allow interactions) :)
What happened instead:
Application crashes with the following error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
I tracked the problem to FormField
, which performs exact equality comparison on defaultValue
in componentWillReceiveProps
and dispatches the initializeForm
action when it detects a difference. The action then causes update of a major part of the app, including the field, and the cycle starts again.
Environment
Route
, the update stack is short and without a trace of where the problem actually is)Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at invariant (invariant.js:42)
at scheduleWork$1 (react-dom.development.js:16099)
at Object.enqueueSetState (react-dom.development.js:11185)
at Route.../../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:273)
at Route.componentWillReceiveProps (Route.js:80)
at callComponentWillReceiveProps (react-dom.development.js:11413)
at updateClassInstance (react-dom.development.js:11605)
at updateClassComponent (react-dom.development.js:13045)
at beginWork (react-dom.development.js:13715)
at performUnitOfWork (react-dom.development.js:15741)
The above error occurred in the <Route> component:
in Route (created by AdminRoutes)
in Switch (created by AdminRoutes)
in AdminRoutes (created by Connect(AdminRoutes))
in Connect(AdminRoutes) (created by getContext(Connect(AdminRoutes)))
in getContext(Connect(AdminRoutes)) (created by Route)
in Route (created by Admin)
in Switch (created by Admin)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Admin)
in TranslationProvider (created by withContext(TranslationProvider))
in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
in Connect(withContext(TranslationProvider)) (created by Admin)
in Provider (created by Admin)
in Admin (created by withContext(Admin))
in withContext(Admin) (created by DefaultAdmin)
in ... (app layout)
Please do not submit support requests or "How to" questions here. For that, go to StackOverflow.
What you were expecting:
No warning on browser inspector.
What happened instead:
<ImageInput allowEmpty source="image">
<ImageField title='title' />
</ImageInput>
I added this code and image value is the URL from local host's storage path.
http://localhost:3000/api/Containers/images/download/c1ed1cba-f99b-47ef-b8fc-c0ba1c427d31.jpg
It shows this image, but when first routing it shows waring, following is warning on inspector.
Warning: Failed prop type: The prop `source` is marked as required in `ImageField`, but its value is `undefined`.
in ImageField (created by TalentEdit)
in TalentEdit (created by Route)
in Restricted (created by Connect(Restricted))
in Connect(Restricted) (created by Route)
in Route (created by CrudRoute)
in Switch (created by CrudRoute)
in CrudRoute (created by Route)
in Route (created by Route)
in Switch (created by Route)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in MuiThemeProvider (created by Layout)
in Layout (created by WithWidth)
in EventListener (created by WithWidth)
in WithWidth (created by Connect(WithWidth))
in Connect(WithWidth) (created by Route)
in Route (created by AdminRoutes)
in Switch (created by AdminRoutes)
in AdminRoutes (created by Connect(AdminRoutes))
in Connect(AdminRoutes) (created by getContext(Connect(AdminRoutes)))
in getContext(Connect(AdminRoutes)) (created by Route)
in Route (created by Admin)
in Switch (created by Admin)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Admin)
in TranslationProvider (created by withContext(TranslationProvider))
in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
in Connect(withContext(TranslationProvider)) (created by Admin)
in Provider (created by Admin)
in Admin (created by withContext(Admin))
in withContext(Admin) (created by App)
in App
warning.js:33 Warning: Failed prop type: Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.
in FileInputPreview (created by MuiComponent)
in MuiComponent (created by ImageInput)
in div (created by ImageInput)
in div (created by ImageInput)
in ImageInput (created by TranslatedComponent(undefined))
in TranslatedComponent(undefined) (created by TextField)
in div (created by TextField)
in TextField (created by Labeled)
in Labeled (created by ConnectedField)
in ConnectedField (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (created by FormFieldComponent)
in FormFieldComponent (created by FormField)
in FormField (created by FormInput)
in div (created by FormInput)
in FormInput (created by FormTab)
in span (created by FormTab)
in FormTab (created by TalentEdit)
in div (created by TabTemplate)
in TabTemplate (created by Tabs)
in div (created by Tabs)
in div (created by Tabs)
in Tabs (created by TabbedForm)
in div (created by TabbedForm)
in form (created by TabbedForm)
in TabbedForm (created by MuiComponent)
in MuiComponent (created by Form(MuiComponent))
in Form(MuiComponent) (created by Connect(Form(MuiComponent)))
in Connect(Form(MuiComponent)) (created by ReduxForm)
in ReduxForm (created by Connect(ReduxForm))
in Connect(ReduxForm) (created by TalentEdit)
in div (created by Card)
in div (created by Paper)
in Paper (created by Card)
in Card (created by Edit)
in div (created by Edit)
in Edit (created by WithPermissionsFilteredChildren)
in WithPermissionsFilteredChildren (created by getContext(WithPermissionsFilteredChildren))
in getContext(WithPermissionsFilteredChildren) (created by TranslatedComponent(getContext(WithPermissionsFilteredChildren)))
in TranslatedComponent(getContext(WithPermissionsFilteredChildren)) (created by Connect(TranslatedComponent(getContext(WithPermissionsFilteredChildren))))
in Connect(TranslatedComponent(getContext(WithPermissionsFilteredChildren))) (created by TalentEdit)
in TalentEdit (created by Route)
in Restricted (created by Connect(Restricted))
in Connect(Restricted) (created by Route)
in Route (created by CrudRoute)
in Switch (created by CrudRoute)
in CrudRoute (created by Route)
in Route (created by Route)
in Switch (created by Route)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in MuiThemeProvider (created by Layout)
in Layout (created by WithWidth)
in EventListener (created by WithWidth)
in WithWidth (created by Connect(WithWidth))
in Connect(WithWidth) (created by Route)
in Route (created by AdminRoutes)
in Switch (created by AdminRoutes)
in AdminRoutes (created by Connect(AdminRoutes))
in Connect(AdminRoutes) (created by getContext(Connect(AdminRoutes)))
in getContext(Connect(AdminRoutes)) (created by Route)
in Route (created by Admin)
in Switch (created by Admin)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Admin)
in TranslationProvider (created by withContext(TranslationProvider))
in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
in Connect(withContext(TranslationProvider)) (created by Admin)
in Provider (created by Admin)
in Admin (created by withContext(Admin))
in withContext(Admin) (created by App)
in App
Steps to reproduce:
Related code:
insert short code snippets here
Other information:
Environment
macOS 10.13
The current version of Material UI, while technically still in beta, is what is recommended to use in production (according to their site).
When will we see an upgrade to v1? The problem is the current version being used in Admin on Rest is too restrictive to properly brand.
Thanks.
As per the HTTP 2.0 spec, header names should be lowercased
Now I've got errors like
The X-Total-Count header is missing in the HTTP Response. The jsonServer REST client expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?
With response headers
access-control-allow-headers: content-type, x-total-count
access-control-allow-methods: GET
access-control-allow-origin: *
access-control-max-age: 600
content-length: 9091
content-type: application/json; charset=utf-8
date: Sun, 01 Jul 2018 23:50:46 GMT
x-total-count: 30
[UPD] I've found this line. Well. I don't know why I'm receiving such error
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.