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

Author: Pierre DE SOYRES

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

@@ -14,6 +14,7 @@ import { accessibilityStyles } from '../../styles/accessibility.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-badge/cc-badge.js';
 import '../cc-button/cc-button.js';
+import { CcCellarNavigateToBucketEvent } from '../cc-cellar-object-list/cc-cellar-object-list.events.js';
 import '../cc-clipboard/cc-clipboard.js';
 import '../cc-dialog-confirm-actions/cc-dialog-confirm-actions.js';
 import '../cc-dialog/cc-dialog.js';
@@ -98,7 +99,7 @@ export class CcCellarBucketList extends LitElement {
     this.updateComplete.then(() => {
       if (this.state.type === 'loaded') {
         const index = this.state.buckets.findIndex((b) => b.name === bucketName);
-        this._gridRef?.value.scrollToIndex(index);
+        this._gridRef.value?.scrollToIndex(index);
       }
     });
   }
@@ -155,6 +156,13 @@ export class CcCellarBucketList extends LitElement {
 
   //#region Event handlers
 
+  /**
+   * @param {string} bucketName
+   */
+  _onBucketClick(bucketName) {
+    this.dispatchEvent(new CcCellarNavigateToBucketEvent(bucketName));
+  }
+
   /**
    * @param {string} bucketName
    */
@@ -339,10 +347,11 @@ export class CcCellarBucketList extends LitElement {
       {
         header: i18n('cc-cellar-bucket-list.grid.column.name'),
         cellAt: (bucketState) => ({
-          type: 'text',
+          type: 'link',
           value: bucketState.name,
           icon: iconBucket,
           enableCopyToClipboard: true,
+          onClick: () => this._onBucketClick(bucketState.name),
         }),
         width: 'minmax(max-content, 1fr)',
         sort: getSort('name'),
@@ -598,7 +607,7 @@ export class CcCellarBucketList extends LitElement {
         .details-wrapper {
           display: flex;
           flex-direction: column;
-          width: 25em;
+          max-width: 25em;
         }
 
         .details-wrapper .details-icon-wrapper {

src/components/cc-cellar-explorer/cc-cellar-explorer.js

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-cellar-bucket-list/cc-cellar-bucket-list.js';
+import '../cc-cellar-object-list/cc-cellar-object-list.js';
 import '../cc-loader/cc-loader.js';
 import '../cc-notice/cc-notice.js';
 
@@ -58,7 +59,10 @@ export class CcCellarExplorer extends LitElement {
       ></cc-cellar-bucket-list-beta>`;
     }
 
-    return html``;
+    return html`<cc-cellar-object-list-beta
+      class="main"
+      .state=${this.state.level.state}
+    ></cc-cellar-object-list-beta>`;
   }
 
   static get styles() {

src/components/cc-cellar-explorer/cc-cellar-explorer.smart.js

@@ -2,6 +2,7 @@ import { getAllEnvVars } from '@clevercloud/client/esm/api/v2/addon.js';
 import { sendToApi } from '../../lib/send-to-api.js';
 import { defineSmartComponent } from '../../lib/smart/define-smart-component.js';
 import { BucketsListController } from '../cc-cellar-bucket-list/cc-cellar-bucket-list.ctrl.js';
+import { ObjectListController } from '../cc-cellar-object-list/cc-cellar-object-list.ctrl.js';
 import { CellarExplorerClient } from './cc-cellar-explorer.client.js';
 import './cc-cellar-explorer.js';
 
@@ -10,7 +11,9 @@ import './cc-cellar-explorer.js';
  * @import { CellarExplorerStateLoaded } from './cc-cellar-explorer.types.js'
  * @import { CellarEndpoint } from './cc-cellar-explorer.client.types.js'
  * @import { CcCellarBucketList } from '../cc-cellar-bucket-list/cc-cellar-bucket-list.js'
+ * @import { CcCellarObjectList } from '../cc-cellar-object-list/cc-cellar-object-list.js'
  * @import { CellarBucketListState } from '../cc-cellar-bucket-list/cc-cellar-bucket-list.types.js'
+ * @import { CellarObjectListState } from '../cc-cellar-object-list/cc-cellar-object-list.types.js'
  * @import { EnvVar } from '../common.types.js'
  * @import { UpdateCallback } from '../common.types.js'
  * @import { ApiConfig } from '../../lib/send-to-api.js'
@@ -42,7 +45,7 @@ defineSmartComponent({
         const cellarClient = new CellarExplorerClient(cellarProxyUrl, cellarEndpoint);
 
         /** @type {() => CcCellarBucketList} */
-        const getComponent = () => component.shadowRoot.querySelector('cc-cellar-bucket-list-beta');
+        const getBucketListComponent = () => component.shadowRoot.querySelector('cc-cellar-bucket-list-beta');
         /** @type {UpdateCallback<CellarBucketListState>} */
         const updateBucketComponent = (newState) => {
           updateComponent(
@@ -62,16 +65,62 @@ defineSmartComponent({
           );
         };
 
-        const bucketsListController = new BucketsListController(cellarClient, getComponent, updateBucketComponent);
+        const bucketsListController = new BucketsListController(
+          cellarClient,
+          getBucketListComponent,
+          updateBucketComponent,
+        );
         bucketsListController.init(onEvent);
 
+        /** @type {UpdateCallback<CellarObjectListState>} */
+        const updateObjectListComponent = (newState) => {
+          updateComponent(
+            'state',
+            /** @param {CellarExplorerStateLoaded} state*/ (state) => {
+              if (state.level.type === 'objects') {
+                if (typeof newState === 'function') {
+                  const result = newState(/** @type {any} */ (state.level.state));
+                  if (result != null && typeof result === 'object') {
+                    state.level.state = result;
+                  }
+                } else {
+                  state.level.state = newState;
+                }
+              }
+            },
+          );
+        };
+
+        /** @type {() => CcCellarObjectList} */
+        const getObjectListComponent = () => component.shadowRoot.querySelector('cc-cellar-object-list-beta');
+        const objectListController = new ObjectListController(
+          cellarClient,
+          getObjectListComponent,
+          updateObjectListComponent,
+        );
+        objectListController.init(onEvent);
+
         onEvent('cc-cellar-bucket-created', (bucketName) => {
           component.scrollToBucket(bucketName);
         });
 
+        onEvent('cc-cellar-navigate-to-home', () => {
+          updateComponent('state', { type: 'loaded', level: { type: 'buckets', state: { type: 'loading' } } });
+          bucketsListController.initialFetch();
+        });
+
+        onEvent('cc-cellar-navigate-to-bucket', (bucketName) => {
+          updateComponent('state', {
+            type: 'loaded',
+            level: { type: 'objects', state: { type: 'loading', bucketName, path: [] } },
+          });
+          objectListController.changeBucket(bucketName);
+        });
+
         signal.onabort = () => {
           cellarClient.close();
           bucketsListController.abort();
+          objectListController.abort();
         };
       })
       .catch((error) => {

src/components/cc-cellar-explorer/cc-cellar-explorer.types.d.ts

@@ -1,4 +1,5 @@
 import { CellarBucketListState } from '../cc-cellar-bucket-list/cc-cellar-bucket-list.types.js';
+import { CellarObjectListState } from '../cc-cellar-object-list/cc-cellar-object-list.types.js';
 
 export type CellarExplorerState = CellarExplorerStateLoading | CellarExplorerStateError | CellarExplorerStateLoaded;
 
@@ -15,9 +16,14 @@ export interface CellarExplorerStateLoaded {
   level: CellarExplorerLevel;
 }
 
-export type CellarExplorerLevel = CellarExplorerLevelBuckets;
+export type CellarExplorerLevel = CellarExplorerLevelBuckets | CellarExplorerLevelObjects;
 
 export interface CellarExplorerLevelBuckets {
   type: 'buckets';
   state: CellarBucketListState;
 }
+
+export interface CellarExplorerLevelObjects {
+  type: 'objects';
+  state: CellarObjectListState;
+}