guillotinaweb / guillotina_react

A Management interface for Guillotina

🔌 Guillotina Management Interface

It's build around the idea of a framework to roll you own GMI.

Provides an interface to access all Guillotina content depending on user permissions and allowing you to apply actions like create/modify/remove content, UI interactions like displaying flash messages, etc.

All this with the flexibility to build it your way, adding your own content with your forms, your icons, etc. It's build around the idea to act as a framework, layer that could be extended from outside.

Prerequisites

• React +16.12.0

Status

Alpha version. The app is usable, but still needs some love.

Roll your own guillotina

With create react app

npx create-react-app gmi_demo
cd gmi_demo

yarn add @guillotinaweb/react-gmi

App.js

import React from 'react'
import { Layout } from '@guillotinaweb/react-gmi'
import { Auth } from '@guillotinaweb/react-gmi'
import { Guillotina } from '@guillotinaweb/react-gmi'
import { Login } from '@guillotinaweb/react-gmi'
import { getClient } from '@guillotinaweb/react-gmi'
import { ClientProvider } from '@guillotinaweb/react-gmi'
import { useState } from 'react'
import '@guillotinaweb/react-gmi/dist/css/style.css'

// guillotina url
let url = 'http://localhost:8080'
const schema = '/'
const auth = new Auth(url)
const client = getClient(url, schema, auth)

function App() {
  const [isLogged, setLogged] = useState(auth.isLogged)

  const onLogin = () => {
    setLogged(true)
  }
  
  const onLogout = () => {
    setLogged(false);
  };

  auth.onLogout = onLogout

  return (
    <ClientProvider client={client}>
      <Layout auth={auth} onLogout={onLogout}>
        {isLogged && <Guillotina auth={auth} url={schema} />}
        {!isLogged && (
          <div className="columns is-centered">
            <div className="columns is-half">
               <Login
                onLogin={onLogin}
                auth={auth}
                currentSchema={schema}
              />
            </div>
          </div>
        )}
      </Layout>
    </ClientProvider>
  )
}


export default App

To add icons:

Add the icons to the default public/index.html header

<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<meta
      name="description"
      content="Web site created using create-react-app"
    />

• Copy guillotina logo to your public

curl https://raw.githubusercontent.com/guillotinaweb/guillotina_react/master/public/logo.svg > public/logo.svg

Docs?

• Howto Extend Guillotina React form outside?
• Narrative Docs
• Getting Started - Step by Step

Develop

run a local guillotina
yarn
yarn start

Screenshots

Sponsors

This project is sponsored by Vinissimus Wine Shop and Iskra

guillotina_react's Issues

Allow ctx.refresh({ transparent: true })

after calling ctx.refresh() a progress bar is displayed and the screen is empty for a while, then it's rendering the data again with the new Guillotina object.

I think is interesting to allow the option to refresh the Guillotina object underneath, being transparent to the user.

Proposal: ctx.refresh({ transparent: true })

Flash shows wrong message

When I updated a product and it fails with 412 the flash message shows "Data updated". The patch changes state to isError: true but is reading isError from the previous state:

guillotina_react/src/guillo-gmi/views/users.js

