joewalling / reactadvantage Goto Github PK

Currently the Readme.md shows a REST API. Instead, it needs to include information about the GraphQL API. Include some screenshots of GraphQL Playground.

Also, include information on building the various projects and configuring them locally. Explain how to configure a local front-end project to access the GraphQL API running on our dev server. They will need to request a login from me in order to be able to access the dev GraphQL server.

The readme should be sufficient to be able to build, configure, and run the projects locally or to build front-end locally and to connect to our dev server.

There are several pages showing a list of data. Each of these has css that is similar. Refactor this css so that the common classes are in the table css. The colors used for the table should be in the variables class.

The Tenant Detail Form is where the administrator can add and edit the tenant name, edition, and is active.

The Edition dropdown shows the list of editions that are available. For now, hardcode "Standard" and "Pro" as the values. Later we will fill the values from a service.

Add a date control after the Edition dropdown. This date control should have a label of "Subscription end date".

The form should look like the below form except it should be using the default styles of the application and have the additional date control specified above.

Change front-end to be able to create, read, update, and delete tasks using Apollo and the GraphQL server.

Setup authorization and authentication using Identity server 4. You can find a tutorial for using it with ASP.NET core 2 at http://docs.identityserver.io/en/dev/quickstarts/0_overview.html

Once you have it setup, make the login forms work with it.

Provide the necessary service to persist the logged in user's profile. Add the logic to load the logged in user's profile when the My Profile menu item is clicked.

This form allows the user to specify a new password to login to their account. It should look like the attached image except that it should use colors from the color palette.

When a string value is being used in a query, the following image shows the comparison options.

The way this reads, "In" and "Not In" aren't accurate. Instead, they should be "Contains" and "Does Not Contain" since we are looking to see if the string value entered is contained in the data for that property. We should also have an option for "Starts With" that returns results where the data starts with the entered value.

Do not do this until we add the ability to run the query server-side.

On the User list the "Yes" and "No" values should be centered in the column and should have the same width. The "Yes" entry should have a green background.

Provide the necessary service to persist a user. Add the logic to load the user data into the user detail form when the edit button is clicked. The data should not have to be pulled from the db, but should come from the data already used for the rolesList.

They should all reference the same logo. For now, you can use the logo from https://wallingis.com as the placeholder. Later we will add functionality to swap out the logo. For now, the user will have to place the logo with the proper name in the proper file path.

This view allows the user to Login to an existing site using their Username and Password. The user can also retrieve their password by clicking on the “I forgot my password” link. Clicking the “Forgot Password” link displays the “Forgot Password” form.

If #10 has not been done yet, then do it first. This feature will be similar to #10 in that it will have a search area and a list area. This list is where we can see the tenants that exist in this instance of the application. The search and list areas will have the standard functionality mentioned previously for this type of component.

The dropdown button (called split button in prime-react) has 4 options. The text for those items on the menu is

• Login as this tenant
• Edit
• Features
• Delete

It should look something like this

Remove the search filter control from the top of the rolesList page

On the "Roles List" fix the spelling of "Roles" in the description

Currently, the URI of the user service to populate the userlist is hardcoded in the index.js. It needs to be turned into a configurable item. Set the initial value of the service to the current value for development.

Command npm run build not working.

Get Jest and Enzyme setup and create unit and integration tests for the front-end.

There will be 3 different levels of testing in ReactAdvantage.

• Unit Tests- Testing of individual functions or classes by supplying input and making sure the output is as expected. In ReactAdvantage, this will be done on both the server side and the client side.
• Integration Tests- Testing processes or components to behave as expected, including the side effects.
• UI Tests- (A.K.A Functional Tests) Testing scenarios on the product itself, by controlling the browser or the website, regardless of the internal structure to ensure expected behavior. We’ll use TestCafe for UI Testing. https://devexpress.github.io/testcafe/. The UI tests will be done under another issue.

Unit and integration testing of the client application will be with Enzyme and Jest. Enzyme is a testing library to render the react component into the DOM and query the DOM tree. Jest is a unit testing framework and has a test runner, assertion library, and mocking support.

While most guidance for Jest testing suggests putting tests in a folder called tests, I prefer the unit and integration tests be in the same folder as the code being tested. The files would end in “.test.js”. For example, if there is a “button.js” file, the tests for this button would be in a file named “button.test.js”

UI tests can be in a separate /tests folder.

Here are a few articles that might be useful:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests

This workshop has some good examples - https://github.com/kentcdodds/react-jest-workshop

This form provides a means for the user to edit their information and change their password. It is opened from the user profile menu.

I got a message as shown below. Please correct.

We found a potential security vulnerability in a repository for which you have been granted security alert access.

