= event => {
+ const value = event.currentTarget.value;
+ this.setState({ value });
+ this.debouncedOnSearch(value);
+ };
+
+ handleClear = () => {
+ this.setState({ value: '' });
+ this.props.onSearch('');
+ };
+}
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx
new file mode 100644
index 000000000..d8bd30c31
--- /dev/null
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) 2021 GraphQL Contributors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import { GraphQLSchema, GraphQLNamedType } from 'graphql';
+
+import Argument from './Argument';
+import TypeLink from './TypeLink';
+import { OnClickFieldFunction, OnClickTypeFunction } from './types';
+
+type SearchResultsProps = {
+ schema: GraphQLSchema;
+ withinType?: GraphQLNamedType;
+ searchValue: string;
+ onClickType: OnClickTypeFunction;
+ onClickField: OnClickFieldFunction;
+};
+
+export default class SearchResults extends React.Component<
+ SearchResultsProps,
+ {}
+> {
+ shouldComponentUpdate(nextProps: SearchResultsProps) {
+ return (
+ this.props.schema !== nextProps.schema ||
+ this.props.searchValue !== nextProps.searchValue
+ );
+ }
+
+ render() {
+ const searchValue = this.props.searchValue;
+ const withinType = this.props.withinType;
+ const schema = this.props.schema;
+ const onClickType = this.props.onClickType;
+ const onClickField = this.props.onClickField;
+
+ const matchedWithin: ReactNode[] = [];
+ const matchedTypes: ReactNode[] = [];
+ const matchedFields: ReactNode[] = [];
+
+ const typeMap = schema.getTypeMap();
+ let typeNames = Object.keys(typeMap);
+
+ // Move the within type name to be the first searched.
+ if (withinType) {
+ typeNames = typeNames.filter(n => n !== withinType.name);
+ typeNames.unshift(withinType.name);
+ }
+
+ for (const typeName of typeNames) {
+ if (
+ matchedWithin.length + matchedTypes.length + matchedFields.length >=
+ 100
+ ) {
+ break;
+ }
+
+ const type = typeMap[typeName];
+ if (withinType !== type && isMatch(typeName, searchValue)) {
+ matchedTypes.push(
+
+
+
,
+ );
+ }
+
+ if (type && 'getFields' in type) {
+ const fields = type.getFields();
+ Object.keys(fields).forEach(fieldName => {
+ const field = fields[fieldName];
+ let matchingArgs;
+
+ if (!isMatch(fieldName, searchValue)) {
+ if ('args' in field && field.args.length) {
+ matchingArgs = field.args.filter(arg =>
+ isMatch(arg.name, searchValue),
+ );
+ if (matchingArgs.length === 0) {
+ return;
+ }
+ } else {
+ return;
+ }
+ }
+
+ const match = (
+
+ );
+
+ if (withinType === type) {
+ matchedWithin.push(match);
+ } else {
+ matchedFields.push(match);
+ }
+ });
+ }
+ }
+
+ if (
+ matchedWithin.length + matchedTypes.length + matchedFields.length ===
+ 0
+ ) {
+ return {'No results found.'};
+ }
+
+ if (withinType && matchedTypes.length + matchedFields.length > 0) {
+ return (
+
+ {matchedWithin}
+
+
{'other results'}
+ {matchedTypes}
+ {matchedFields}
+
+
+ {matchedWithin}
+ {matchedTypes}
+ {matchedFields}
+
+ );
+ }
+}
+
+function isMatch(sourceText: string, searchValue: string) {
+ try {
+ const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, ch => '\\' + ch);
+ return sourceText.search(new RegExp(escaped, 'i')) !== -1;
+ } catch (e) {
+ return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+ }
+}
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx
new file mode 100644
index 000000000..1f1468e75
--- /dev/null
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx
@@ -0,0 +1,260 @@
+/**
+ * Copyright (c) 2021 GraphQL Contributors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+ GraphQLSchema,
+ GraphQLObjectType,
+ GraphQLInterfaceType,
+ GraphQLUnionType,
+ GraphQLEnumType,
+ GraphQLType,
+ GraphQLEnumValue,
+} from 'graphql';
+
+import Argument from './Argument';
+import MarkdownContent from './MarkdownContent';
+import TypeLink from './TypeLink';
+import DefaultValue from './DefaultValue';
+import { FieldType, OnClickTypeFunction, OnClickFieldFunction } from './types';
+
+type TypeDocProps = {
+ schema: GraphQLSchema;
+ type: GraphQLType;
+ onClickType: OnClickTypeFunction;
+ onClickField: OnClickFieldFunction;
+};
+
+type TypeDocState = {
+ showDeprecated: boolean;
+};
+
+export default class TypeDoc extends React.Component<
+ TypeDocProps,
+ TypeDocState
+> {
+ constructor(props: TypeDocProps) {
+ super(props);
+ this.state = { showDeprecated: false };
+ }
+
+ shouldComponentUpdate(nextProps: TypeDocProps, nextState: TypeDocState) {
+ return (
+ this.props.type !== nextProps.type ||
+ this.props.schema !== nextProps.schema ||
+ this.state.showDeprecated !== nextState.showDeprecated
+ );
+ }
+
+ render() {
+ const schema = this.props.schema;
+ const type = this.props.type;
+ const onClickType = this.props.onClickType;
+ const onClickField = this.props.onClickField;
+
+ let typesTitle: string | null = null;
+ let types: readonly (GraphQLObjectType | GraphQLInterfaceType)[] = [];
+ if (type instanceof GraphQLUnionType) {
+ typesTitle = 'possible types';
+ types = schema.getPossibleTypes(type);
+ } else if (type instanceof GraphQLInterfaceType) {
+ typesTitle = 'implementations';
+ types = schema.getPossibleTypes(type);
+ } else if (type instanceof GraphQLObjectType) {
+ typesTitle = 'implements';
+ types = type.getInterfaces();
+ }
+
+ let typesDef;
+ if (types && types.length > 0) {
+ typesDef = (
+
+
{typesTitle}
+ {types.map(subtype => (
+
+
+
+ ))}
+
+
{'fields'}
+ {fields
+ .filter(field => !field.deprecationReason)
+ .map(field => (
+
+ ))}
+
+
{'deprecated fields'}
+ {!this.state.showDeprecated ? (
+
+ ) : (
+ deprecatedFields.map(field => (
+
+ ))
+ )}
+
+
{'values'}
+ {values
+ .filter(value => Boolean(!value.deprecationReason))
+ .map(value => (
+
+ ))}
+
+
{'deprecated values'}
+ {!this.state.showDeprecated ? (
+
+ ) : (
+ deprecatedValues.map(value => (
+
+ ))
+ )}
+
+
+ {type instanceof GraphQLObjectType && typesDef}
+ {fieldsDef}
+ {deprecatedFieldsDef}
+ {valuesDef}
+ {deprecatedValuesDef}
+ {!(type instanceof GraphQLObjectType) && typesDef}
+
+ );
+ }
+
+ handleShowDeprecated = () => this.setState({ showDeprecated: true });
+}
+
+type FieldProps = {
+ type: GraphQLType;
+ field: FieldType;
+ onClickType: OnClickTypeFunction;
+ onClickField: OnClickFieldFunction;
+};
+
+function Field({ type, field, onClickType, onClickField }: FieldProps) {
+ return (
+
+
onClickField(field, type, event)}>
+ {field.name}
+
+ {'args' in field &&
+ field.args &&
+ field.args.length > 0 && [
+ '(',
+
+ {field.args
+ .filter(arg => !arg.deprecationReason)
+ .map(arg => (
+
+ ))}
+ ,
+ ')',
+ ]}
+ {': '}
+
+
+ {field.description && (
+
+ )}
+ {'deprecationReason' in field && field.deprecationReason && (
+
+ )}
+
+
{value.name}
+
+ {value.deprecationReason && (
+
+ )}
+