1409889 - Convert job details tab to a React Component

Status: RESOLVED DUPLICATE of bug 1457205

(Tree Management :: Treeherder: Frontend, enhancement, P3)

Description

[Cameron Dawson [:camd]]

When a job is selected, there is a tab called "Job Details" This is a list of certain links that are associated with that job.  It is currently written in AngularJS, but we are in the process of migrating from Angular to React.

An example of a React component that lives inside our AngularJS base is:
* https://github.com/mozilla/treeherder/blob/e8fb2cefb5e86738419b02d5fa00795ea46fa107/ui/js/reactrevisions.jsx#L3

The files that apply to this feature that will need to be migrated include:
* https://github.com/mozilla/treeherder/blob/94b44451ac916c946dfe69fbed133037d7b045b7/ui/plugins/job_details/main.html#L1
* https://github.com/mozilla/treeherder/blob/30f06d36bc79c2dbda7c311a91e4595b386f3e1e/ui/plugins/controller.js

So a part of the challenge will be to get data out of AngularJS and into your React component.  This could be that you fetch this in a separate Ajax call, but would be better if it could be passed to the React component from Angular since Angular is doing a set of concurrent ajax calls for the data already.

You do NOT need to migrate the tab itself, just the contents of panel.

Comment 1

[Cameron Dawson [:camd]]

Had a conversation in IRC with Sarah about this one.  With the way that ``thTabs`` works, we set the contentId (ends up being the job.id) for each tab as it's selected.  But the ``selectedTab`` is managed back and forth through Angular.  It would be hard to have just one tab be a React component.  So here's what I'm thinking:

Make an angular wrapper (TabItem) for each tab.  And have the TabItem would be in Angular and keep track of if the tab is selected or not.  That TabItem would then contain the React component for the data.  Use the same technique to transition the rest of the tabs to React.  When all of them are transitioned, then we can transition the TabItem wrappers and the tab controller itself to React at the same time.

Does this approach sound work-able to you, Sarah?  I'll admit I didn't try it, though.

Comment 2

[Sarah Clements [:sclements]]

(In reply to Cameron Dawson [:camd] from comment #1)
> Had a conversation in IRC with Sarah about this one.  With the way that
> ``thTabs`` works, we set the contentId (ends up being the job.id) for each
> tab as it's selected.  But the ``selectedTab`` is managed back and forth
> through Angular.  It would be hard to have just one tab be a React
> component.  So here's what I'm thinking:
> 
> Make an angular wrapper (TabItem) for each tab.  And have the TabItem would
> be in Angular and keep track of if the tab is selected or not.  That TabItem
> would then contain the React component for the data.  Use the same technique
> to transition the rest of the tabs to React.  When all of them are
> transitioned, then we can transition the TabItem wrappers and the tab
> controller itself to React at the same time.
> 
> Does this approach sound work-able to you, Sarah?  I'll admit I didn't try
> it, though.

Per our IRC convo, I'll create react a component for each of the tabs and replace the markup in each of the tab.content paths (/main.html) in the thTabs factory with react components. This particular bug will still only handle the original task of converting the job details tab.