joewalling/ReactAdvantage

Known high severity security vulnerability detected in cryptiles < 4.1.2 defined in package-lock.json.

package-lock.json update suggested: cryptiles ~> 4.1.2.
Always verify the validity and compatibility of suggestions with your codebase.

This form allows the user to request a reset of their password. Upon clicking the submit button, the user will receive an email that they can use to get to the “Reset Password” view. It should look like the folowing, however it should also use colors from the color pallette

Add a GraphQL server to the backend. I'll send you a specification.

Use the prime-react datebuilder in the forked version of 2 way query-builder to allow for date queries. Include date and time.

The libraries need to be updated because security vulnerabilities have been found in the old libraries.

Provides a means for searching and viewing a list of Users. react-structured-filter
to the search area instead of the text control that is shown in the image. The search will not be implemented as part of this item.

In the grid shown below, the header for “Surname” should be “Last Name”. The “Organization” column is not needed. Instead of 3 different buttons in the right column, use a button menu that has the following options.
• Edit
• Permissions
• Unlock
• Delete

These options will not have event handlers for this item.

The colors should match colors used in the color palette. The other searchable grids should use similar coloring and layout as this one, so keep this in mind when writing this component. We will have many other similar grids with a search area and a grid with the same buttons displayed. We will want to minimize the code that is written. The things that will differ will be which data attributes they can search and the data displayed in the grid.

Clicking the "Create New User" button or selecting "Edit" from the dropdown button mentioned above will open the "User Detail" form as a modal dialog.

Provide the necessary service to persist a role. Add the logic to load the role data into the role detail form when the edit button is clicked. The data should not have to be pulled from the db, but should come from the data already used for the rolesList.

If you haven't already done # 10, do that first. This one will be done using a similar component. This list will allow the administrator to be able to search for and view roles. Add a react-structured-filter to the search area instead of the dropdown control shown in the image.

At this point, just hardcode a couple roles in the list as we have not created the data services yet.

The list will show 2 columns: Role Name and Creation Date Time.

Like the previous grid, there should be paging, sorting, ability to select 10, 25, 50, and 100 items per page, and the recordcount section similar to what is shown on the User List.

Create the necessary graphql, entities, and queries for tenancies. A tenant should have the following properties:

• Id
• Name
• Edition
• IsActive
• CreationDate

If the tenant list has already been created, then change the list to load the data from this new service.

This will require a data migration.

Provide the logic to save a new or edited tenant.

This form provides a means for adding and editing roles. It has 2 tabs as shown below. The first is the role detail and the other is to display the permissions. Use the same colors and styles as the other forms. The below images show some material design elements that I do not want to be duplicated.

Hard code a few nodes of the treeview as placeholders since we don't have data services available yet.

This is where the user can change their profile and change settings they have permission to change. If they are an administrator, their settings will include these administrative settings. When the user hovers over the menuitems, their color changes to the medium blue color. Change the name to “John Doe”, the email to “[email protected]” and use my picture found at https://wallingis.com/leadership/. Resize and edit the image as needed. The current image was from another site and was not meant to be included in this repository. I don’t want to be accused of infringing on someone else’s copyright.

When “My Profile” is clicked, it should display the logged in users “My Profile” form in the main content area.

Create the necessary entities, queries, and load the roles into the rolesList page. You can do it similar to the way it was done for the UsersList page. Create the EF migration. Add "Admin" and "User" as roles in the migration so that after the table is created, these 2 roles get added.

Correct me if I'm wrong

If I have more than one product, do I need to use a single server auth for all products? Would it be interesting to use this project as a basis?

I do not know if I was clear, I'll give an example

1 - Pharmacy Software
2 - Clinica Software

They are different business logic, so I would use ReactAdvantage as authserver

The roles form has a large empty space above the roles list. Reduce that space so that it looks good.

Change front-end to be able to create, read, update, and delete projects using Apollo and the GraphQL server.

Instead of separate buttons in the command column, there should be a single split button with an option for each of the current options.

Look at the roles or usersList for an example of this.

This form allows adding and editing users. There are 2 tabs on the form. The first is the user detail, and the second is to set the roles the user has access to.

While the below forms look like they might have some material design, do not duplicate that. The image is to show how the items are laid out on the form. Do not include the "Organization" control that is shown in the image.

If the "Set Random Password" checkbox is checked, the password controls will be hidden since user input is not required. The top image is the "User Information" tab and the bottom image is the "Roles" tab.

The below tab is where the roles are set for the selected user.

Set up a dev server on Azure. Create a build process to build both the front and backend and deploy to the new app service. Configure the settings so that the front-end can find the backend. Verify that the application runs.