Lines 76 to 80 in ab8de65

	await patch(data);
	if (isError) {
	Ctx.flash(`Update failed ${errorMessage}`, "danger");
	} else {
	Ctx.flash("Data updated", "primary");

Guillotina 6a7 on container creation fails POST call

When you are on a DB and you call Container Creation the payload is wrong:

{@type: "Container", id: ""}

besides the input field is filled by a name.

Traceback:

react-dom.production.min.js:17 Uncaught TypeError: Cannot read property 'value' of undefined
    at onChange (application.js:115)
    at onChange (useInput.js:21)
    at Object.p (react-dom.production.min.js:15)
    at C (react-dom.production.min.js:15)
    at react-dom.production.min.js:16
    at $ (react-dom.production.min.js:16)
    at L (react-dom.production.min.js:17)
    at Array.forEach (<anonymous>)
    at k (react-dom.production.min.js:17)
    at _ (react-dom.production.min.js:17)

List of proposals for improvement

After a review, I add a list of proposals for improvement:

• Provide directly the useTraversal hook. It is not recommended that the libraries directly expose the context and users have to write useContext(TraversalContext).
• Consistency between the Form elements. Input, TextArea, FileUpload etc each with its own properties which are different from the standard HTML5. Or they are the same as HTML5 or they should have their own consistent version across all elements. For example: onChange now sometimes receives the value and other times the event.
• Add source-maps to make it easier to debug for those who use the library.
• Deprecate Ctx.filterTabs and instead use TabPanel props. Or keep both, but I would make the TabPanel have this controlled by default.

Instead of:

const calculated = ctx.filterTabs(tabs, tabsPermissions);
return <TabsPanel tabs={calculated} {...props} />

Do:

return <TabsPanel tabs={tabs} tabsPermissions={tabsPermissions} {...props} />

• Change the currentTab prop of the TabPanel behavior. If the currentTab doesn't match with any tab that the user has permissions, then the first tab should be selected.
• Add types to every configuration and context content. We don't need to convert the project to TypeScript but this way, those who use our API from the IDE itself can know, for example, when doAction what actions are available without having to consult our documentation. 
• Add a formatter like Prettier to keep the code in a certain order.
• Add missing files like CONTRIBUTING.md, LICENSE...
• Remove linkstate dependency (only used in 1 component)
• Replace react-use to own hooks: It's importing 60kb for 3 simple hooks...
• Add an example in the repo of a simple admin. This will be useful for two things:
  • Make it easier for users to get started
  • Allow us to test the basic functionalities, either with cypress or in the development environment
• ... Anything else you would like to add?

UI missaligned when searching

With the multiactions feature this part feels like a bit missaligned. Make the search appear on the right of the actions But on the same horitzontal line.

Consider vendoring react use dependency

This is a long term project, and we don't like to have so many dependencies,
Evaluate how many scripts we are using from react-use, and vendor them.
This will allow us to stabilize on the future,

Allow define for each type their columns in items panel

Actually we define the columns that use in items panel in client and the same for each type. I think that is better define it in the registry for each type.

How would I export a container with children and import it in another instance?

replace client fetch with isomorphic fetch

Better to just allow overriding the default implementation from config,

Created and modified rows are upside down

On delete action add a preload to the button

Refactor main guillotina component with hook useReducer

Actually it's using a "hack" around useState, that allows to work like with class components,
using the setState()

Makes a lot of sense to refactor it, using the useReducer hook (we get rid of a dep), and also
we will be more idiomatic.

• The dispatch, should be shared on the context.
• On a first stage is acceptable to replace actions from the Ctx with dispatch actions.
• The reducer should be simple.

Complete the registry history

Right, the registry it's just a POC.

• We need to be able to register new components for Contexts, paths
  from the guillotina props:

Our final API should be something like:

const registry = {
   views: {
     CustomSchema: CustomSchemaCtx
   }
   path: {
     '/db/guilotina/Content': ContentWidgetCtx
   }

<guillotina 
    registry={registry} 
    config={{}} 
    url={'https://'} 
    auth={authDriver}  />

Get rid of bloomer dependency

This is also a bit of dep, from the POC.
We used bloomer, as a dependency to be able to ship some components as fast as possible.

Get rid of them, thought we are using the modal, and perhaps the delete.

Provide edit action for Properties default view

From the properties, we would like to edit some fileds.

Add babel machinery to build the package and deploy it to npm

@ebrehault do you think we can publish it to @guillotinaweb/gmi

It's not possible to rename an object

Add cypress testing

We need an story to e2e test the gmi with a real guillotina,
we can use as an example, whatever are using at https://github.com/plone/volto

Implement edit view for behaviors

Right now, just with IDublincore

Paginator it's not resed on search

So, If you are on page 5 and launches a new search, the pagination should be cleared.
Right now, it's not updated and normally you end with 0 results.

Automate deployment of npm and pypi module

Guillotina react is released as a package on npm but also as a pypi python package, with
a default guillotina runnable on installation.
We should automate the process to release it. currently it's something like:

python3.8 -m venv env
env/bin/python install -e .[dev]
cd gmi
yarn build
cp -r build/* guillotina_gmi/gmi/
env/bin/python setup.py sdist
env/bin/twine upload dist/*

If there is only one addable type, just show it

Doesn't make sense to make the user do two clicks, if there is just one addable type

remove brace and requester

After seeing a big cunck on js builds, we must consider the inclusion of (react-ace + brace).

They are like 900K of javascript, and doesn't add too much value

Is the guillotina-react documentation still valid?

Hi
i have installed gmi by following the documentation. The application can run until the login page appears. However login is never successful. The error message in the guillotina application is as follows: [32mINFO←[0m: ::1:49704 - "←[1mGET /db/ HTTP/1.1←[0m" [32m200 OK←[0m
origin http://localhost:3000 not allowed.

Spec: Guillotina 6.3.15, Python 3.7.11

Add paginator on the bottom of the item list

Replace ace for

https://www.npmjs.com/package/react-simple-code-editor

Improve sensitive of searcher

Right now you can search only if the full searched word is exactly the same that the word that are you looking for. Is this done in this way for some reason? Or can it be improved? @jordic

Implement move items

Copy and move items, could be easy implemented with an small UI abastraction, something like this colud do the work pretty well.

You can copy items, whenever you are, they are stored on a "clipboard" (localstorage). Later, you can navigate outside, goto the folder you want to move them, and there, you can paste or move.

After paste or move (items are removed from the clipboard)

Implement behavior for IAttachment

• This will provide methods for uploading/downloading a file from the client.

Improve client instanciation on guillotina component

Acually guillotina expects an auth instance, but anyway, also a client instance should be able to be provided.

Default path to copy is /undefined

@rboixaderg after this change:

https://github.com/guillotinaweb/guillotina_react/blame/673d0da51ce97fd20393f9db01fdd2dcdebd8d91/src/guillo-gmi/actions/copy_items.js#L42

We are experimenting this issue:

By default we were showing the Ctx.path, why was this changed?

New components to edit data

Hi! I create some components to edit item's data. For example in properties tab or another custom tab to edit item's data. At now there is a EditableField that it allow to edit data and renderField that it allow view data. But if I can edit a field type attribute or multiple value type attribute this component don't allow it beucause in this cases onChange funcion is diferent or there ara some features diferent too. For example input (html tag) attributes.

I create EditableFileField, EditableInputField and EditableSelectField to edit data, and FieldValue to render data.

To use these components we define an array or schema to decide which component use in each case. I use @types endpoint from guillotina to get the schema. These components get by props if are readonly or the user can edit their data. I kept the possibility to edit by props the widget component.

I don't do pull request because I don't know if these components will be useful for the library or not. We can speak about it.

Thanks!

Code:

https://gist.github.com/rboixaderg/f286336a5ece3819b0bd7f1805ada6a2

Add an ErrorBoundry to the main guillotina component

Provide an example of using guillotina_react with next.js

• It should have custom content type. (page for example)
• Perhaps an express router that handles traversal routes.
• An script (fallback to a pgsql_dump.sql) to launch the example.
• Some SSR rendering, using the gmi/client api with next.js

Better history for forms

Right now, we take the short path to the objective, and we use, react-jsonschema-form,

Consider if we should swap it, and provide our own form handling infra.