FOSS: Appsmithに貢献してみた

Appsmithとは手軽にアプリUIを作るためのWebサービスであり、外部APIやデータベースへの要求も可能なためデータの表示にも向いている：

今回はそのデータ表にまつわるバグの修正過程の話をしたいと思います。

Issueの問題

今回修正したIssueはこちら。

そのIssueでご覧になれる、コメント欄が「宜しければ、このIssueを私にアサインしていただけないでしょうか」のようなコメントで埋まっているのにも関わらず、PRを投稿した人は誰一人もいない。意図がわからなくもないが、明らかに皆の時間を無駄にしてしまう。

そこで、Issueにコメントするより、PRを準備することを選んだ。

バグの説明

Appsmithに表ウィジェットを追加して初めてデータ源を繋げると次のバグが発生する：

最初の状態：Editableチェックボックスにright-padding: 6px;が適用されていない。

ページをリロードすれば：今回はright-padding: 6px;の効果が見られる。

質問：なぜ最初の時だけthis.state.hasScrollableListが真になる？

// PrimaryColumnsControlV2.tsx
// componentDidUpdate
const hasScrollableList =
      listElement && listElement?.scrollHeight > listElement?.clientHeight;

• リストのスクロール範囲はリストの高さより大きければ、当然ながらスクロールできるということでhasScrollableListは真になる（参照：MDN）

しかし、hasScrollableListはfalseで初期化される。

したがって、今回のバグの原因は：リストは最初からスクロール可能なのに関わらず、コンポーネントが変更されるまでhasScrollableListも変更されず、パディングが変わらない。

解決方法

クラスコンポーネントが使用されるので、componentDidMountにhasScrollableListを初期化するだけで完成。コードの方はcomponentDidUpdateのコードをそのままにコピーした。

マージまで

単純なバグ修正だったが、PRの投稿からマージまで２週間ぐらい経った。それまでの流れをまとめると：

1. 投稿（1日目）
2. Appsmithチームのレビュー（４日目）
3. 修正（5日目）
4. コンポーネントの自動テストの起動（5日目）：そこでCypressテストに問題発生
5. メインブランチとマージする（11日目）
6. テストが成功する。ゆえに、PRをマージ（1２日目）

要は、私がメインブランチをマージしなかったせいで６日間無駄にしたわけだ。

CodeRabbit AI

PRを初めて投稿したとき、CodeRabbitというAIサービスが発動し、私のPRとリンクされたIssueの比較を行った。そして驚くことに、私のPRをようやくしたうえに、Issueの修正の修正にどう繋がるのかも説明してくれた。関係ないことも含まれているが、それでも便利だなと思った。