Skip to content

refactor: Standardize DOM element dataset attributes across file browser component - #2543

Open
AuDevTist1C wants to merge 1 commit into
Acode-Foundation:mainfrom
AuDevTist1C:refactor/file-browser-dataset-attributes
Open

refactor: Standardize DOM element dataset attributes across file browser component#2543
AuDevTist1C wants to merge 1 commit into
Acode-Foundation:mainfrom
AuDevTist1C:refactor/file-browser-dataset-attributes

Conversation

@AuDevTist1C

Copy link
Copy Markdown
Contributor

Summary

This pull request standardizes DOM element attribute naming across the file browser component by converting legacy custom attributes to standard HTML5 data-* dataset attributes.

Previously, template elements mixed standard properties with proprietary DOM attributes (such as action, type, name, home, open-doc, ftp-account, uuid, and storageType). This PR updates the component to use standard data-* markup, native dataset JavaScript accessors, and compliant CSS selectors.


Key Changes

1. Template Refactoring (src/pages/fileBrowser/list.hbs)

  • Converted legacy inline attributes to standard data-* dataset equivalents (data-action, data-type, data-name, data-home, data-open-doc, data-ftp-account, data-uuid, and data-storage-type).
  • Updated template conditionals to align with boolean and string dataset values (openDoc, ftpAccount).

2. Script Adaptations (src/pages/fileBrowser/fileBrowser.js)

  • Refactored event delegation and element lookup handlers to utilize standard camelCase JavaScript dataset properties (e.g., replacing el.getAttribute('open-doc') with el.dataset.openDoc, along with dataset.action, dataset.uuid, dataset.type, and dataset.storageType).
  • Updated action routing logic to handle openDoc dataset values.
  • Replaced attr-action="navigation" with data-action="navigation" in dynamically generated navigation tags.

3. Stylesheet Selectors (src/pages/fileBrowser/fileBrowser.scss)

  • Updated CSS attribute selectors from [storageType="notification"] to [data-storage-type="notification"].
  • Updated pseudo-element content CSS function from attr(storageType) to attr(data-storage-type).

Benefits

  • HTML Compliance: Eliminates non-standard, invalid DOM attributes.
  • Performance & Cleanliness: Avoids verbose getAttribute() / setAttribute() DOM calls in favor of direct dataset accessors.
  • Future-Proofing: Minimizes the risk of attribute name collisions with future HTML specifications.

(PR name and description are AI generated (Gemini 3.6 Flash))

…ser component

Standardize DOM element attribute naming across the file browser component by converting legacy custom attributes to standard HTML5 `data-*` dataset attributes.

Previously, template elements mixed standard properties with proprietary, non-standard DOM attributes (such as `action`, `type`, `name`, `home`, `open-doc`, `ftp-account`, `uuid`, and `storageType`). This led to non-compliant HTML markup, required explicit `getAttribute()` and `setAttribute()` DOM calls, and increased the risk of attribute collision with future web standards.

This change enforces a uniform contract using the standard HTML5 `dataset` API (`data-*`), improving rendering consistency, type predictability, and JS-to-DOM binding efficiency.

* **Template Refactoring (`src/pages/fileBrowser/list.hbs`):**
  * Converted legacy inline attributes to standard dataset equivalents: `data-action`, `data-type`, `data-name`, `data-home`, `data-open-doc`, `data-ftp-account`, `data-uuid`, and `data-storage-type`.
  * Ensured boolean and string dataset values comply with template engine rendering rules.
* **Script Adaptations (`src/pages/fileBrowser/fileBrowser.js`):**
  * Refactored event delegation and element lookup handlers to utilize standard camelCase JavaScript `dataset` properties (e.g., replacing `el.getAttribute('open-doc')` with `el.dataset.openDoc`, along with `dataset.action`, `dataset.uuid`, `dataset.type`, and `dataset.storageType`).
  * Simplified property checks across list selection handlers and navigation logic.
* **Stylesheet Selectors (`src/pages/fileBrowser/fileBrowser.scss`):**
  * Updated CSS attribute selectors from `[storageType="notification"]` to `[data-storage-type="notification"]` to maintain tight visual styling coupling without relying on invalid HTML attributes.

(AI generated commit message)
@greptile-apps

greptile-apps Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

Standardizes file-browser DOM metadata on HTML5 data-* attributes.

  • Updates list-item templates and dynamically generated breadcrumbs to emit dataset-compatible attributes.
  • Updates delegated click handling to read the corresponding camel-cased dataset properties.
  • Aligns storage-type CSS selectors and generated content with the new markup.

Confidence Score: 5/5

The PR appears safe to merge, with the template producers, dataset consumers, dynamic navigation markup, and CSS selectors aligned.

The changed list-rendering and open-document paths consistently emit and consume the same dataset keys, and no reachable behavioral, styling, or security failure remains.

Important Files Changed

Filename Overview
src/pages/fileBrowser/fileBrowser.js Migrates file-browser event metadata access and generated navigation markup to consistent dataset properties without an identified behavioral regression.
src/pages/fileBrowser/list.hbs Migrates list-item metadata to data attributes while keeping the open-document producer, template key, and event consumer aligned.
src/pages/fileBrowser/fileBrowser.scss Updates storage-type selectors and pseudo-element content to match the renamed data attribute.

Reviews (1): Last reviewed commit: "refactor: standardize DOM element datase..." | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

2 participants