はじめに
AWX の UI （画面）で一部修正したい箇所があり、修正してPRを出したところマージしていただきました。
AWX の UI 修正は今回が初めてでした。特にフロントエンドは分からないことが多い状態からでしたが、どうにか無事にマージしていただきました。
この記事では、技術的な調査や修正、PR提出までのやったことをまとめます。
[2022/10/04 追記] バージョン 21.7.0 としてリリースされました（ Changelog）。
修正したかった箇所
各画面の右上にベルアイコンがあり、ワークフロージョブテンプレートの実行中に承認ノード止まっている待ちの数を示すのですが、待ちが0のときと1以上のときで見た目の変化が少なく分かりにくいなと感じていました。
なのでここを修正してみようと思いました。
最終的にはこうしました。
React の調査
AWXの UI は React （17系）で作られていることが分かったので、まず React について調べました。そもそも JavaScript は、入力フォームのバリデーションで昔少し使ったことがある程度なので、まず最近の JavaScript の書きっぷりがわからない状態でした。
関連する書籍をいくつか読んでいくことにしました。
上記の本で、React の前提知識である最近の JavaScript の書きっぷり、コンポーネントの考え方、JSX、Props、State、副作用などのReact の基本が学習できました。
もうちょっと別の React の本を読んでみたいなと思って以下の本を読みました。
そもそもフロントエンドの全体像が分かっていないなと思ったので、次に以下の本を読みました。先にこれを読んでおけばよかったかなと思いました。
一番新しそうな本として以下の本も読みました。ただし、今までわからなかった部分の補足としてつまみ読みという感じです。AWX では Next.js を使っていないようなので Next.js のパートは、さーっと読むにとどめました。
最後はこちら。関数型プログラミングのところはほぼ飛ばしてしまいました・・。
今回は本の読み方として、体系的に学びたいというよりは、修正に必要な知識を取り込みたい、というスタンスです。
AWX のコードもなんとなーく、少しだけですが読めるようになってきました。
ただ、JavaScript についてはこの記号、書き方なんだっけ？となり、React としては、これやるとどうなるんだっけ？と思うことは相変わらず多々ありました。
修正箇所の特定
AWX の UI のコードは、awx/ui ディレクトリにあるようです。この中から、画面右上のあのバッジを定義しているコンポーネントを探せば良いわけです。が、ちょっと自信がなかったので、React Developer Tools という Chrome 拡張を使って、コンポーネントの階層が確認できたのが助かりました。
AWX は PatternFlyというコンポーネント集を利用しています。現状のバッジは、ベルアイコンは BellIconというアイコン、数字部分は Badge というものを使っていることが分かりました。
PatternFlyのページはあとでも何回か見る機会がありました。
開発環境の構築
なんとなくコードが追えるようになったり、修正箇所が特定できても、ちょっといじって変化を見て・・という工程を繰り返さないと理解が深まらないことが多々あります。
なので、コードを修正するための環境をつくりました。詳細は別の記事にまとめています。
修正作業
ようやく修正作業です。修正して確認して・・を繰り返しました。ホットリロード便利ですね。
テストを書くか迷ったんですが、既存のテストの粒度感をみて書きませんでした。書く練習もしてみれば良かったなとは思います。
PR提出
どきどきしながら PR を出しました。
薄々感じていたのですが、最初にやった修正でもちょっとまだ変化が分かりにくいかなと思っていました。それもあってか、別のコンポーネント Notification badge に差し替えたほうが良いとコメントいただきました。なるほど確かにと思って、再度修正しました。
今回始めての PR 提出だったのですが、このリポジトリの仕組みとしては、初めての場合はCIを走らせるのに承認が必要でした。いざ承認されて CI が走ったら失敗しました。今回の私の修正とは無関係なようでした。レビュアーの方に rebase を指示されたので rebase して force push しました。CONTRIBUTING.md にも merge ではなく rebase でという旨の記述がありました。
We like to keep our commit history clean, and will require resubmission of pull requests that contain merge commits. Use git pull --rebase, rather than git pull, and git rebase, rather than git merge.
Cypress によるテスト（これは手動でキックするようです）は失敗しましたが、これも無関係だったようで、マージしていただきました。
この修正を含むリリースは現時点はまだですが、21.7.0 とか 22.0.0 とかのバージョンに含まれるのかなと思います。
おわりに
はじめてでしたが、無事にマージされてよかったです。 この修正が Automation Controlelr にも入るのか、いつ入るのかは分かりませんが、入ると良いなぁと思っています。
