@bitrise/bitkit 13.241.0 → 13.243.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.241.0",
+  "version": "13.243.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Dropdown/Dropdown.tsx

@@ -386,6 +386,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       isError,
       isWarning,
       label,
+      labelHelp,
       name,
       onBlur,
       onChange,
@@ -498,6 +499,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
               badge={badge}
               infoTooltipLabel={infoTooltipLabel}
               infoTooltipProps={infoTooltipProps}
+              labelHelp={labelHelp}
               htmlFor={buttonId}
             >
               {label}

package/src/Components/Dropdown/DropdownProps.ts

@@ -26,6 +26,7 @@ export interface DropdownProps<T> extends ChakraProps {
   id?: string;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
+  labelHelp?: (icon: ReactNode) => ReactNode;
   isError?: boolean;
   isWarning?: boolean;
   label?: string;

package/src/Components/Filter/Filter.storyData.ts

@@ -39,7 +39,10 @@ export const FILTER_STORY_DATA: FilterData = {
     type: 'select',
   },
   branch: {
-    options: [],
+    categoryName: 'Branch',
+    categoryNamePlural: 'Branches',
+    isPatternEnabled: true,
+    options: ['default 1', 'default 2', 'default 3', 'default 13'],
     type: 'tag',
   },
   cache_type: {

package/src/Components/Filter/Filter.types.ts

@@ -27,6 +27,7 @@ export type FilterCategoryProps = {
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;
   optionsMap?: FilterOptionsMap;
+  isPatternEnabled?: boolean;
 } & (
   | {
       type: 'dateRange';

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -73,6 +73,7 @@ const FilterAdd = (props: FilterAddProps) => {
             <FilterForm
               category={selectedCategory}
               categoryName={data[selectedCategory].categoryName}
+              categoryNamePlural={data[selectedCategory].categoryNamePlural}
               onCancel={onClose}
               onChange={onFilterChange}
             />

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -8,6 +8,9 @@ import ButtonGroup from '../../ButtonGroup/ButtonGroup';
 import Checkbox from '../../Form/Checkbox/Checkbox';
 import CheckboxGroup from '../../Form/Checkbox/CheckboxGroup';
 import Icon from '../../Icon/Icon';
+import Input from '../../Form/Input/Input';
+import List from '../../List/List';
+import ListItem from '../../List/ListItem';
 import Radio from '../../Form/Radio/Radio';
 import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
@@ -18,20 +21,64 @@ import { isEqual, useDebounce } from '../../../utils/utils';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
 
+/**
+ * https://gist.github.com/donmccurdy/6d073ce2c6f3951312dfa45da14a420f
+ * RegExp-escapes all characters in the given string.
+ */
+function regExpEscape(s: string) {
+  return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+}
+
+const getMatchingResults = (categoryNamePlural: string, selected: FilterValue, items: FilterOptions) => {
+  if (!selected.length || selected[0] === '') {
+    return (
+      <Text textStyle="body/md/regular" color="text/secondary">
+        Enter pattern to view {categoryNamePlural} with matching names.
+      </Text>
+    );
+  }
+
+  const filterRegexp = new RegExp(`^${selected[0].split(/\*+/).map(regExpEscape).join('.*')}$`);
+
+  const matchingResults = items.filter((item) => {
+    return filterRegexp.test(item) && item !== selected[0];
+  });
+  if (!matchingResults.length) {
+    return (
+      <Text textStyle="body/md/regular" color="text/secondary">
+        (no matching {categoryNamePlural})
+      </Text>
+    );
+  }
+
+  return (
+    <Box maxHeight="11rem" overflow="scroll">
+      <List textStyle="body/md/regular" variant="unordered">
+        {matchingResults.map((r) => (
+          <ListItem key={r}>{r}</ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
 export type FilterFormProps = {
   category: string;
   categoryName?: string;
+  categoryNamePlural?: string;
   onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
   onCancel: () => void;
 };
 
 const FilterForm = (props: FilterFormProps) => {
-  const { category, categoryName, onCancel, onChange } = props;
+  const { category, categoryName, categoryNamePlural, onCancel, onChange } = props;
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { data, state } = useFilterContext();
+
   const {
+    isPatternEnabled,
     iconsMap,
     hasNotFilteredOption = true,
     preserveOptionOrder,
@@ -45,6 +92,10 @@ const FilterForm = (props: FilterFormProps) => {
 
   const [selected, setSelected] = useState<FilterValue>(value);
 
+  const [mode, setMode] = useState<'manually' | 'pattern'>(
+    isPatternEnabled && value?.length && value[0].includes('*') ? 'pattern' : 'manually',
+  );
+
   const [searchValue, setSearchValue] = useState<string>('');
   const debouncedSearchValue = useDebounce<string>(searchValue, 1000);
 
@@ -145,58 +196,90 @@ const FilterForm = (props: FilterFormProps) => {
             </Badge>
           )}
         </Box>
-        {(withSearch || isAsync) && (
-          <SearchInput
-            isDisabled={isInitialLoading}
-            onChange={onSearchChange}
-            placeholder={isAsync ? 'Start typing to search options' : 'Start typing to find options'}
-            sx={filterStyle.formSearch}
-            value={searchValue}
-          />
-        )}
-        {isLoading && 'Loading...'}
-        {!isLoading && isMultiple && (
-          <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
-            {items.length
-              ? items.map((opt) => (
-                  <Checkbox key={opt} value={opt}>
-                    {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
-                    {getOptionLabel(opt, currentOptionMap)}
-                  </Checkbox>
-                ))
-              : getEmptyText()}
-          </CheckboxGroup>
-        )}
-        {!isLoading && !isMultiple && (
-          <RadioGroup onChange={(v) => setSelected([v])} sx={filterStyle.formInputGroup} value={selected[0] || ''}>
-            {hasNotFilteredOption && (
-              <Radio value="">
-                <Text as="span" color="neutral.40" fontStyle="italic">
-                  Not filtered
-                </Text>
-              </Radio>
+        {mode === 'manually' ? (
+          <>
+            {(withSearch || isAsync) && (
+              <SearchInput
+                isDisabled={isInitialLoading}
+                onChange={onSearchChange}
+                placeholder="Search by name"
+                size="md"
+                sx={filterStyle.formSearch}
+                value={searchValue}
+              />
             )}
-            {items.length
-              ? items.map((opt) => {
-                  const hasIcon = iconsMap && iconsMap[opt];
-                  const label = getOptionLabel(opt, currentOptionMap);
-                  return (
-                    <Radio key={opt} value={opt}>
-                      {hasIcon ? (
-                        <Box as="span" display="flex" gap="4">
-                          <Icon name={iconsMap[opt]} />
-                          {label}
-                        </Box>
-                      ) : (
-                        label
-                      )}
-                    </Radio>
-                  );
-                })
-              : getEmptyText()}
-          </RadioGroup>
+            {isLoading && 'Loading...'}
+            {!isLoading && isMultiple && (
+              <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
+                {items.length
+                  ? items.map((opt) => (
+                      <Checkbox key={opt} value={opt}>
+                        {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
+                        {getOptionLabel(opt, currentOptionMap)}
+                      </Checkbox>
+                    ))
+                  : getEmptyText()}
+              </CheckboxGroup>
+            )}
+            {!isLoading && !isMultiple && (
+              <RadioGroup onChange={(v) => setSelected([v])} sx={filterStyle.formInputGroup} value={selected[0] || ''}>
+                {hasNotFilteredOption && (
+                  <Radio value="">
+                    <Text as="span" color="neutral.40" fontStyle="italic">
+                      Not filtered
+                    </Text>
+                  </Radio>
+                )}
+                {items.length
+                  ? items.map((opt) => {
+                      const hasIcon = iconsMap && iconsMap[opt];
+                      const label = getOptionLabel(opt, currentOptionMap);
+                      return (
+                        <Radio key={opt} value={opt}>
+                          {hasIcon ? (
+                            <Box as="span" display="flex" gap="4">
+                              <Icon name={iconsMap[opt]} />
+                              {label}
+                            </Box>
+                          ) : (
+                            label
+                          )}
+                        </Radio>
+                      );
+                    })
+                  : getEmptyText()}
+              </RadioGroup>
+            )}
+          </>
+        ) : (
+          <>
+            <Input
+              isRequired
+              helperText="Allowed wildcard character: *"
+              label="Wildcard pattern"
+              marginBlockEnd="24"
+              placeholder="(e.g. *main*, release-*)"
+              size="md"
+              onChange={(e) => setSelected([e.target.value])}
+              value={selected[0] || ''}
+            />
+            <Text as="label" textStyle="comp/input/label" color="text/primary" display="block" marginBlockEnd="8">
+              Matching results
+            </Text>
+            {getMatchingResults((categoryNamePlural || category).toLowerCase(), selected, items)}
+          </>
         )}
         <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
+          {isPatternEnabled && !isEditMode && (
+            <Button
+              marginInlineEnd="auto"
+              onClick={() => setMode(mode === 'manually' ? 'pattern' : 'manually')}
+              size="sm"
+              variant="tertiary"
+            >
+              {mode === 'manually' ? 'Use wildcard pattern' : 'Select manually'}
+            </Button>
+          )}
           {isEditMode && hasNotFilteredOption && (
             <Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
               Clear

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -98,7 +98,13 @@ const FilterItem = (props: FilterItemProps) => {
         </Box>
       </PopoverTrigger>
       <PopoverContent>
-        <FilterForm category={category} categoryName={categoryName} onCancel={onClose} onChange={onChange} />
+        <FilterForm
+          category={category}
+          categoryName={categoryName}
+          categoryNamePlural={pluralCategoryString}
+          onCancel={onClose}
+          onChange={onChange}
+        />
       </PopoverContent>
     </Popover>
   );

package/src/Components/Form/FormLabel.tsx

@@ -10,13 +10,14 @@ export interface FormLabelProps extends ChakraFormLabelProps {
   children?: string;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
+  labelHelp?: (icon: ReactNode) => ReactNode;
   maxLength?: number;
   valueLength?: number;
   withCounter?: boolean;
 }
 
 const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
-  const { badge, infoTooltipLabel, infoTooltipProps, maxLength, valueLength, withCounter, ...rest } = props;
+  const { badge, infoTooltipLabel, infoTooltipProps, labelHelp, maxLength, valueLength, withCounter, ...rest } = props;
 
   const showLabel = rest.children || !!infoTooltipLabel || (withCounter && maxLength);
 
@@ -39,6 +40,8 @@ const FormLabel = forwardRef<FormLabelProps, 'label'>((props, ref) => {
         ref={ref}
       />
 
+      {labelHelp?.(<Icon color="icon/tertiary" name="Info" size="16" />)}
+
       {!!infoTooltipLabel && (
         <Tooltip label={infoTooltipLabel} placement="right" {...infoTooltipProps}>
           <Icon color="icon/tertiary" name="Info" size="16" />