• When not in WAITING_FOR_RESPONSE, hide the confirm button

There's an error with the key prop on the ShotsView component:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ShotsView`. See https://reactjs.org/link/warning-keys for more information.

Check the documentation: https://reactjs.org/docs/lists-and-keys.html

The interface should provide a reliable way to login and logout the user.

Should also be possible to have a user page with session information.

• Separate login page from other pages (also put pages into their own folder for organization)
• Move login button and avatar to the right of the header
• Center login on page and add Silex logo
• Correct the color of the avatar text when there is no profile picture
• Make the avatar clickable when mouse hovering it
• Do form validation when entering the email address
• Enable press enter to submit login
• Add Silex text next to logo in the header and make it clickable to go home /
• Make a user page with information (like Kitsu)
• Fix double rendering which leads to http get /authenticated twice

When the step label is too long, it overflows

Check if it does that with command's labels too

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

The project selector should have the generated color from it's name just like the avatar.

Use the color-hash library like in User.ts

Use Husky to add git hooks in order to force conventional commit messages.

See:

• https://www.conventionalcommits.org/en/v1.0.0/
• https://typicode.github.io/husky/#/
• https://github.com/conventional-changelog/commitlint
• https://medium.com/linkapi-solutions/improve-your-commits-with-conventional-commits-72134a852d19

We need to save the UI preferences in either the local browser storage or an electron config.

Like:

• List display or grid display
• The last opened project
• Last tasks...

Implements a file explorer with a tree structure. It should be possible to navigate into sequences / shots / task / scenes and ultimately versions (both local and remote).

• Implement the left menu with a Drawer
• Implement a switch project button next to the avatar
• Have a tree view to display sequences/shots/task/scenes
• Remove sequences and display them as category

Add documentation to the README including badges / screenshots, run commands and global architecture.

As the project is getting more complex, we might want to consider those issues:

Use a proper state management library like:

• Recoil
• Redux

Because right now, using React contexts is fine but we might get into trouble later with unnecessary re renders : https://blog.logrocket.com/pitfalls-of-overusing-react-context/

For now we have this:

<SnackbarProvider maxSnack={3}>
  <ProvideGraphQLClient>
    <ProvideSocket>
      <ProvideAuth>

        {/* ... */}

      </ProvideAuth>
    </ProvideSocket>
  </ProvideGraphQLClient>
</SnackbarProvider>

When clicking on the logout button, it's redirecting to the / route but the view doesn't change.

When new steps are inserted during the execution of an action, all the indexes of the following steps are shifted to insert the new steps in between. When an update is sent, the order of the steps must be recomputed using the index attribute to allow inserting steps in the middle of other steps.

The login action can take some time. For user feedback, it would be great to display a circular progress until it's completed.

Check the material UI documentation for that.

Just like the sequences for the shots, show the asset categories in the asset browser

On action -> display parameters -> Submit -> return the new parameters

• Create a parameter to choose in a list of predefined choices
• Create a parameter for toggle
• Create a parameter for slider with a range
• Create a prettier parameter for file path
• Create a prettier parameter for file int

ESLint and Prettier are essential for defining a common programming style and formatting the code. ESLint can also provide useful react helpers (dealing with useEffect dependencies for example).

• enable useful lint warnings
• sort imports by alphabetic order
• Add this rule to minimize MUI bundle size: https://mui.com/guides/minimizing-bundle-size/#option-1

In the explorer view, the tasks that are returned by the queries are not sorted by the order defined by the pipeline. This is especially visible on the list view.

Implement this link:

https://mui.com/guides/minimizing-bundle-size/#option-2

• https://www.npmjs.com/package/eslint-plugin-unused-imports
• https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/ban-types.md

See: https://usehooks.com/

If a user creates a shot on a running instance of Kitsu or update a task, the data does not update on another client with Apollo GraphQL. (except when reloading the page)

