diff --git a/opensource/kitematic/work_issue.md b/opensource/kitematic/work_issue.md index 493ad9e3c1..e347eadb38 100644 --- a/opensource/kitematic/work_issue.md +++ b/opensource/kitematic/work_issue.md @@ -15,18 +15,18 @@ For this tutorial, we will work on issue Atom as it's a full featured editor with great ES lint support to keep your code organized. +1. Open the project in your favorite editor - We recommend using Atom as it's a full featured editor with great ES lint support to keep your code organized. -2. Open the `ContainerSettingsGeneral.react.js` file which is found under the `src/components/` folder and look for the following piece of code, which is in fact the layout (like HTML in the browser): +2. Open the `ContainerSettingsGeneral.react.js` file which is found under the `src/components/` folder and look for the following piece of code, which is in fact the layout (like HTML in the browser) circa line ~200: ``` - return ( -
- ... + return ( +
+ ... ``` - (line ~200) + -3. Above this code we will create a javascript variable that will allow us to display our container id: +3. Above this code we will create a javascript variable that will allow us to display our container id: ``` let shortId = ( @@ -41,39 +41,47 @@ To do this, edit the container `General Settings` layout. This snippet has been saved as a GitHub gist. -4. We then need to add the variable to the rendered view, by adding it below the `{rename}` tag. The new render code should look something like: +4. We then need to add the variable to the rendered view, by adding it below the `{rename}` tag. The new render code should look something like: - ``` - return ( -
- {rename} - {shortId} ``` - At this point, the updated code should look similar to this: + return ( +
+ {rename} + {shortId} + ``` + + At this point, the updated code should look similar to this: ![Javascript to display container id in kitematic](images/settings-code-example.png) -5. Save the code changes, re-start Kitematic. +5. Save the code changes, re-start Kitematic. - $ npm start + ``` + $ npm start + ``` - Now, the container ID should show on the General Settings tab, along with the container name. + Now, the container ID should show on the General Settings tab, along with the container name. - ![Container ID](images/kitematic_gui_container_id.png) + ![Container ID](images/kitematic_gui_container_id.png) - *Note that the container ID in Kitematic matches the ID shown as output to the `docker ps` command.* + *Note that the container ID in Kitematic matches the ID shown as output to the `docker ps` command.* -6. You can close the Kitematic application now, and kill the running process in the terminal via CTRL+c. +6. You can close the Kitematic application now, and kill the running process in the terminal via CTRL+c. -7. Stage your changes by adding them. +7. Stage your changes by adding them. - $ git add src/components/ContainerSettingsGeneral.react.js + ``` + $ git add src/components/ContainerSettingsGeneral.react.js + ``` -8. Commit your code changes with a comment that explains what this fixes or closes. +8. Commit your code changes with a comment that explains what this fixes or closes. - $ git commit -s -m "added container ID to show on settings tab, fixes issue #1191" + ``` + $ git commit -s -m "added container ID to show on settings tab, fixes issue #1191" + ``` (See Coding Style in the general guidelines on Contributing to Docker.) ## Where to go next + At this point, you are ready to [Review your branch and create a pull request](create_pr.md) to merge your new feature into Kitematic.