feat: add maxDisplayedEnumValues config and buttons for show/hide enu…

…ms (Redocly#1322)

demo/playground/hmr-playground.tsx

@@ -26,7 +26,7 @@ const specUrl =
   (userUrl && userUrl[1]) || (swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml');
 
 let store;
-const options: RedocRawOptions = { nativeScrollbars: false };
+const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 2 };
 
 async function init() {
   const spec = await loadAndBundleSpec(specUrl);

src/components/Fields/EnumValues.tsx

@@ -3,36 +3,78 @@ import { ExampleValue, FieldLabel } from '../../common-elements/fields';
 
 import { l } from '../../services/Labels';
 import { OptionsContext } from '../OptionsProvider';
+import styled from '../../styled-components';
+import { RedocRawOptions } from '../../services/RedocNormalizedOptions';
 
 export interface EnumValuesProps {
   values: string[];
   type: string;
 }
 
-export class EnumValues extends React.PureComponent<EnumValuesProps> {
+export interface EnumValuesState {
+  collapsed: boolean;
+}
+
+export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesState> {
+  state: EnumValuesState = {
+    collapsed: true,
+  };
+
   static contextType = OptionsContext;
+
+  private toggle() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   render() {
     const { values, type } = this.props;
-    const { enumSkipQuotes } = this.context;
+    const { collapsed } = this.state;
+
+    // TODO: provide context interface in more elegant way
+    const { enumSkipQuotes, maxDisplayedEnumValues } = this.context as RedocRawOptions;
+
     if (!values.length) {
       return null;
     }
 
+    const displayedItems =
+      this.state.collapsed && maxDisplayedEnumValues
+        ? values.slice(0, maxDisplayedEnumValues)
+        : values;
+
     return (
       <div>
         <FieldLabel>
           {type === 'array' ? l('enumArray') : ''}{' '}
           {values.length === 1 ? l('enumSingleValue') : l('enum')}:
         </FieldLabel>{' '}
-        {values.map((value, idx) => {
+        {displayedItems.map((value, idx) => {
           const exampleValue = enumSkipQuotes ? value : JSON.stringify(value);
           return (
             <React.Fragment key={idx}>
               <ExampleValue>{exampleValue}</ExampleValue>{' '}
             </React.Fragment>
           );
         })}
+        {maxDisplayedEnumValues ? (
+          <ToggleButton
+            onClick={() => {
+              this.toggle();
+            }}
+          >
+            {collapsed ? `… ${values.length - maxDisplayedEnumValues} more` : 'Hide'}
+          </ToggleButton>
+        ) : null}
       </div>
     );
   }
 }
+
+const ToggleButton = styled.span`
+  color: ${props => props.theme.colors.primary.main};
+  vertical-align: middle;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 0 5px;
+  cursor: pointer;
+`;

src/services/RedocNormalizedOptions.ts

@@ -38,6 +38,7 @@ export interface RedocRawOptions {
   enumSkipQuotes?: boolean | string;
 
   expandDefaultServerVariables?: boolean;
+  maxDisplayedEnumValues?: number;
 }
 
 function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -50,6 +51,16 @@ function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): bool
   return val;
 }
 
+function argValueToNumber(value: number | string | undefined): number | undefined {
+  if (typeof value === 'string') {
+    return parseInt(value, 10);
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+}
+
 export class RedocNormalizedOptions {
   static normalizeExpandResponses(value: RedocRawOptions['expandResponses']) {
     if (value === 'all') {
@@ -177,6 +188,7 @@ export class RedocNormalizedOptions {
   allowedMdComponents: Record<string, MDXComponentMeta>;
 
   expandDefaultServerVariables: boolean;
+  maxDisplayedEnumValues?: number;
 
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
@@ -232,5 +244,6 @@ export class RedocNormalizedOptions {
     this.allowedMdComponents = raw.allowedMdComponents || {};
 
     this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables);
+    this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues);
   }
 }