A nice way would be to suscribe to zou's events with socketio as described in the Gazu documentation and then refetch the active GraphQL queries (see this)

Handle asyncio connection with the WSS server.

• Store socket in React.Context
• Store the list of dccs and fetch this at startup and update on connect and deconnect
• Make a view with the dccs (with logos)

Step to reproduce:

• go on silex-client
• git checkout conform-action
• rez build -i
• rez env silex_client -- silex action conform

-> the value of the parameter "Conform the sequence of the selected file" is actually false but shown to true
If you let the parameter at the default value, the value will actually be false

Be able to create a new task (possibly a task type?)

Do the same for assets to easily create them during the production.

• Create a new asset
• Create a new task (use task names with the default main)
• Create a new shot
• Create a new sequence

Be able to filter shots and assets with a simple search bar

Add:

• Role and status

Since nginx will redirect to index.html if the route is not found, we need to have a 404 error page.

Right now the page will show up but with no users.

Since there is no navigation buttons in Electron, when we run an action it's convenient to have a button to come back to the previous page.

Description

When browsing the tasks of a shot in the explorer, we don't actually know the sequence we are currently in because the shot number could be included in another sequence.

For example:

Solution

It should show SQ01 / SH01

Currently the components are in the components folder and some of them are alongside the pages folder.

It would be more appropriate to introduce another level of folder structure like common or wrappers

Looks like the type React.FC for function components is not very useful and might be too restrictive.

See: https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion
And also : facebook/create-react-app#8177

Automatic codemod: https://github.com/gndelia/codemod-replace-react-fc-typescript

Other links:

• https://backstage.io/docs/architecture-decisions/adrs-adr006
• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/

When UI elements are rendered, it's not visually nice if they are not fading in/out.

Use Transitions in MUI to smooth the user experience 💅

In Electron:

In Firefox:

New parameter types for commands include:

• Multiple select
• Int array
• Task selector

https://mui.com/components/skeleton/

Steps to reproduce:

git checkout optimisation
rez env silex_client -- silex action stress-test

Problem

This action iterate over the tester action 40 times. It ends up with a huge action which is supposed to mimic the size of a conform action on a big scene.
The more steps there is, the slower it gets. If we work only with diff, the action can have any size and update time will not grow (or a little)

Like shots and sequences, be able to go back to the asset category.

Tweak the ActionContext context to add an array of actions and organize the action page in tabs.

The actions should be canceled by the user and switch between them

Like the Electron, display the build version in the left menu

Currently the graphql queries are typed but with the full type. Since GraphQL allow us to only ask for specific fields, the properties are not all present in the output. It was leading to the #25 issue.

One solution is to manually type the query return type.

https://www.apollographql.com/docs/react/development-testing/static-typing/#usequery

Harvest was the statistics tool for monitoring the Tractor render farm.

Since it's React based, the front-end part can be integrated into this codebase taking into account the user logged in data and the Kitsu context.

See:

• https://github.com/ArtFXDev/harvest-ui/
• https://github.com/ArtFXDev/harvest_api

Steps to reproduce:

git checkout parameter-update
rez env silex_client -- silex action tester

Parameters

• Text parameter, readonly text to display : {type: {name: "text"}, value: <string>}
• Path parameter, update to handle more options: {type: {name: "Path", multiple: <bool>, extensions: <string[]>}, value: <string> | <string>[]}
• Frame set parameter, like a string parameter with regex check {type: {name: "FrameSet"}, value: <string>} (see FrameSet docstring at https://github.com/justinfx/fileseq/blob/master/src/fileseq/frameset.py)

Optional sugar (These parameters are used only in hidden parameters for now)

• Warn the user when he press "continue" and a value is still null
• List parameter, this parameter is a list of any parameter, it would be similar to the multiparm folders in houdini:
  {type: {name: "list", itemtype: {<the-type-of-the-parameter-in-the-list>}}, value: <any[]>}