TNO-3017 auto complete search field (#2363)

* TNO-3017 changes to UI to add select drop down with reports

* TNO-3017 adding dorpdown to select the report to add stories to.

* TNO-3017 fixed linting errors

* TNO-3017 changes to input field for sections search

* Changes to add search icon to sections

* TNO-3017 Add Serach field for Sections

* MMI-3017 changes to add scroll bar and clear search after section selected.

* MMI-3017 changes to css class to remove orizontal scroll on saving

app/subscriber/src/components/tool-bar/AddToReportMenu.tsx

@@ -98,10 +98,12 @@ export const AddToReportMenu: React.FC<IAddToReportMenuProps> = ({ content, onCl
           </div>
         ));
         onClear?.();
+        setSearchQuery('');
       } catch {
         // Errors are handled globally.
       } finally {
         setInProgress({ sectionName: '', value: false });
+        setSearchQuery('');
       }
     },
     [addContentToReport, onClear, getReport, generateReport],

app/subscriber/src/components/tool-bar/styled/AddToMenu.tsx

@@ -24,6 +24,7 @@ export const AddToMenu = styled.div`
   }
   .report-name {
     margin-left: 1.5em;
+    flex: auto;
   }
   .react-tooltip {
     font-size: 1.1em;
@@ -39,10 +40,11 @@ export const AddToMenu = styled.div`
       color: ${(props) => props.theme.css.btnBkPrimary};
       font-weight: bold;
       border-bottom: 1px solid ${(props) => props.theme.css.btnBkPrimary};
-    }
-    .active-section {
-      position: absolute;
-      left: 2.85em;
+      .active-section {
+        position: sticky;
+        border-bottom: none;
+        margin-left: -1.8em;
+      }
     }
     margin-left: 3.5em;
     &:not(:hover) {
@@ -85,4 +87,8 @@ export const AddToMenu = styled.div`
       color: ${(props) => props.theme.css.iconPrimaryColor};
     }
   }
+  .section-list {
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
 `;