[WIP] Allow the open source orchestra to be injected with closed source components #620
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
elstonayx
commented
Jun 8, 2020
| @@ -8,6 +8,11 @@ module.exports = override( | |||
| // the metronome design system has not been compiled before exporting. | |||
| path.resolve('node_modules/@b12/metronome'), | |||
| path.resolve('src/') | |||
| ]) | |||
| ]), | |||
| addWebpackExternals({ | |||
There was a problem hiding this comment.
This removes the React/ReactRedux packages from the build phase, so that all apps would rely on the global React/ReactRedux package in the global object.
There was a problem hiding this comment.
add this as an explanatory comment :)
elstonayx
force-pushed
the
orchestra-hacks
branch
from
c507f92
to
45c6ca9
Compare
elstonayx
changed the title
2 tasks
marcua
reviewed
Jun 9, 2020
| ######## | ||
|
|
||
| Below, we'll walk through the frontend portion of the codebase written in | ||
| React. |
There was a problem hiding this comment.
Suggested change
| React. | |
| React. Note: the current Orchestra frontend is written in Angular.js. This | |
| document describes a currently experimental migration to React. |
marcua
reviewed
Jun 9, 2020
| *********** | ||
|
|
||
| The frontend codebase uses the create-react-app starter as the base, so as to | ||
| ease the configuration process. As of current, we use an add-on called |
There was a problem hiding this comment.
Suggested change
| ease the configuration process. As of current, we use an add-on called | |
| ease the configuration process. We currently use an add-on called |
marcua
reviewed
Jun 9, 2020
| The frontend codebase uses the create-react-app starter as the base, so as to | ||
| ease the configuration process. As of current, we use an add-on called | ||
| ``customize-cra`` to customize some of the webpack features that we need, so that | ||
| we don't have to 'eject' from create-react-app just to use those functionality. |
There was a problem hiding this comment.
Suggested change
| we don't have to 'eject' from create-react-app just to use those functionality. | |
| we don't have to 'eject' from create-react-app just to use that functionality. |
marcua
reviewed
Jun 9, 2020
| ``customize-cra`` to customize some of the webpack features that we need, so that | ||
| we don't have to 'eject' from create-react-app just to use those functionality. | ||
|
|
||
| Features that we use as of current: |
There was a problem hiding this comment.
Suggested change
| Features that we use as of current: | |
| Features that we override: |
marcua
reviewed
Jun 9, 2020
|
|
||
| Features that we use as of current: | ||
| - ``babelInclude`` - this is to include compilation of our open-source design | ||
| system, as we do not precompile the design system before releasing an npm |
There was a problem hiding this comment.
Suggested change
| system, as we do not precompile the design system before releasing an npm | |
| system (`metronome`), as we do not precompile the design system before | |
| releasing an npm |
marcua
reviewed
Jun 9, 2020
| package. | ||
| - ``addWebpackExternals`` - this allows us to exclude certain packages from the | ||
| webpack compilation. Right now, we are excluding React, ReactDOM, and ReactRedux | ||
| as these packages are depended on for both the closed source portion of the |
There was a problem hiding this comment.
Suggested change
| as these packages are depended on for both the closed source portion of the | |
| so as to not duplicate the import of these packages in both the open and | |
| closed source portions of the |
marcua
reviewed
Jun 9, 2020
| ****************************** | ||
|
|
||
| We integrate Orchestra with our closed-source product, and we had to figure out | ||
| a way to inject closed source components in the open source world. Here are some |
There was a problem hiding this comment.
Suggested change
| a way to inject closed source components in the open source world. Here are some | |
| a way to inject closed source step components in the open source shell. Here is how to |
marcua
reviewed
Jun 9, 2020
|
|
||
| We integrate Orchestra with our closed-source product, and we had to figure out | ||
| a way to inject closed source components in the open source world. Here are some | ||
| advice on how you can implement this feature. |
There was a problem hiding this comment.
Suggested change
| advice on how you can implement this feature. | |
| implement this for your closed source step components. |
marcua
reviewed
Jun 9, 2020
| The closed source portion of the codebase would be compiled, and the compiled | ||
| scripts would be included in the open source portion of the codebase. We include | ||
| these scripts programmatically, by injecting the script tags into the compiled | ||
| ``index.html`` You can customize which scripts to be injected by modifying the |
There was a problem hiding this comment.
...modifying the VARIABLE_NAME variable of the orchestra/settings.py file.
marcua
reviewed
Jun 9, 2020
| return render(request, 'orchestra/newindex.html') | ||
| return render(request, 'orchestra/newindex.html', { | ||
| 'javascript_includes': [ | ||
| _get_script_tag(static(file)) for file in ORCHESTRA_JS_INCLUDES |
marcua
reviewed
Jun 9, 2020
| @@ -0,0 +1,5 @@ | |||
| ORCHESTRA_JS_INCLUDES = [ | |||
There was a problem hiding this comment.
examples go in
/example_project/example_project/settings.py :)
marcua
reviewed
Jun 9, 2020
| @@ -0,0 +1,6 @@ | |||
| interface Window { | |||
| orchestra?: { | |||
| tasks: React.FC<{ id: string }>; | |||
There was a problem hiding this comment.
use a similar format to the Angular version
orchestra:
workflows:
workflow_slug:
version_slug:
step_slug:
Component
e.g.,
window.orchestra.workflows.example_workflow.v3.example_step = StepComponent
marcua
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR extends the functionality of the new Orchestra frontend to allow closed source components to be injected in the respective places, and to use a singular source of React and ReactRedux packages so that both the open source and the closed source can share the same package.