Skip to content

Commit e2a8582

Browse files
mattdhollowaymattdholloway
committed
add UI diff
1 parent 23de0bc commit e2a8582

1 file changed

Lines changed: 235 additions & 0 deletions

File tree

‎.github/workflows/ui-diff.yml‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
name: UI Components Diff
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- 'ui/**'
7+
- 'pkg/github/ui_embed.go'
8+
- 'pkg/github/ui_resources.go'
9+
- 'pkg/github/issues_ui.go'
10+
11+
permissions:
12+
contents: read
13+
pull-requests: write
14+
15+
jobs:
16+
ui-diff:
17+
runs-on: ubuntu-latest
18+
19+
steps:
20+
- name: Check out PR code
21+
uses: actions/checkout@v6
22+
with:
23+
path: pr
24+
25+
- name: Check out base branch
26+
uses: actions/checkout@v6
27+
with:
28+
ref: ${{ github.base_ref }}
29+
path: base
30+
31+
- name: Set up Node.js
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: "20"
35+
36+
- name: Build PR UI
37+
working-directory: pr
38+
run: |
39+
cd ui
40+
npm ci
41+
npm run build
42+
mkdir -p dist
43+
mv dist/src/apps/get-me/index.html dist/get-me.html 2>/dev/null || true
44+
mv dist/src/apps/create-issue/index.html dist/create-issue.html 2>/dev/null || true
45+
46+
- name: Build base UI
47+
working-directory: base
48+
continue-on-error: true
49+
id: base-build
50+
run: |
51+
if [ -d "ui" ]; then
52+
cd ui
53+
npm ci
54+
npm run build
55+
mkdir -p dist
56+
mv dist/src/apps/get-me/index.html dist/get-me.html 2>/dev/null || true
57+
mv dist/src/apps/create-issue/index.html dist/create-issue.html 2>/dev/null || true
58+
echo "exists=true" >> $GITHUB_OUTPUT
59+
else
60+
echo "exists=false" >> $GITHUB_OUTPUT
61+
fi
62+
63+
- name: Generate diff report
64+
id: diff
65+
run: |
66+
echo "# UI Components Diff Report" > diff-report.md
67+
echo "" >> diff-report.md
68+
69+
# Check if base has UI
70+
if [ "${{ steps.base-build.outputs.exists }}" != "true" ]; then
71+
echo "🆕 **New UI components introduced in this PR**" >> diff-report.md
72+
echo "" >> diff-report.md
73+
echo "| App | Size |" >> diff-report.md
74+
echo "|-----|------|" >> diff-report.md
75+
for file in pr/ui/dist/*.html; do
76+
if [ -f "$file" ]; then
77+
name=$(basename "$file")
78+
size=$(wc -c < "$file" | xargs)
79+
size_kb=$(echo "scale=1; $size / 1024" | bc)
80+
echo "| $name | ${size_kb}KB |" >> diff-report.md
81+
fi
82+
done
83+
echo "" >> diff-report.md
84+
echo "has_changes=true" >> $GITHUB_OUTPUT
85+
exit 0
86+
fi
87+
88+
# Compare files
89+
has_changes=false
90+
91+
echo "## Bundle Size Comparison" >> diff-report.md
92+
echo "" >> diff-report.md
93+
echo "| App | Base | PR | Delta |" >> diff-report.md
94+
echo "|-----|------|----|----|" >> diff-report.md
95+
96+
# Get all unique HTML files
97+
all_files=$(ls base/ui/dist/*.html pr/ui/dist/*.html 2>/dev/null | xargs -n1 basename | sort -u)
98+
99+
for name in $all_files; do
100+
base_file="base/ui/dist/$name"
101+
pr_file="pr/ui/dist/$name"
102+
103+
if [ -f "$base_file" ] && [ -f "$pr_file" ]; then
104+
base_size=$(wc -c < "$base_file" | xargs)
105+
pr_size=$(wc -c < "$pr_file" | xargs)
106+
delta=$((pr_size - base_size))
107+
base_kb=$(echo "scale=1; $base_size / 1024" | bc)
108+
pr_kb=$(echo "scale=1; $pr_size / 1024" | bc)
109+
110+
if [ $delta -gt 0 ]; then
111+
delta_kb=$(echo "scale=1; $delta / 1024" | bc)
112+
delta_str="+${delta_kb}KB 📈"
113+
has_changes=true
114+
elif [ $delta -lt 0 ]; then
115+
delta_kb=$(echo "scale=1; ${delta#-} / 1024" | bc)
116+
delta_str="-${delta_kb}KB 📉"
117+
has_changes=true
118+
else
119+
delta_str="No change"
120+
fi
121+
122+
echo "| $name | ${base_kb}KB | ${pr_kb}KB | $delta_str |" >> diff-report.md
123+
elif [ -f "$pr_file" ]; then
124+
pr_size=$(wc -c < "$pr_file" | xargs)
125+
pr_kb=$(echo "scale=1; $pr_size / 1024" | bc)
126+
echo "| $name | - | ${pr_kb}KB | 🆕 New |" >> diff-report.md
127+
has_changes=true
128+
elif [ -f "$base_file" ]; then
129+
base_size=$(wc -c < "$base_file" | xargs)
130+
base_kb=$(echo "scale=1; $base_size / 1024" | bc)
131+
echo "| $name | ${base_kb}KB | - | 🗑️ Removed |" >> diff-report.md
132+
has_changes=true
133+
fi
134+
done
135+
136+
echo "" >> diff-report.md
137+
138+
# Check for component changes by comparing the embedded component names
139+
echo "## Component Analysis" >> diff-report.md
140+
echo "" >> diff-report.md
141+
142+
for name in $all_files; do
143+
base_file="base/ui/dist/$name"
144+
pr_file="pr/ui/dist/$name"
145+
146+
if [ -f "$base_file" ] && [ -f "$pr_file" ]; then
147+
# Extract data-component attributes (React component hints)
148+
base_components=$(grep -oE 'data-component="[^"]*"' "$base_file" 2>/dev/null | sort -u | wc -l || echo "0")
149+
pr_components=$(grep -oE 'data-component="[^"]*"' "$pr_file" 2>/dev/null | sort -u | wc -l || echo "0")
150+
151+
# Extract form field IDs
152+
base_fields=$(grep -oE 'id="[^"]*"' "$base_file" 2>/dev/null | sort -u | wc -l || echo "0")
153+
pr_fields=$(grep -oE 'id="[^"]*"' "$pr_file" 2>/dev/null | sort -u | wc -l || echo "0")
154+
155+
# Check for title changes
156+
base_title=$(grep -oP '(?<=<title>)[^<]*' "$base_file" 2>/dev/null || echo "")
157+
pr_title=$(grep -oP '(?<=<title>)[^<]*' "$pr_file" 2>/dev/null || echo "")
158+
159+
if [ "$base_title" != "$pr_title" ] || [ "$base_fields" != "$pr_fields" ]; then
160+
echo "### $name" >> diff-report.md
161+
if [ "$base_title" != "$pr_title" ]; then
162+
echo "- **Title changed:** \`$base_title\` → \`$pr_title\`" >> diff-report.md
163+
has_changes=true
164+
fi
165+
if [ "$base_fields" != "$pr_fields" ]; then
166+
echo "- **Form fields:** $base_fields → $pr_fields" >> diff-report.md
167+
has_changes=true
168+
fi
169+
echo "" >> diff-report.md
170+
fi
171+
fi
172+
done
173+
174+
if [ "$has_changes" = "true" ]; then
175+
echo "has_changes=true" >> $GITHUB_OUTPUT
176+
else
177+
echo "has_changes=false" >> $GITHUB_OUTPUT
178+
echo "✅ No significant UI changes detected." >> diff-report.md
179+
fi
180+
181+
# Output to step summary
182+
cat diff-report.md >> $GITHUB_STEP_SUMMARY
183+
184+
- name: Check if already commented
185+
if: steps.diff.outputs.has_changes == 'true'
186+
id: check_comment
187+
uses: actions/github-script@v7
188+
with:
189+
script: |
190+
const { data: comments } = await github.rest.issues.listComments({
191+
owner: context.repo.owner,
192+
repo: context.repo.repo,
193+
issue_number: context.issue.number
194+
});
195+
196+
const existingComment = comments.find(comment =>
197+
comment.user.login === 'github-actions[bot]' &&
198+
comment.body.includes('## UI Components Diff Report')
199+
);
200+
201+
if (existingComment) {
202+
core.setOutput('comment_id', existingComment.id);
203+
}
204+
205+
- name: Post or update PR comment
206+
if: steps.diff.outputs.has_changes == 'true'
207+
uses: actions/github-script@v7
208+
with:
209+
script: |
210+
const fs = require('fs');
211+
const report = fs.readFileSync('diff-report.md', 'utf8');
212+
const commentId = '${{ steps.check_comment.outputs.comment_id }}';
213+
214+
const body = `## UI Components Diff Report
215+
216+
${report}
217+
218+
---
219+
<sub>🤖 This comment is automatically updated when UI files change.</sub>`;
220+
221+
if (commentId) {
222+
await github.rest.issues.updateComment({
223+
owner: context.repo.owner,
224+
repo: context.repo.repo,
225+
comment_id: parseInt(commentId),
226+
body: body
227+
});
228+
} else {
229+
await github.rest.issues.createComment({
230+
owner: context.repo.owner,
231+
repo: context.repo.repo,
232+
issue_number: context.issue.number,
233+
body: body
234+
});
235+
}

0 commit comments

Comments
 (0)