feat(cloud data source config): GUI and API for configuring a cloud data source with Google cloud healthcare implementation (#3589)

platform/app/public/config/google.js

@@ -55,6 +55,7 @@ window.config = {
         supportsWildcard: false,
         dicomUploadEnabled: true,
         omitQuotationForMultipartRequest: true,
+        configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
       },
     },
     {

platform/app/src/routes/WorkList/WorkList.tsx

@@ -485,6 +485,9 @@ function WorkList({
         }
       : undefined;
 
+  const { component: dataSourceConfigurationComponent } =
+    customizationService.get('ohif.dataSourceConfigurationComponent') ?? {};
+
   return (
     <div className="bg-black h-screen flex flex-col ">
       <Header
@@ -502,6 +505,11 @@ function WorkList({
           clearFilters={() => setFilterValues(defaultFilterValues)}
           isFiltering={isFiltering(filterValues, defaultFilterValues)}
           onUploadClick={uploadProps ? () => show(uploadProps) : undefined}
+          getDataSourceConfigurationComponent={
+            dataSourceConfigurationComponent
+              ? () => dataSourceConfigurationComponent()
+              : undefined
+          }
         />
         {hasStudies ? (
           <div className="grow flex flex-col">

platform/core/src/extensions/ExtensionManager.ts

@@ -354,7 +354,7 @@ export default class ExtensionManager extends PubSubService {
    * @param dataSourceName the data source name
    * @returns the data source definition
    */
-  getDataSourceDef = dataSourceName => {
+  getDataSourceDefinition = dataSourceName => {
     if (dataSourceName === undefined) {
       // Default to the activeDataSource
       dataSourceName = this.activeDataSource;
@@ -363,6 +363,13 @@ export default class ExtensionManager extends PubSubService {
     return this.dataSourceDefs[dataSourceName];
   };
 
+  /**
+   * Gets the data source definition for the active data source.
+   */
+  getActiveDataSourceDefinition = () => {
+    return this.getDataSourceDefinition(this.activeDataSource);
+  };
+
   /**
    * @private
    * @param {string} moduleType

platform/core/src/types/DataSourceConfigurationAPI.ts

@@ -0,0 +1,68 @@
+export interface BaseDataSourceConfigurationAPIItem {
+  id: string;
+  name: string;
+}
+
+/**
+ * The interface to use to configure an associated data source. Typically an
+ * instance of this interface is associated with a data source that the instance
+ * understands and can alter the data source's configuration.
+ */
+export interface BaseDataSourceConfigurationAPI {
+  /**
+   * Gets the i18n labels (i.e. the i18n lookup keys) for each of the configurable items
+   * of the data source configuration API.
+   * For example, for the Google Cloud Healthcare API, this would be
+   * ['Project', 'Location', 'Data set', 'DICOM store'].
+   * Besides the configurable item labels themselves, several other string look ups
+   * are used base on EACH of the labels returned by this method.
+   * For instance, for the label {itemLabel}, the following strings are fetched for
+   * translation...
+   * 1. `No {itemLabel} available`
+   *    - used to indicate no such items are available
+   *    - for example, for Google, `No Project available` would be 'No projects available'
+   * 2. `Select {itemLabel}`
+   *    - used to direct selection of the item
+   *    - for example, for Google, `Select Project` would be 'Select a project'
+   * 3. `Error fetching {itemLabel} list`
+   *    - used to indicate an error occurred fetching the list of items
+   *    - usually accompanied by the error itself
+   *    - for example, for Google, `Error fetching Project list` would be 'Error fetching projects'
+   * 4. `Search {itemLabel} list`
+   *    - used as the placeholder text for filtering a list of items
+   *    - for example, for Google, `Search Project list` would be 'Search projects'
+   */
+  getItemLabels(): Array<string>;
+
+  /**
+   * Initializes the data source configuration API and returns the top-level sub-items
+   * that can be chosen to begin the process of configuring the data source.
+   * For example, for the Google Cloud Healthcare API, this would perform the initial request
+   * to fetch the top level projects for the logged in user account.
+   */
+  initialize(): Promise<Array<BaseDataSourceConfigurationAPIItem>>;
+
+  /**
+   * Sets the current path item and returns the sub-items of that item
+   * that can be further chosen to configure a data source.
+   * When setting the last configurable item of the data source (path), this method
+   * returns an empty list AND configures the active data source with the selected
+   * items path.
+   * For example, for the Google Cloud Healthcare API, this would take the current item
+   * (say a data set) and queries and returns its sub-items (i.e. all of the DICOM stores
+   * contained in that data set). Furthermore, whenever the item to set is a DICOM store,
+   * the Google Cloud Healthcare API implementation would update the OHIF data source
+   * associated with this instance to point to that DICOM store.
+   * @param item the item to set as current
+   */
+  setCurrentItem(
+    item: BaseDataSourceConfigurationAPIItem
+  ): Promise<Array<BaseDataSourceConfigurationAPIItem>>;
+
+  /**
+   * Gets the list of items currently configured for the data source associated with
+   * this API instance. The resultant array must be the same length as the result of
+   * `getItemLabels`.
+   */
+  getConfiguredItems(): Promise<Array<BaseDataSourceConfigurationAPIItem>>;
+}

platform/core/src/types/index.ts

@@ -3,6 +3,10 @@ import * as HangingProtocol from './HangingProtocol';
 import Services from './Services';
 import Hotkey from '../classes/Hotkey';
 import { DataSourceDefinition } from './DataSource';
+import {
+  BaseDataSourceConfigurationAPI,
+  BaseDataSourceConfigurationAPIItem,
+} from './DataSourceConfigurationAPI';
 
 export * from '../services/CustomizationService/types';
 // Separate out some generic types
@@ -19,4 +23,12 @@ export * from './Color';
  * Export the types used within the various services and managers, but
  * not the services/managers themselves, which are exported at the top level.
  */
-export { Extensions, HangingProtocol, Services, Hotkey, DataSourceDefinition };
+export {
+  Extensions,
+  HangingProtocol,
+  Services,
+  Hotkey,
+  DataSourceDefinition,
+  BaseDataSourceConfigurationAPI,
+  BaseDataSourceConfigurationAPIItem,
+};

platform/docs/docs/configuration/dataSources/configuration-ui.md

@@ -0,0 +1,172 @@
+---
+sidebar_position: 6
+sidebar_label: Configuration UI
+---
+
+# Configuration UI
+
+OHIF provides for a generic mechanism for configuring a data source. This is
+most useful for those organizations with several data sources
+that share common (path) hierarchies. For example, an organization may have several DICOM stores
+in the Google Cloud Healthcare realm where each is organized into various projects,
+location, data sets and DICOM stores.
+
+By implementing the `BaseDataSourceConfigurationAPI` and
+`BaseDataSourceConfigurationAPIItem` in an [OHIF extension](../../platform/extensions/index.md), a data source can
+be made configurable via the generic UI as is depicted below for a
+Google Cloud Healthcare data source.
+
+![Data source configuration UI](../../assets/img/data-source-configuration-ui.png)
+
+## `BaseDataSourceConfigurationAPIItem` interface
+
+Each (path) item of a data source is represented by an instance of this interface.
+At the very least each of these items must expose two properties:
+
+|Property |Description|
+|---------|-----------|
+|id|a string that uniquely identifies the item|
+|name|a human readable name for the item|
+
+Note that information such as where in the path hierarchy the item exists
+has been omitted, but can be added in any concrete class that might implement this
+interface. For example, the the Google Cloud Healthcare implementation of this
+interface (`GoogleCloudDataSourceConfigurationAPIItem`) adds an `itemType`
+(i.e. projects, locations, datasets, or dicomStores) and `url`.
+
+## `BaseDataSourceConfigurationAPI` interface
+
+The implementation of this interface is at the heart of the configuration process.
+It possesses several methods for building up a data source path based on various
+`BaseDataSourceConfigurationAPIItem` objects that are set via calls to the `setCurrentItem`
+method.
+
+The constructor for the concrete class implementation should accept whatever
+parameters are necessary for configuring the data source. One argument
+to the constructor must be the string identifying the name of the data source
+to be configured. Furthermore, considering that the `ExtensionManager` possesses
+API to configure and update data sources, it too will likely be an argument to
+the constructor. See [Creation via Customization Module](#creation-via-customization-module)
+for more information on how the constructor is invoked via a factory method.
+
+For an example implementation of this interface see `GoogleCloudDataSourceConfigurationAPI`.
+
+### Interface Methods
+
+Each of the following subsections lists a method of the interface with a description
+detailing what the method should do.
+
+#### `getItemLabels`
+
+Gets the i18n labels (i.e. the i18n lookup keys) for each of the configurable items
+of the data source configuration API.  For example, for the Google Cloud Healthcare
+API, this would be `['Project', 'Location', 'Data set', 'DICOM store']`.
+
+Besides the configurable item labels themselves, several other string look ups
+are used base on EACH of the labels returned by this method.
+For instance, for the label `{itemLabel}``, the following strings are fetched for
+translation...
+1. `No {itemLabel} available`
+   - used to indicate no such items are available
+   - for example, for Google, `No Project available` would be 'No projects available'
+2. `Select {itemLabel}`
+   - used to direct selection of the item
+   - for example, for Google, `Select Project` would be 'Select a project'
+3. `Error fetching {itemLabel} list`
+   - used to indicate an error occurred fetching the list of items
+   - usually accompanied by the error itself
+   - for example, for Google, `Error fetching Project list` would be 'Error fetching projects'
+4. `Search {itemLabel} list`
+   - used as the placeholder text for filtering a list of items
+   - for example, for Google, `Search Project list` would be 'Search projects'
+
+#### `initialize`
+
+Initializes the cloud server API and returns the top-level sub-items
+that can be chosen to begin the process of configuring a data source.
+For example, for the Google Cloud Healthcare API, this would perform the initial request
+to fetch the top level projects for the logged in user account.
+
+#### `setCurrentItem`
+
+Sets the current path item that is passed as an argument to the method and
+returns the sub-items of that item
+that can be further chosen to configure a data source.
+When setting the last configurable item of the data source (path), this method
+returns an empty list AND configures the active data source with the selected
+items path.
+
+For example, for the Google Cloud Healthcare API, this would take the current item
+(say a data set) and queries and returns its sub-items (i.e. all of the DICOM stores
+contained in that data set). Furthermore, whenever the item to set is a DICOM store,
+the Google Cloud Healthcare API implementation would update the OHIF data source
+associated with this instance to point to that DICOM store.
+
+#### `getConfiguredItems`
+
+Gets the list of items currently configured for the data source associated with
+this API instance. The resultant array must be the same length as the result of
+`getItemLabels`. Furthermore the items returned should correspond (index-wise)
+with the labels returned from `getItemLabels`.
+
+## Creation via Customization Module
+
+The generic UI (i.e. `DataSourceConfigurationComponent`) uses the
+[OHIF UI customization service](../../platform/services/ui/customization-service.md) to
+instantiate the `BaseDataSourceConfigurationAPI` instance to configure a data source.
+
+A UI configurable data source should have a `configurationAPI` field as part of
+its `configuration` in the OHIF config file. The `configurationAPI` value is the
+customization id of the customization module that provides the factory method
+to instantiate the `BaseDataSourceConfigurationAPI` instance.
+
+For example, the following is a snippet of a Google Cloud Healthcare data source configuration.
+
+```js
+  dataSources: [
+    {
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
+      sourceName: 'google-dicomweb',
+      configuration: {
+        name: 'GCP',
+        wadoUriRoot: 'https://healthcare.googleapis.com/v1/projects/ohif-cloud-healthcare/locations/us-east4/...',
+        ...
+        configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
+        ...
+      },
+    },
+  ]
+```
+
+This suggests that the factory method is provided by the `'ohif.dataSourceConfigurationAPI.google'`
+customization module. That customization module is provided by the `default` extension's
+`getCustomizationModule` and looks something like the following snippet of code. Notice that
+the factory method's name MUST be `factory` and accept one argument - the data source name.
+Furthermore note how the constructor is invoked with anything required by the concrete configuration
+API class.
+
+```js
+export default function getCustomizationModule({
+  servicesManager,
+  extensionManager,
+}) {
+  return [
+    {
+      name: 'default',
+      value: [
+        {
+          // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
+          id: 'ohif.dataSourceConfigurationAPI.google',
+          factory: (dataSourceName: string) =>
+            new GoogleCloudDataSourceConfigurationAPI(
+              dataSourceName,
+              servicesManager,
+              extensionManager
+            ),
+        },
+      ],
+    },
+  ];
+}
+
+```

platform/docs/docs/configuration/dataSources/static-files.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 sidebar_label: Static Files
 ---
 

platform/i18n/src/locales/en-US/DataSourceConfiguration.json

@@ -0,0 +1,24 @@
+{
+  "Configure Data Source":"Configure Data Source",
+  "Data set": "Data set",
+  "DICOM store": "DICOM store",
+  "Location": "Location",
+  "Project": "Project",
+  "Error fetching Data set list": "Error fetching data sets",
+  "Error fetching DICOM store list": "Error fetching DICOM stores",
+  "Error fetching Location list": "Error fetching locations",
+  "Error fetching Project list": "Error fetching projects",
+  "No Project available": "No projects available",
+  "No Location available": "No locations available",
+  "No Data set available": "No data sets available",
+  "No DICOM store available": "No DICOM stores available",
+  "Select": "Select",
+  "Search Data set list": "Search data sets",
+  "Search DICOM store list": "Search DICOM stores",
+  "Search Location list": "Search locations",
+  "Search Project list": "Search projects",
+  "Select Data set": "Select a data Set",
+  "Select DICOM store": "Select a DICOM store",
+  "Select Location": "Select a location",
+  "Select Project": "Select a project"
+}

platform/i18n/src/locales/en-US/index.js

@@ -2,6 +2,7 @@ import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DataSourceConfiguration from './DataSourceConfiguration.json';
 import DatePicker from './DatePicker.json';
 import Header from './Header.json';
 import MeasurementTable from './MeasurementTable.json';
@@ -18,6 +19,7 @@ export default {
     Buttons,
     CineDialog,
     Common,
+    DataSourceConfiguration,
     DatePicker,
     Header,
     MeasurementTable,

platform/ui/src/assets/icons/status-untracked.svg

@@ -1,6 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd">
         <path d="M0 0h16v16H0z"/>
-        <rect stroke="#7BB2CE" fill="#0D0E24" x=".5" y=".5" width="15" height="15" rx="7.5"/>
+        <rect stroke="currentColor" fill="#0D0E24" x=".5" y=".5" width="15" height="15" rx="7.5"/>
     </g>
 </svg>

platform/ui/src/components/Button/__stories__/button.stories.mdx

@@ -1,4 +1,4 @@
-import Button, {ButtonType, ButtonSize} from '../Button';
+import {Button, ButtonEnums} from '../../../components';
 import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
 import {
   createComponentTemplate,
@@ -45,8 +45,8 @@ There can be different types of buttons: `primary`, and `secondary`.
 <Canvas>
   <Story name="Types">
     <div className="flex space-x-2">
-      <Button type={ButtonType.primary}>Primary Button</Button>
-      <Button type={ButtonType.secondary}>Secondary Button</Button>
+      <Button type={ButtonEnums.type.primary}>Primary Button</Button>
+      <Button type={ButtonEnums.type.secondary}>Secondary Button</Button>
     </div>
   </Story>
 </Canvas>
@@ -59,8 +59,8 @@ to the button's height.
 <Canvas>
   <Story name="Colors">
     <div className="flex items-center space-x-2">
-      <Button size={ButtonSize.small}>Small Button</Button>
-      <Button size={ButtonSize.medium}>Medium Button</Button>
+      <Button size={ButtonEnums.size.small}>Small Button</Button>
+      <Button size={ButtonEnums.size.medium}>Medium Button</Button>
     </div>
   </Story>
 </Canvas>
@@ -71,7 +71,7 @@ You can mix different props together to create a button.
 
 <Canvas>
   <Story name="Custom">
-    <Button type={ButtonType.secondary} size={ButtonSize.small}>
+    <Button type={ButtonEnums.type.secondary} size={ButtonEnums.size.small}>
       Small, Secondary Button
     </Button>
   </Story>

platform/ui/src/components/InputFilterText/InputFilterText.tsx

@@ -0,0 +1,91 @@
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import Icon from '../Icon';
+
+type InputFilterTextProps = {
+  className?: string;
+  value?: string;
+  placeholder: string;
+  onDebounceChange?: (val: string) => void;
+  onChange?: (val: string) => void;
+  debounceTime?: number;
+};
+
+/**
+ * A component to use as the input for text to filter by/on. A debounced callback is automatically provided
+ * so that the filtering in-turn will be debounced. There is also a straight onChange callback when the filter value is
+ * required immediately and NOT debounced. The debounce time is also configurable.
+ */
+const InputFilterText = ({
+  className,
+  value = '',
+  placeholder,
+  onDebounceChange,
+  onChange,
+  debounceTime = 200,
+}: InputFilterTextProps): ReactElement => {
+  const [filterValue, setFilterValue] = useState<string>(value);
+
+  const searchInputRef = useRef(null);
+
+  const debouncedOnChange = useMemo(() => {
+    return debounce(onDebounceChange || (() => {}), debounceTime);
+  }, []);
+
+  // This allows for the filter value to be updated via the props.
+  useEffect(() => setFilterValue(value), [value]);
+
+  useEffect(() => {
+    return debouncedOnChange?.cancel();
+  }, []);
+
+  const handleFilterTextChanged = useCallback(value => {
+    setFilterValue(value);
+
+    if (onChange) {
+      onChange(value);
+    }
+
+    if (onDebounceChange) {
+      debouncedOnChange(value);
+    }
+  }, []);
+
+  return (
+    <label className={classNames('relative', className)}>
+      <span className="absolute inset-y-0 left-0 flex items-center pl-2">
+        <Icon name="icon-search"></Icon>
+      </span>
+      <input
+        ref={searchInputRef}
+        type="text"
+        className="block bg-black w-full shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded-md w-full py-2 px-9 text-base leading-tight placeholder:text-inputfield-placeholder"
+        placeholder={placeholder}
+        onChange={event => handleFilterTextChanged(event.target.value)}
+        autoComplete="off"
+        value={filterValue}
+      ></input>
+      <span className="absolute inset-y-0 right-0 flex items-center pr-2">
+        <Icon
+          name="icon-clear-field"
+          className={classNames('cursor-pointer', filterValue ? '' : 'hidden')}
+          onClick={() => {
+            searchInputRef.current.value = '';
+            handleFilterTextChanged('');
+          }}
+        ></Icon>
+      </span>
+    </label>
+  );
+};
+
+export default InputFilterText;

platform/ui/src/components/InputFilterText/_stories_/inputFilterText.stories.mdx

@@ -0,0 +1,54 @@
+import InputFilterText from '../InputFilterText';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+
+export const argTypes = {
+  component: InputFilterText,
+  title: 'Components/InputFilterText',
+};
+
+<Meta title="Components/InputFilterText" component={InputFilterText} />
+
+export const InputFilterTextTemplate = args => (
+  <div className="w-80">
+    <InputFilterText {...args} />
+  </div>
+)
+
+<Heading title="InputFilterText" componentRelativePath="InputFilterText/InputFilterText.tsx" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+InputFilterText is a component that is styled such that it can be used as a text input to
+filter a list of textual items. It allows you to enter any text. There are two (optional)
+callbacks that can be invoked as the characters of the text are entered: one
+callback is invoked as each character is typed and another is debounced so that
+any filtering can occur once the user has entered a significant amount of info and
+pausing by a configurable amount of time in milliseconds. The component also
+provides a button on the far right of the component that when clicked will clear the input
+text. The button only appears when there is text in the component.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      className: "w-full text-white",
+      placeholder: "Search for...",
+      onChange: () => console.log('input text changed'),
+      onDebounceChange: () => console.log('debounce text changed'),
+    }}
+  >
+    {InputFilterTextTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={InputFilterText} />
+
+## Contribute
+
+<Footer componentRelativePath="InputFilterText/__stories__/InputFilterText.stories.mdx" />

platform/ui/src/components/InputFilterText/index.js

@@ -0,0 +1,2 @@
+import InputFilterText from './InputFilterText';
+export default InputFilterText;

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -15,6 +15,7 @@ const StudyListFilter = ({
   isFiltering,
   numOfStudies,
   onUploadClick,
+  getDataSourceConfigurationComponent,
 }) => {
   const { t } = useTranslation('StudyList');
   const { sortBy, sortDirection } = filterValues;
@@ -30,13 +31,15 @@ const StudyListFilter = ({
   return (
     <React.Fragment>
       <div>
-        <div className="bg-primary-dark">
-          <div className="container relative flex flex-col pt-5 m-auto">
-            <div className="flex flex-row justify-between px-12 mb-5">
-              <div className="flex flex-row">
-                <Typography variant="h4" className="mr-6 text-primary-light">
+        <div className="bg-black">
+          <div className="container relative flex flex-col pt-5 mx-auto">
+            <div className="flex flex-row justify-between mb-5">
+              <div className="flex flex-row items-center gap-6 shrink min-w-[1px]">
+                <Typography variant="h6" className="text-white">
                   {t('StudyList')}
                 </Typography>
+                {getDataSourceConfigurationComponent &&
+                  getDataSourceConfigurationComponent()}
                 {onUploadClick && (
                   <div
                     className="flex items-center gap-2 cursor-pointer text-primary-active text-lg self-center font-semibold"
@@ -63,7 +66,7 @@ const StudyListFilter = ({
                   </LegacyButton>
                 )}
                 <Typography
-                  variant="h4"
+                  variant="h6"
                   className="mr-2"
                   data-cy={'num-studies'}
                 >
@@ -71,7 +74,7 @@ const StudyListFilter = ({
                 </Typography>
                 <Typography
                   variant="h6"
-                  className="self-end pb-1 text-common-light"
+                  className="self-end pb-1 text-primary-light"
                 >
                   {t('Studies')}
                 </Typography>
@@ -80,8 +83,8 @@ const StudyListFilter = ({
           </div>
         </div>
       </div>
-      <div className="sticky z-10 border-b-4 border-black -top-1">
-        <div className="pt-3 pb-3 bg-primary-dark ">
+      <div className="sticky z-10 border-b-4 border-black -top-1 mx-auto">
+        <div className="pt-3 pb-3 bg-primary-dark">
           <InputGroup
             inputMeta={filtersMeta}
             values={filterValues}
@@ -134,6 +137,7 @@ StudyListFilter.propTypes = {
   clearFilters: PropTypes.func.isRequired,
   isFiltering: PropTypes.bool.isRequired,
   onUploadClick: PropTypes.func,
+  getDataSourceConfigurationComponent: PropTypes.func,
 };
 
 export default StudyListFilter;

platform/ui/src/components/index.js

@@ -13,6 +13,7 @@ import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
 import InputDateRange from './InputDateRange';
+import InputFilterText from './InputFilterText';
 import InputGroup from './InputGroup';
 import InputLabelWrapper from './InputLabelWrapper';
 import InputMultiSelect from './InputMultiSelect';
@@ -97,6 +98,7 @@ export {
   IconButton,
   Input,
   InputDateRange,
+  InputFilterText,
   InputGroup,
   InputRange,
   InputNumber,

platform/ui/src/index.js

@@ -58,6 +58,7 @@ export {
   InputRange,
   InputNumber,
   InputDateRange,
+  InputFilterText,
   InputGroup,
   InputLabelWrapper,
   InputMultiSelect,