feat(cc-kv-list-explorer): refine state with filtering type

CleverCloud · Jan 27, 2025 · 8b75d78 · 8b75d78
1 parent 8fb6198
commit 8b75d78
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/src/components/cc-kv-explorer/kv-key-editor-list-ctrl.js b/src/components/cc-kv-explorer/kv-key-editor-list-ctrl.js
@@ -56,28 +56,28 @@ export class KvKeyEditorListCtrl extends KvKeyEditorCtrl {
     await this._kvClient.createListKey(keyValue.name, keyValue.elements);
 
     this._scanner.update(keyValue.elements.map((value, index) => ({ index, value, type: 'idle' })));
-    this._setLoaded();
+    this._updateEditorState({
+      type: 'loaded',
+      elements: this._scanner.elements,
+      addForm: { type: 'idle' },
+    });
   }
 
   /**
    * @param {number} index
    */
   async filter(index) {
-    if (this._component.detailState.type !== 'edit-list' || this._component.detailState.editor.type !== 'loaded') {
-      return;
-    }
-    const addForm = this._component.detailState.editor.addForm;
-
-    // todo: we should have a 'filtering' state (a bit like 'loading-more' state)
-    //       this will avoid the necessity to restore the `addForm` state.
-    this._updateEditorState({ type: 'loading' });
+    this._updateEditorState((editor) => (editor.type = 'filtering'));
 
     try {
       this._scanner.setFilter({ index });
       await this._scanner.loadMore();
-      this._setLoaded(addForm);
+      this._updateEditor((editor) => {
+        editor.type = 'loaded';
+        editor.elements = this._scanner.elements;
+      });
     } catch (e) {
-      this._setLoaded(addForm);
+      this._updateEditorState((editor) => (editor.type = 'loaded'));
       throw e;
     }
   }
@@ -140,17 +140,6 @@ export class KvKeyEditorListCtrl extends KvKeyEditorCtrl {
     }
   }
 
-  /**
-   * @param {CcKvListExplorerAddFormState} addFormState
-   */
-  _setLoaded(addFormState = { type: 'idle' }) {
-    this._updateEditorState({
-      type: 'loaded',
-      elements: this._scanner.elements,
-      addForm: addFormState,
-    });
-  }
-
   /**
    * @param {number} index
    * @param {CcKvListElementState['type']} stateType

diff --git a/src/components/cc-kv-list-explorer/cc-kv-list-explorer.js b/src/components/cc-kv-list-explorer/cc-kv-list-explorer.js
@@ -132,6 +132,7 @@ export class CcKvListExplorer extends LitElement {
   _getElements() {
     switch (this.state.type) {
       case 'loading':
+      case 'filtering':
         return SKELETON_ELEMENTS;
       case 'loaded':
         return this.state.elements.map((state) => ({ state, skeleton: false }));
@@ -250,6 +251,7 @@ export class CcKvListExplorer extends LitElement {
 
   render() {
     const isLoading = this.state.type === 'loading';
+    const isFiltering = this.state.type === 'filtering';
     const hasNoElements = this.state.type === 'loaded' && this.state.elements.length === 0;
     const elements = this._getElements();
 
@@ -261,9 +263,16 @@ export class CcKvListExplorer extends LitElement {
             inline
             label=${i18n('cc-kv-list-explorer.filter')}
             ?disabled=${this.disabled}
-            ?readonly=${isLoading}
+            ?readonly=${isLoading || isFiltering}
           ></cc-input-text>
-          <cc-button type="submit" .icon=${iconFilter} hide-text outlined ?disabled=${this.disabled || isLoading}>
+          <cc-button
+            type="submit"
+            .icon=${iconFilter}
+            hide-text
+            outlined
+            ?disabled=${this.disabled || isLoading}
+            ?waiting=${isFiltering}
+          >
             ${i18n('cc-kv-list-explorer.filter.apply')}
           </cc-button>
         </form>
@@ -433,8 +442,9 @@ export class CcKvListExplorer extends LitElement {
     ];
 
     const isLoading = this.state.type === 'loading';
+    const isFiltering = this.state.type === 'filtering';
     const isAdding = this.state.type !== 'loading' && this.state.addForm.type === 'adding';
-    const isReadonly = isLoading || isAdding;
+    const isReadonly = isLoading || isFiltering || isAdding;
 
     return html`<form class="add-form" ${ref(this._addFormRef)} ${formSubmit(this._onAddFormSubmit)}>
       <cc-select
@@ -459,7 +469,7 @@ export class CcKvListExplorer extends LitElement {
         a11y-name=${i18n('cc-kv-list-explorer.add-form.submit.a11y')}
         .icon=${iconAdd}
         ?waiting=${isAdding}
-        ?disabled=${isLoading || this.disabled}
+        ?disabled=${isLoading || isFiltering || this.disabled}
         >${i18n('cc-kv-list-explorer.add-form.submit')}</cc-button
       >
     </form>`;

diff --git a/src/components/cc-kv-list-explorer/cc-kv-list-explorer.stories.js b/src/components/cc-kv-list-explorer/cc-kv-list-explorer.stories.js
@@ -9,6 +9,7 @@ export default {
 
 /**
  * @typedef {import('./cc-kv-list-explorer.js').CcKvListExplorer} CcKvListExplorer
+ * @typedef {import('../cc-input-text/cc-input-text.js').CcInputText} CcInputText
  */
 
 const conf = {
@@ -62,6 +63,24 @@ export const loadingMore = makeStory(conf, {
   ],
 });
 
+export const filtering = makeStory(conf, {
+  /** @type {Array<Partial<CcKvListExplorer>>} */
+  items: [
+    {
+      state: {
+        type: 'filtering',
+        elements: [],
+        addForm: { type: 'idle' },
+      },
+    },
+  ],
+  onUpdateComplete: /** @param {CcKvListExplorer} component */ (component) => {
+    /** @type {CcInputText} */
+    const patternInput = component.shadowRoot.querySelector('cc-input-text[name="pattern"]');
+    patternInput.value = '5';
+  },
+});
+
 export const disabled = makeStory(conf, {
   /** @type {Array<Partial<CcKvListExplorer>>} */
   items: [

diff --git a/src/components/cc-kv-list-explorer/cc-kv-list-explorer.types.d.ts b/src/components/cc-kv-list-explorer/cc-kv-list-explorer.types.d.ts
@@ -1,7 +1,8 @@
 export type CcKvListExplorerState =
   | CcKvListExplorerStateLoading
   | CcKvListExplorerStateLoaded
-  | CcKvListExplorerStateLoadingMore;
+  | CcKvListExplorerStateLoadingMore
+  | CcKvListExplorerStateFiltering;
 
 export interface CcKvListExplorerStateLoading {
   type: 'loading';
@@ -19,6 +20,12 @@ export interface CcKvListExplorerStateLoadingMore {
   addForm: CcKvListExplorerAddFormState;
 }
 
+export interface CcKvListExplorerStateFiltering {
+  type: 'filtering';
+  elements: Array<CcKvListElementState>;
+  addForm: CcKvListExplorerAddFormState;
+}
+
 export type CcKvListElementState =
   | CcKvListElementStateIdle
   | CcKvListElementStateDeleting