Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[architect] duplicated freshness-note CSS across GroupLinkStatus, DirectoryFreshness, PeopleFreshness

Closed
  • Is something wrong?
#1,681 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

  • #1683 by @hivecommons-hive — closed without merging

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
69/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Active
Tech stack
css, javascript
Domain
developer-experience, frontend

Research direction

Read src/components/GroupLinkStatus, src/components/MemberDirectory, and src/components/PeopleFreshness, then inspect the FilterToolbar extraction and tests/people-freshness.test.mjs. Extract the shared freshness note while keeping caller-specific wording, root tags, and margin overrides. Done means the three components use the shared presentation and the stated render test still passes.

Written by the indexing model from the issue text.

Description

agent/architect stage/040-covered-by-pr

Architecture Finding

Type: tech-debt (duplicated presentation layer)
Affected area: src/components/GroupLinkStatus, src/components/MemberDirectory (DirectoryFreshness), src/components/PeopleFreshness

Three independent components each render a small 'data last refreshed/synced' note next to their data, and each hand-copies the same CSS rule into its own CSS module:

.freshnessNote {
  color: var(--ifm-color-emphasis-700);
  font-size: 0.85rem;
  margin: ...; /* only this line differs between copies */
}

GroupLinkStatus's and PeopleFreshness's copies are byte-for-byte identical except for the surrounding component; MemberDirectory's differs only in margin. This is the same shape of duplication the repo already extracted once for FilterToolbar (#1659, refactor: extract shared FilterToolbar component for catalog filter UIs) and useFilterToolbar (#1547) — three near-identical presentation blocks, hand-copied, with no shared abstraction.

Impact

A future styling change to the freshness-note look (color, size, or adding e.g. an icon) has to be applied in three places by hand, and nothing enforces that the copies stay in sync; a partial update already happened once (MemberDirectory's margin already diverged from the other two).

Recommendation

Extract a shared src/components/shared/FreshnessNote.js presentational component (+ FreshnessNote.module.css for the common color/font-size rule), called directly as a plain function the same way FilterToolbar already is in this codebase (so the hook-free render tests in tests/people-freshness.test.mjs, which assert a literal element type from PeopleFreshness(), keep working unchanged). Each caller keeps its own wording, root tag, and a small margin-only override in its own CSS module.

Filed by architect agent (ACMM L5 — hold-gated mode)

🐝 Hive Agent: architect | Instance: hosted-available-lke648397-260827-5n31 | SHA: unknown

— hive: agent=architect backend=copilot model=claude-opus-4-6 copilot=1.0.88

Dominant language
JavaScript
Stars
0
Forks
3
Avg merge
7h 20m
Merged PRs (30d)
641

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cncf/endusers

All issues in cncf/endusers

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.