feat(cellar-explorer): add objects management #1661

pdesoyres-cc · 2026-01-27T15:39:42Z

Summary

Add cc-cellar-object-list component to browse and manage objects (files/directories) within a Cellar bucket
Add cc-breadcrumbs component for hierarchical path navigation
Add enableCopyToClipboard option to cc-grid link cells
Extract Abortable utility class to a generic lib for request cancellation
Integrate object list navigation into cc-cellar-explorer

Details

New components

`cc-cellar-object-list`

A full-featured component for browsing Cellar bucket contents with:

Grid-based display of files and directories with type-specific icons (images, videos, audio, archives, PDFs, etc.)
Breadcrumb navigation for directory traversal
Filtering by object name prefix
Pagination support (previous/next)
Object actions: download, delete (with drawer)

`cc-breadcrumbs`

A reusable breadcrumb navigation component that:

Displays a hierarchical path of items
Supports icons and custom labels
Emits click events with the path to the selected item

Enhancements

cc-grid: Link cells can now display a copy-to-clipboard button via enableCopyToClipboard: true
cc-cellar-explorer: Uses Abortable for smart request cancellation when navigating between buckets/paths

Refactoring

Moved Abortable class from kv-utils.js to src/lib/abortable.js for reuse across components

How to review

Verify cc-breadcrumbs stories render correctly and click events work
Verify cc-grid stories
Verify copy-to-clipboard button on grid link cells
Verify cc-cellar-object-list stories
Use sandbox or staging-five
- Test navigation between directories using breadcrumbs
- Test object filtering by prefix
- Test pagination (previous/next page)
- Test download and delete actions
- Monkey test rapid switching buckets/paths using breadcrumb (you should never land with an inconsistent object lists)

github-actions · 2026-01-27T16:39:20Z

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cellar-explorer-objects-1/index.html.

This preview will be deleted once this PR is closed.

… cancellation

HeleneAmouzou

GG 👏 I have only left small feedbacks/questions, but otherwise LGTM !

