Added Cypress tests and few optimizations (#24592)

* added e2e test

* Cleanup

* Unused permission

* Minor changes

* Added case when there is no common team

* More tests

* nit

webapp/channels/src/components/dropdown_input.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {useRef, useState} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import type {CSSProperties} from 'react';
 import {useIntl} from 'react-intl';
 import ReactSelect, {components} from 'react-select';
@@ -81,7 +81,7 @@ const Option = (props: any) => {
 };
 
 const DropdownInput = <T extends ValueType>(props: Props<T>) => {
-    const {value, placeholder, className, addon, name, textPrefix, legend, onChange, styles, options, error, testId, ...otherProps} = props;
+    const {value, placeholder, className, addon, name, textPrefix, legend, onChange, styles, options, error, testId, required, ...otherProps} = props;
 
     const [focused, setFocused] = useState(false);
 
@@ -99,30 +99,29 @@ const DropdownInput = <T extends ValueType>(props: Props<T>) => {
     const [customInputLabel, setCustomInputLabel] = useState<CustomMessageInputType>(null);
     const ownValue = useRef<T>();
 
-    const ownOnChange = (value: T, action: ActionMeta<T>) => {
+    const ownOnChange = useCallback((value: T, action: ActionMeta<T>) => {
         ownValue.current = value;
         onChange(value, action);
-    };
-    const validateInput = () => {
-        if (!props.required || (ownValue.current !== null && ownValue.current)) {
+    }, [onChange]);
+
+    const validateInput = useCallback(() => {
+        if (!required || (ownValue.current !== null && ownValue.current)) {
             setCustomInputLabel(null);
             return;
         }
 
         const validationErrorMsg = formatMessage({id: 'widget.input.required', defaultMessage: 'This field is required'});
         setCustomInputLabel({type: ItemStatus.ERROR, value: validationErrorMsg});
-    };
-
-    const onInputBlur = (event: React.FocusEvent<HTMLElement>) => {
-        const {onBlur} = props;
+    }, [required, formatMessage]);
 
+    const onInputBlur = useCallback((event: React.FocusEvent<HTMLElement>) => {
         setFocused(false);
         validateInput();
 
-        if (onBlur) {
-            onBlur(event);
+        if (otherProps.onBlur) {
+            otherProps.onBlur(event);
         }
-    };
+    }, [otherProps.onBlur, validateInput]);
 
     const showLegend = Boolean(focused || value);
     const isError = error || customInputLabel?.type === 'error';