change(ui) - tags casing

frontend/app/components/Alerts/DropdownChips/DropdownChips.js

@@ -1,79 +1,66 @@
-import React from 'react'
+import React from 'react';
 import { Input, TagBadge } from 'UI';
 import Select from 'Shared/Select';
 
-const DropdownChips = ({ 
-  textFiled = false,
-  validate = null,
-  placeholder = '',
-  selected = [],
-  options = [],
-  badgeClassName = 'lowercase',
-  onChange = () => null,
-  ...props
+const DropdownChips = ({
+    textFiled = false,
+    validate = null,
+    placeholder = '',
+    selected = [],
+    options = [],
+    badgeClassName = 'lowercase',
+    onChange = () => null,
+    ...props
 }) => {
-  const onRemove = id => {
-    onChange(selected.filter(i => i !== id))
-  }
+    const onRemove = (id) => {
+        onChange(selected.filter((i) => i !== id));
+    };
 
-  const onSelect = ({ value }) => {
-    const newSlected = selected.concat(value.value);
-    onChange(newSlected)
-  };
+    const onSelect = ({ value }) => {
+        const newSlected = selected.concat(value.value);
+        onChange(newSlected);
+    };
 
-  const onKeyPress = e => {
-    const val = e.target.value;
-    if (e.key !== 'Enter' || selected.includes(val)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (validate && !validate(val)) return;
+    const onKeyPress = (e) => {
+        const val = e.target.value;
+        if (e.key !== 'Enter' || selected.includes(val)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (validate && !validate(val)) return;
 
-    const newSlected = selected.concat(val);
-    e.target.value = '';
-    onChange(newSlected);
-  }
+        const newSlected = selected.concat(val);
+        e.target.value = '';
+        onChange(newSlected);
+    };
 
-  const _options = options.filter(item => !selected.includes(item.value))
+    const _options = options.filter((item) => !selected.includes(item.value));
+
+    const renderBadge = (item) => {
+        const val = typeof item === 'string' ? item : item.value;
+        const text = typeof item === 'string' ? item : item.label;
+        return <TagBadge className={badgeClassName} key={text} text={text} hashed={false} onRemove={() => onRemove(val)} outline={true} />;
+    };
 
-  const renderBadge = item => {
-    const val = typeof item === 'string' ? item : item.value;
-    const text = typeof item === 'string' ? item : item.label;
     return (
-      <TagBadge
-        className={badgeClassName}
-        key={ text }
-        text={ text }
-        hashed={false}
-        onRemove={ () => onRemove(val) }
-        outline={ true }
-      />
-    )
-  }
+        <div className="w-full">
+            {textFiled ? (
+                <Input type="text" onKeyPress={onKeyPress} placeholder={placeholder} />
+            ) : (
+                <Select
+                    placeholder={placeholder}
+                    isSearchable={true}
+                    options={_options}
+                    name="webhookInput"
+                    value={null}
+                    onChange={onSelect}
+                    {...props}
+                />
+            )}
+            <div className="flex flex-wrap mt-3">
+                {textFiled ? selected.map(renderBadge) : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
+            </div>
+        </div>
+    );
+};
 
-  return (
-    <div className="w-full">
-      {textFiled ? (
-        <Input type="text" onKeyPress={onKeyPress} placeholder={placeholder} />
-      ) : (
-        <Select
-          placeholder={placeholder}
-          isSearchable={true}
-          options={ _options }
-          name="webhookInput"
-          value={null}
-          onChange={ onSelect }
-          {...props}
-        />
-      )}
-      <div className="flex flex-wrap mt-3">
-        {
-          textFiled ? 
-            selected.map(renderBadge) :
-            options.filter(i => selected.includes(i.value)).map(renderBadge)
-        }
-      </div>
-    </div>
-  )
-}
-
-export default DropdownChips
+export default DropdownChips;

frontend/app/components/ui/TagBadge/TagBadge.js

@@ -4,32 +4,28 @@ import styles from './tagBadge.module.css';
 import { Icon } from 'UI';
 
 export default class TagBadge extends React.PureComponent {
-
-  onClick = () => {
-    if (this.props.onClick) {
-      this.props.onClick(this.props.text);
-    }
-  }
-
-  render() {
-    const {
-      className, text, onRemove, onClick, hashed = true, outline = false,
-    } = this.props;
-    return (
-      <div
-        className={ cn(styles.badge, { "cursor-pointer": !!onClick }, className) }
-        onClick={ this.onClick }
-        data-hashed={ hashed }
-        data-outline={ outline }
-      >
-        <span>{ text }</span>
-        { onRemove &&
-          <button type="button" onClick={ onRemove }>
-            <Icon name="close" size="12" />
-            {/* <i className={ styles.closeIcon } /> */}
-          </button>
+    onClick = () => {
+        if (this.props.onClick) {
+            this.props.onClick(this.props.text);
         }
-      </div>
-    );
-  }
+    };
+
+    render() {
+        const { className, text, onRemove, onClick, hashed = true, outline = false } = this.props;
+        return (
+            <div
+                className={cn(styles.badge, { 'cursor-pointer': !!onClick }, className)}
+                onClick={this.onClick}
+                data-hashed={hashed}
+                data-outline={outline}
+            >
+                <span>{text}</span>
+                {onRemove && (
+                    <button type="button" onClick={onRemove}>
+                        <Icon name="close" size="12" />
+                    </button>
+                )}
+            </div>
+        );
+    }
 }

frontend/app/components/ui/TagBadge/tagBadge.module.css

@@ -12,7 +12,7 @@
   margin-right: 8px;
   font-weight: 300;
   user-select: none;
-  text-transform: capitalize;
+  /* text-transform: capitalize; */
   color: $gray-dark !important;
 
   &[data-outline=true] {