HeleneAmouzou · 2026-02-02T15:20:18Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+];
+
+/**
+ * A component that allows to navigate through a Cellar addon.


Suggested change

* A component that allows to navigate through a Cellar addon.

* A component that allows to navigate through a Cellar addon's bucket.

HeleneAmouzou · 2026-02-02T16:06:06Z

src/components/cc-cellar-object-list/cc-cellar-object-list.stories.js

+  ],
+});
+
+export const fetchingObject = makeStory(conf, {


question : I don't visually see the fetching state, is this story broken or am I missing something ? 🤔

HeleneAmouzou · 2026-02-02T16:28:52Z

I forgot to test on staging-five 🙈
Everything seems to work perfectly (navigation using breadcrumbs, pagination, filtering). A reflection about the actions ; when clickin the the Download button, I was expecting it to directly download the object, but instead it opens it in a new tab, is this the expected behavior ?

florian-sanders-cc

Great job @pdesoyres-cc

I did not find big issues, the component works great and looks great as well!

I faced an issue with the pagination:

The "next page" is available,
I click it,
It loads and I get empty states as if there were no objects 🤔
(the bucket I'm testing contains all my notes, it contains 430 objects)

I wonder if the pagination may confuse people: icons only with left / right arrow could also mean go back / go forward like in browsers. Like I went from a bucket to its objects, I'm looking for a "back" icon to go back to the bucket list but that's not what the left arrow button does. I think I'm exaggerating, we're fine and we can just see if we get feedback about this subject from actual users.

We need to discuss how to handle focus when navigation happens (from bucket to object, from a object level to another). Right now the focus is lost most of the time, which makes the component not keyboard friendly. I did not think this through but I think when a navigation occurs, we should move focus to the first column + first row in the grid.
Also, when deleting objects, while filtered, the focus is lost after deleting the last object filtered. It should be placed on the empty message instead but it seems that it doesn't work? 🤔

florian-sanders-cc · 2026-02-02T16:32:00Z

src/components/cc-breadcrumbs/cc-breadcrumbs.events.js

+ * Dispatched when a breadcrumb item is clicked.
+ * @extends {CcEvent<{path: Array<string>}>}
+ */
+export class CcBreadcrumbClickEvent extends CcEvent {


question: tough one but I wonder if removing the "s" here is a good idea, it makes it very easy to get the event name wrong since the component name contains a "s" (but I do understand why it's singlar here 🤷)

Or we could use a totally different event name like cc-navigation-request or something like that 🤔

florian-sanders-cc · 2026-02-03T08:34:48Z

src/components/cc-breadcrumbs/cc-breadcrumbs.js

+        }
+
+        ul {
+          align-items: end;


fix: this breaks alignment for breadcrumbs with no icons.

To fix your issue, you can:

set display: inline-flex; on cc-link (this will remove the blank space below the icon that led you to choose align-items: end in the first place),

remove this align-items (or replace end with center but I don't think you need it anyway 🤔)

florian-sanders-cc · 2026-02-03T08:45:29Z

src/components/cc-grid/cc-grid.js

-          >${cell.value}</cc-button
-        >`,
+        template: html`<div class="icon-label">
+          ${cell.icon != null ? html`<cc-icon .icon=${cell.icon} ?skeleton=${skeleton}></cc-icon>` : ''}


question: are we sure we'll always have decorative icons or should we expose & use a cell.iconA11yName?

florian-sanders-cc · 2026-02-03T09:12:58Z

src/components/cc-cellar-object-list/cc-cellar-object-list.ctrl.js

+   * @param {function} orElse
+   * @param {boolean} [deleteMode]
+   */
+  #handleErrorOnObject(error, objectKey, orElse, deleteMode = false) {


nitpick: 4 positioned args feels a lot to me, especially with a boolean at the end, it makes the signature harder to read & manipulate

When I read this for instance:

this.#handleErrorOnObject( error, objectKey, () => notifyError(i18n('cc-cellar-object-list.error.object-deletion-failed', { objectKey })), true, );

I have to check the actual function to understand what true means, what the callback is for.
It's a nitpick because when coding you have the LSP, which mitigates the issue but I feel like object + destructuring would be better.

florian-sanders-cc · 2026-02-03T09:28:11Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+      this.dispatchEvent(new CcCellarNavigateToBucketEvent(this.state.bucketName));
+    }
+    this.dispatchEvent(new CcCellarNavigateToPathEvent(path.slice(2)));
+  }


question/suggestion: I bet this doesn't actually trigger an issue but it feels weird that we don't have any early returns in there. If path.length === 1 || path.length === 2, then we're dispatching both CcCellarNavigateToHomeEvent and CcCellarNavigateToPathEvent 🤔

florian-sanders-cc · 2026-02-03T09:52:00Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+
+    return html`
+      <div class="path-wrapper">
+        <cc-breadcrumbs .items=${items} @cc-breadcrumb-click=${this._onPathItemClick}></cc-breadcrumbs>


fix: the breadcrumb should be placed in a <nav arial-label="{some translation for breadcrumb / fil d'Ariane}"
Should the component itself wrap the list of links in <nav>? I think so 🤔 (I'm not even sure Shadow DOM surfaces region landmarks correctly but we should use a <nav> element anyway).

florian-sanders-cc · 2026-02-03T10:39:22Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+
+            <div class="details-sub-title">${i18n('cc-cellar-object-list.details.actions.title')}</div>
+            <div class="details-actions">
+              <cc-button


fix: this should be a link unless we really don't have a choice. The current behavior does not actually trigger a download + opens a new window which is not the expected behavior.
We can discuss it in sync but I think we should stick with the way we handled this for Kube:

clever-components/src/components/cc-addon-header/cc-addon-header.smart-kubernetes.js

Line 46 in 1fbe222

const kubeConfigFetchInterval = setInterval(() => {

It might be too complicated to do that in your case but it's worth trying because it would allow to provide the filename + extension so that it actually downloads the file when the user clicks (right now the user has to do all of this manually).

florian-sanders-cc · 2026-02-03T10:42:08Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+      ${object != null
+        ? html`<div class="details-wrapper">
+            <div class="details-icon-wrapper">
+              <cc-icon .icon=${this._getFileIcon(object.contentType)}></cc-icon>


fix: the icon provides information about the type of file / media so we should provide an a11yName with this information

florian-sanders-cc

A bunch of feedback from Claude (I forgot to run it but figured it could catch stuff I didn't)

florian-sanders-cc · 2026-02-03T11:13:43Z

src/components/cc-breadcrumbs/cc-breadcrumbs.js

+export class CcBreadcrumbs extends LitElement {
+  static get properties() {
+    return {
+      disabled: { type: Boolean },


fix: this property is not implemented

florian-sanders-cc · 2026-02-03T11:14:47Z

src/translations/translations.fr.js

  'cc-cellar-explorer.error': `Une erreur est survenue pendant le chargement`,
  //#endregion
+  //#region cc-cellar-object-list
+  'cc-cellar-object-list.back-to-bucket-list': `Retour à la list des buckets`,


fix:

Suggested change

'cc-cellar-object-list.back-to-bucket-list': `Retour à la list des buckets`,

'cc-cellar-object-list.back-to-bucket-list': `Retour à la liste des buckets`,

florian-sanders-cc · 2026-02-03T11:17:30Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+          white-space: wrap;
+          word-wrap: anywhere;


nitpick(not sure): Claude tells me this, I'm not sure, I'll go and dig when I have time because I don't know enough about these 🙈

white-space: wrap; // Invalid - should be 'normal' word-wrap: anywhere; // This is also deprecated, prefer overflow-wrap: anywhere

florian-sanders-cc · 2026-02-03T11:19:52Z

src/components/cc-cellar-object-list/cc-cellar-object-list.ctrl.js

+    try {
+      const signedUrl = await this.#cellarClient.getObjectSignedUrl(this.#bucketName, objectKey);
+
+      const element = document.createElement('a');


fix: if we really want to go down that road, we should use the download attribute on the link so that it has the proper behavior.
Still I think it's a smell that we might be doing this wrong: if what we need is the link behavior, we should use a link from the start because it will also bring the relevant semantics.

florian-sanders-cc · 2026-02-03T11:24:11Z

src/components/cc-cellar-object-list/cc-cellar-object-list.js

+    /** @type {Ref<CcBreadcrumbs>} */
+    this._breadcrumbsRef = createRef();


fix: the breadcrumbsRef is not initialized on the element

pdesoyres-cc self-assigned this Jan 27, 2026

pdesoyres-cc requested review from Galimede, HeleneAmouzou, clara-layus-cc, florian-sanders-cc, hsablonniere and roberttran-cc January 27, 2026 15:40

pdesoyres-cc force-pushed the cellar-explorer-objects-1 branch 2 times, most recently from e16437b to 2c736be Compare January 27, 2026 16:31

pdesoyres-cc force-pushed the cellar-explorer-objects-1 branch from 2c736be to 041c90d Compare January 27, 2026 16:41

pdesoyres-cc marked this pull request as draft January 27, 2026 16:48

pdesoyres-cc and others added 6 commits January 27, 2026 18:18

feat(cc-breadcrumbs): init component

9ed47be

feat(cc-grid): add enableCopyToClipboard to link grid cell

510ba94

refactor: move Abortable class to a generic lib

1e89205

feat(cc-cellar-explorer): add abortable mechanism for smart request…

eb36e0e

… cancellation

feat(cc-cellar-object-list): init component

efbb864

feat(cc-cellar-explorer): integrate cc-cellar-object-list

d200f04

pdesoyres-cc force-pushed the cellar-explorer-objects-1 branch from 041c90d to d200f04 Compare January 27, 2026 17:18

pdesoyres-cc marked this pull request as ready for review January 27, 2026 17:23

hsablonniere changed the title ~~feat(cellar-explorer): add objects managment~~ feat(cellar-explorer): add objects management Feb 2, 2026

HeleneAmouzou approved these changes Feb 2, 2026

View reviewed changes

florian-sanders-cc requested changes Feb 3, 2026

View reviewed changes

	* A component that allows to navigate through a Cellar addon.
	* A component that allows to navigate through a Cellar addon's bucket.

	'cc-cellar-object-list.back-to-bucket-list': `Retour à la list des buckets`,
	'cc-cellar-object-list.back-to-bucket-list': `Retour à la liste des buckets`,

		/** @type {Ref<CcBreadcrumbs>} */
		this._breadcrumbsRef = createRef();

feat(cellar-explorer): add objects management #1661

Are you sure you want to change the base?

feat(cellar-explorer): add objects management #1661

Uh oh!

Conversation

pdesoyres-cc commented Jan 27, 2026

Summary

Details

New components

cc-cellar-object-list

cc-breadcrumbs

Enhancements

Refactoring

How to review

Uh oh!

github-actions bot commented Jan 27, 2026

Uh oh!

HeleneAmouzou left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HeleneAmouzou commented Feb 2, 2026

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

florian-sanders-cc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

`cc-cellar-object-list`

`cc-breadcrumbs`