Added withClearValue prop to select component

client/src/Project/IssueDetails/Priority/index.jsx

@@ -25,6 +25,7 @@ const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => {
       <SectionTitle>Priority</SectionTitle>
       <Select
         variant="empty"
+        withClearValue={false}
         dropdownWidth={343}
         value={issue.priority}
         options={Object.values(IssuePriority).map(priority => ({

client/src/Project/IssueDetails/Status/index.jsx

@@ -18,6 +18,7 @@ const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
     <Select
       variant="empty"
       dropdownWidth={343}
+      withClearValue={false}
       value={issue.status}
       options={Object.values(IssueStatus).map(status => ({
         value: status,

client/src/Project/IssueDetails/Tracking/index.jsx

@@ -51,7 +51,9 @@ const ProjectBoardIssueDetailsTracking = ({ issue, updateIssue }) => {
       <SectionTitle>Time Tracking</SectionTitle>
       <Modal
         width={400}
-        renderLink={modal => <TrackingLink>{renderTrackingWidget(modal.open)}</TrackingLink>}
+        renderLink={modal => (
+          <TrackingLink onClick={modal.open}>{renderTrackingWidget()}</TrackingLink>
+        )}
         renderContent={modal => (
           <ModalContents>
             <ModalTitle>Time tracking</ModalTitle>
@@ -77,8 +79,8 @@ const ProjectBoardIssueDetailsTracking = ({ issue, updateIssue }) => {
     </>
   );
 
-  const renderTrackingWidget = (onClick = () => {}) => (
+  const renderTrackingWidget = () => (
-    <Tracking onClick={onClick}>
+    <Tracking>
       <WatchIcon type="stopwatch" size={26} top={-1} />
       <Right>
         <BarCont>

client/src/Project/IssueDetails/Type/index.jsx

@@ -15,6 +15,7 @@ const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
   <Select
     variant="empty"
     dropdownWidth={150}
+    withClearValue={false}
     value={issue.type}
     options={Object.values(IssueType).map(type => ({
       value: type,

client/src/Project/IssueDetails/Users/index.jsx

@@ -57,6 +57,7 @@ const ProjectBoardIssueDetailsUsers = ({ issue, updateIssue, projectUsers }) =>
       <Select
         variant="empty"
         dropdownWidth={343}
+        withClearValue={false}
         value={issue.reporterId}
         options={userOptions}
         onChange={userId => updateIssue({ reporterId: userId })}

client/src/index.jsx

@@ -6,10 +6,10 @@ import ReactDOM from 'react-dom';
 
 import App from 'App';
 
-// APP IS NOT RESPONSIVE - REDUCE BROWSER HEIGHT, ISSUES DONT SCROLL
-
-// TODO: UPDATE FORMIK TO FIX SETFIELDVALUE TO EMPTY ARRAY ISSUE https://github.com/jaredpalmer/formik/pull/2144
-
-// REFACTOR HTML TO USE SEMANTIC ELEMENTS
-
 ReactDOM.render(<App />, document.getElementById('root'));
+
+// APP IS NOT RESPONSIVE - REDUCE BROWSER HEIGHT, ISSUES DONT SCROLL
+// TODO: UPDATE FORMIK TO FIX SETFIELDVALUE TO EMPTY ARRAY ISSUE https://github.com/jaredpalmer/formik/pull/2144
+// REFACTOR HTML TO USE SEMANTIC ELEMENTS
+// MOVE SOME UTILS LIKE API TO SERVICES FOLDER
+// RENAME ISSUE DETAILS "USERS" TO ASSIGNEESREPORTER

client/src/shared/components/Select/Dropdown.jsx

@@ -17,7 +17,8 @@ const propTypes = {
   options: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
-  isMulti: PropTypes.bool,
+  isMulti: PropTypes.bool.isRequired,
+  withClearValue: PropTypes.bool.isRequired,
   propsRenderOption: PropTypes.func,
 };
 
@@ -25,7 +26,6 @@ const defaultProps = {
   dropdownWidth: undefined,
   value: undefined,
   onCreate: undefined,
-  isMulti: false,
   propsRenderOption: undefined,
 };
 
@@ -41,6 +41,7 @@ const SelectDropdown = ({
   onChange,
   onCreate,
   isMulti,
+  withClearValue,
   propsRenderOption,
 }) => {
   const [isCreatingOption, setCreatingOption] = useState(false);
@@ -204,7 +205,7 @@ const SelectDropdown = ({
         onKeyDown={handleInputKeyDown}
         onChange={event => setSearchValue(event.target.value)}
       />
-      {!isValueEmpty && <ClearIcon type="close" onClick={clearOptionValues} />}
+      {!isValueEmpty && withClearValue && <ClearIcon type="close" onClick={clearOptionValues} />}
       <Options ref={$optionsRef}>
         {filteredOptions.map(renderSelectableOption)}
         {isOptionCreatable && renderCreatableOption()}

client/src/shared/components/Select/index.jsx

@@ -28,6 +28,7 @@ const propTypes = {
   onChange: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
   isMulti: PropTypes.bool,
+  withClearValue: PropTypes.bool,
   renderValue: PropTypes.func,
   renderOption: PropTypes.func,
 };
@@ -42,6 +43,7 @@ const defaultProps = {
   invalid: false,
   onCreate: undefined,
   isMulti: false,
+  withClearValue: true,
   renderValue: undefined,
   renderOption: undefined,
 };
@@ -58,6 +60,7 @@ const Select = ({
   onChange,
   onCreate,
   isMulti,
+  withClearValue,
   renderValue: propsRenderValue,
   renderOption: propsRenderOption,
 }) => {
@@ -184,6 +187,7 @@ const Select = ({
           onChange={handleChange}
           onCreate={onCreate}
           isMulti={isMulti}
+          withClearValue={withClearValue}
           propsRenderOption={propsRenderOption}
         />
       )}

client/src/shared/hooks/api/query.js

@@ -5,7 +5,9 @@ import api from 'shared/utils/api';
 import useMergeState from 'shared/hooks/mergeState';
 import useDeepCompareMemoize from 'shared/hooks/deepCompareMemoize';
 
-const useQuery = (url, propsVariables = {}, { lazy = false, cachePolicy = 'cache-first' } = {}) => {
+const useQuery = (url, propsVariables = {}, options = {}) => {
+  const { lazy = false, cachePolicy = 'cache-first' } = options;
+
   const [state, mergeState] = useMergeState({
     data: null,
     error: null,