[Lens] Opening advanced Intervals editor should not throw an error (#115801)

* 🐛 Fix issue with the first rendering

* ✅ Add tests for valid and broken scenario

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx

@@ -52,7 +52,7 @@ jest.mock('lodash', () => {
 
 const dataPluginMockValue = dataPluginMock.createStartContract();
 // need to overwrite the formatter field first
-dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ params }) => {
+dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ id, params }) => {
   return {
     convert: ({ gte, lt }: { gte: string; lt: string }) => {
       if (params?.id === 'custom') {
@@ -61,6 +61,9 @@ dataPluginMockValue.fieldFormats.deserialize = jest.fn().mockImplementation(({ p
       if (params?.id === 'bytes') {
         return `Bytes format: ${gte} - ${lt}`;
       }
+      if (!id) {
+        return 'Error';
+      }
       return `${gte} - ${lt}`;
     },
   };
@@ -476,6 +479,49 @@ describe('ranges', () => {
         expect(instance.find(DragDropBuckets).children).toHaveLength(1);
       });
 
+      it('should use the parentFormat to create the trigger label', () => {
+        const updateLayerSpy = jest.fn();
+
+        const instance = mount(
+          <InlineOptions
+            {...defaultOptions}
+            layer={layer}
+            updateLayer={updateLayerSpy}
+            columnId="col1"
+            currentColumn={layer.columns.col1 as RangeIndexPatternColumn}
+          />
+        );
+
+        expect(
+          instance.find('[data-test-subj="indexPattern-ranges-popover-trigger"]').first().text()
+        ).toBe('0 - 1000');
+      });
+
+      it('should not print error if the parentFormat is not provided', () => {
+        // while in the actual React implementation will print an error, here
+        // we intercept the formatter without an id assigned an print "Error"
+        const updateLayerSpy = jest.fn();
+
+        const instance = mount(
+          <InlineOptions
+            {...defaultOptions}
+            layer={layer}
+            updateLayer={updateLayerSpy}
+            columnId="col1"
+            currentColumn={
+              {
+                ...layer.columns.col1,
+                params: { ...layer.columns.col1.params, parentFormat: undefined },
+              } as RangeIndexPatternColumn
+            }
+          />
+        );
+
+        expect(
+          instance.find('[data-test-subj="indexPattern-ranges-popover-trigger"]').first().text()
+        ).not.toBe('Error');
+      });
+
       it('should add a new range', () => {
         const updateLayerSpy = jest.fn();
 

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx

@@ -196,7 +196,7 @@ export const rangeOperation: OperationDefinition<RangeIndexPatternColumn, 'field
       supportedFormats[numberFormat.id].decimalsToPattern(numberFormat.params?.decimals || 0);
 
     const rangeFormatter = data.fieldFormats.deserialize({
-      ...currentColumn.params.parentFormat,
+      ...(currentColumn.params.parentFormat || { id: 'range' }),
       params: {
         ...currentColumn.params.parentFormat?.params,
         ...(numberFormat