fix(designer-ui): Ensure isAdvanced: false tokens are shown if far …

…down in a list (#4064)

* Move token picker section options filter to a helper fn

* Fix bug where later options would not be visible

* Add tests for `hasAdvanced`

libs/designer-ui/src/lib/tokenpicker/tokenpickersection/__test__/tokenpickerhelpers.spec.ts

@@ -0,0 +1,101 @@
+import type { OutputToken } from '../..';
+import { getReducedTokenList, hasAdvanced } from '../tokenpickerhelpers';
+
+describe('ui/tokenPicker/tokenPickerSection helpers', () => {
+  describe('getReducedTokenList', () => {
+    it('should return a list of tokens with the advanced tokens filtered out', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: true, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: true, value: 'Value 4' } as OutputToken,
+      ];
+      const options = { hasSearchQuery: false, maxRowsShown: 2, showAllOptions: false };
+
+      const result = getReducedTokenList(tokens, options);
+
+      expect(result).toEqual([
+        { isAdvanced: false, value: 'Value 1' },
+        { isAdvanced: false, value: 'Value 3' },
+      ]);
+    });
+
+    it('should return a list of tokens with the advanced tokens filtered out and the max rows shown respected', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: true, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: true, value: 'Value 4' } as OutputToken,
+      ];
+      const options = { hasSearchQuery: false, maxRowsShown: 1, showAllOptions: false };
+
+      const result = getReducedTokenList(tokens, options);
+
+      expect(result).toEqual([{ isAdvanced: false, value: 'Value 1' }]);
+    });
+
+    it('should return a list of tokens with the search query presence respected', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: true, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: true, value: 'Value 4' } as OutputToken,
+      ];
+      const options = { hasSearchQuery: true, maxRowsShown: 2, showAllOptions: false };
+
+      const result = getReducedTokenList(tokens, options);
+
+      expect(result).toEqual([
+        { isAdvanced: false, value: 'Value 1' },
+        { isAdvanced: true, value: 'Value 2' },
+      ]);
+    });
+
+    it('should return a list of tokens with the "no more options" field respected', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: true, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: true, value: 'Value 4' } as OutputToken,
+      ];
+      const options = { hasSearchQuery: false, maxRowsShown: 1, showAllOptions: true };
+
+      const result = getReducedTokenList(tokens, options);
+
+      expect(result).toEqual([
+        { isAdvanced: false, value: 'Value 1' },
+        { isAdvanced: true, value: 'Value 2' },
+        { isAdvanced: false, value: 'Value 3' },
+        { isAdvanced: true, value: 'Value 4' },
+      ]);
+    });
+  });
+
+  describe('hasAdvanced', () => {
+    it('should return true if any of the tokens are advanced', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: true, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: true, value: 'Value 4' } as OutputToken,
+      ];
+
+      const result = hasAdvanced(tokens);
+
+      expect(result).toEqual(true);
+    });
+
+    it('should return false if none of the tokens are advanced', () => {
+      const tokens: OutputToken[] = [
+        { isAdvanced: false, value: 'Value 1' } as OutputToken,
+        { isAdvanced: false, value: 'Value 2' } as OutputToken,
+        { isAdvanced: false, value: 'Value 3' } as OutputToken,
+        { isAdvanced: false, value: 'Value 4' } as OutputToken,
+      ];
+
+      const result = hasAdvanced(tokens);
+
+      expect(result).toEqual(false);
+    });
+  });
+});

libs/designer-ui/src/lib/tokenpicker/tokenpickersection/tokenpickerhelpers.ts

@@ -0,0 +1,19 @@
+import type { OutputToken } from '..';
+
+export const getReducedTokenList = (
+  tokens: OutputToken[],
+  options: { hasSearchQuery: boolean; maxRowsShown: number; showAllOptions: boolean }
+): OutputToken[] => {
+  const { hasSearchQuery, maxRowsShown, showAllOptions } = options;
+
+  let filteredTokens = tokens.filter((token) => !token.isAdvanced || showAllOptions || hasSearchQuery);
+  if (!showAllOptions) {
+    filteredTokens = filteredTokens.slice(0, maxRowsShown);
+  }
+
+  return filteredTokens;
+};
+
+export const hasAdvanced = (tokens: OutputToken[]): boolean => {
+  return tokens.some((token) => token.isAdvanced);
+};

libs/designer-ui/src/lib/tokenpicker/tokenpickersection/tokenpickeroption.tsx

@@ -5,6 +5,7 @@ import { INSERT_TOKEN_NODE } from '../../editor/base/plugins/InsertTokenNode';
 import { SINGLE_VALUE_SEGMENT } from '../../editor/base/plugins/SingleValueSegment';
 import { convertUIElementNameToAutomationId } from '../../utils';
 import type { Token, TokenGroup } from '../models/token';
+import { getReducedTokenList, hasAdvanced } from './tokenpickerhelpers';
 import type { TokenPickerBaseProps } from './tokenpickersection';
 import { Icon } from '@fluentui/react';
 import { useBoolean } from '@fluentui/react-hooks';
@@ -194,36 +195,30 @@ export const TokenPickerOptions = ({
             )}
           </div>
           <div className="msla-token-picker-section-options">
-            {(!searchQuery ? section.tokens : filteredTokens).map((token, j) => {
-              if ((token.isAdvanced || j >= maxRowsShown) && moreOptions && !searchQuery) {
-                return null;
-              }
-
-              return (
-                <button
-                  className="msla-token-picker-section-option"
-                  data-automation-id={`msla-token-picker-section-option-${j}`}
-                  key={`token-picker-option-${j}`}
-                  onClick={() => handleTokenClicked(token)}
-                >
-                  <div className="msla-token-picker-section-option-text">
-                    <div className="msla-token-picker-option-inner">
-                      <div className="msla-token-picker-option-title">{token.title}</div>
-                      <div className="msla-token-picker-option-description" title={token.description}>
-                        {token.description}
-                      </div>
+            {getReducedTokenList(!searchQuery ? section.tokens : filteredTokens, {
+              hasSearchQuery: !!searchQuery,
+              maxRowsShown,
+              showAllOptions: !moreOptions,
+            }).map((token, j) => (
+              <button
+                className="msla-token-picker-section-option"
+                data-automation-id={`msla-token-picker-section-option-${j}`}
+                key={`token-picker-option-${j}`}
+                onClick={() => handleTokenClicked(token)}
+              >
+                <div className="msla-token-picker-section-option-text">
+                  <div className="msla-token-picker-option-inner">
+                    <div className="msla-token-picker-option-title">{token.title}</div>
+                    <div className="msla-token-picker-option-description" title={token.description}>
+                      {token.description}
                     </div>
                   </div>
-                </button>
-              );
-            })}
+                </div>
+              </button>
+            ))}
           </div>
         </>
       ) : null}
     </>
   );
 };
-
-function hasAdvanced(tokens: OutputToken[]): boolean {
-  return tokens.some((token) => token.isAdvanced);
-}