Team UI/UX Roadmap December to June

[Walden]

Here is our roadmap of items we’re planning on working on over the next six months. The items towards the bottom are a little more fuzzy but we will work on defining them better once we get closer. The first five items are currently in progress, the rest have not been started on.

This is obviously subject to change but please provide any feedback that you have.

• Finish subscriptions refactoring
• Get the dates PRs merged
• Stabilize the build/release process
  • Foreman as an NPM package so plugins can more easily use code from core
    • Use github url for foreman npm package
    • Replace imports in katello, ansible, rex
    • No longer mocking things from foreman in tests
    • Clean up katello package.json and remove duplicates
    • Documentation for how to use foreman react components
• Bring SCSS into webpack
  • Research how exactly to do this
  • Bastion scss
  • Katello scss
• End to End testing
  • Infrastructure for e2e testing
  • Write some tests
• Move the components from the katello move_to_* folders to appropriate projects
  • Replacing component in katello with pf/foreman component once merged
• Converge upon a best practice for code in katello
  • Add Coveralls
  • Add patternfly-react eslint
  • Ensure RH repos javascript is in line with best practice directory structure
  • Ensure RH subscriptions javascript is in line with best practice directory structure
  • Ensure Module Streams javascript is in line with best practice directory structure
• Running webpack through a proxy
• Extend components; find a way to replace deface
  • Figure out where we are using deface (via source)
  • RFC for extendable components
  • Meetings with plugin owners
  • Registry for extended components
• React code generators to reduce boilerplate and generate full functional tests
  • Component
  • Actions, reducer
  • Selector
  • Tests
  • yeoman
• Host wizard
  • Initially without backend and in storybook
  • After some happy paths are achieved move into labs section
• SPA
  • Rebase POC, update WIP branch
  • Figure out how it will work with plugin react pages
• Replace erb helpers with react versions

Thanks,
Walden

[John_Mitsch]

All awesome things and really great improvements

Do we have any plans around upgrading our React version? I know there has been a lot of noise in the React community about the new features in the latest releases (suspense, hooks, etc…), I have no idea how beneficial they are to us, but I’m just wondering if the UI/UX team has had any discussions with regard to upgrading React.

Thanks for sharing this roadmap!

[Walden]

Do we have any plans around upgrading our React version? I know there has been a lot of noise in the React community about the new features in the latest releases (suspense, hooks, etc…), I have no idea how beneficial they are to us, but I’m just wondering if the UI/UX team has had any discussions with regard to upgrading React.

I’m not sure what all is involved in that and how backwards compatible it is but I am always in favor of keeping up to date so we don’t end up several version behind like we did with angular in katello. Good suggestion!

@sharvit @amirfefer @Laviro do y’all have any thoughts on this?

[Laviro]

It’s funny, next wednesday 11.12 we ( The Israeli team )
are going to a meetup about new key features in React 16.6
and React Hooks which will be presented on React 16.7 !!
So I guess we will have much more knowledge than.

Another thing, in my opinion, is that with Redux we can create
most of the new patterns and probably control them better,
but i guess that there are a lot of new features that could
make our life easier too.

I’ll be smarter next week

[John_Mitsch]

It’s funny, next wednesday 11.12 we ( The Israeli team )
are going to a meetup about new key features in React 16.6
and React Hooks which will be presented on React 16.7 !!

Thanks for the update! Please share what you can from that meeting after it happens.

[TimoGoebel]

Thanks for sharing the roadmap.

Host wizard

• Initially without backend and in storybook
• After some happy paths are achieved move into labs section

At dm we developed lisa, a react based spa app to create hosts in Foreman. We have about 150 Users in Foreman and use Foreman as a self-service portal for developers and admins from our product teams. The current host creation form was a huge barrier for users and a lot of times users created hosts that were valid in Foreman, but unable to build.

Since we use lisa, we haven’t got a single ticket where somebody complains that a host does not build. Before we have at least two tickets every week.

The app uses patternfly-react components (with custom styles to look good) and graphql under the hood.

Here are some screenshots.

If this sounds interesting, feel free to get in touch for a chat.

[sharvit]

Do we have any plans around upgrading our React version? I know there has been a lot of noise in the React community about the new features in the latest releases (suspense, hooks, etc…), I have no idea how beneficial they are to us, but I’m just wondering if the UI/UX team has had any discussions with regard to upgrading React.

We are using the latest react version atm (16.6.3), when it comes to features we don’t use all of them of curse.
Since we use redux, most of the state-management features are not relevant for us. The context-api is cool but we care less because redux work with those React APIs so it is transparent to us.

At dm we developed lisa, a react based spa app to create hosts in Foreman. We have about 150 Users in Foreman and use Foreman as a self-service portal for developers and admins from our product teams. The current host creation form was a huge barrier for users and a lot of times users created hosts that were valid in Foreman, but unable to build.

Sound pretty amazing to me @TimoGoebel We all understand that the current host form is a huge barrier for users.
We should definitely aim to learn from what you did there.

[amirfefer]

Lisa looks awesome ! we’'ll be in touch

[Roxanne_Hoover]

These are pretty interesting. I wouldn’t mind chatting with you to get a better overview of the design.

[Walden]

At dm we developed lisa, a react based spa app to create hosts in Foreman.

Is this available on github? Wonder if it could be a good jumping off point for porting this back to foreman core.

[TimoGoebel]

Is this available on github? Wonder if it could be a good jumping off point for porting this back to foreman core.

Not publicly as it’s pretty opinionated and our open-source policy states to just publish code that may be useful for a wider audience. But maybe we can bend the rules here a bit.

[gilad215]

React code generators to reduce boilerplate and generate full functional tests

• Component
• Actions, reducer
• Selector
• Tests
• yeoman

This is a great goal, for the past couple of days i’ve been working on a shell script that can help us.

The script runs with the command:
npm run create-react-component

The scripts asks for the new component’s name, and checks if it already exists.
If it doesn’t exist it then proceeds to ask if the component should be connected to Redux or not.

After creating the files the script prints a tree of the file structure and reminds the author to register the component (also written in a deleteme comment inside index.js file)

I created two different files for the templates, component-templates and redux-templates for additional redux files.

All the files are injected with content based on the component’s name, with functioning tests!

This could be big for newcomers, but i’m sure ill use it too to save a lot of time
Feedback is more than appreciated on the component templates! please try and use it

PR - https://github.com/theforeman/foreman/pull/6317

[cintrix84]

Would it be possible if you cant share this to show how to get a skeleton app for something like this. I would like to implement this for some of our users