Searchable dropdown (#2312)

* Searchable dropdown

* format fix

* Refactor SearchableDropdown with Fluent UI components, extract styles, and add tests (#2329)

* Initial plan

* Refactor SearchableDropdown with Fluent UI components and add tests

- Replace native HTML elements with Fluent UI components (Stack, DefaultButton, Text)
- Extract inline styles to SearchableDropdown.styles.ts
- Add comprehensive unit tests (14 test cases)
- Verify behavior consistency with AccountSwitcher tests

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* Optimize SearchableDropdown with useMemo for filteredItems

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* Fix text alignment to match original UI - ensure left alignment

- Add flexContainer.justifyContent: "flex-start" to button styles
- Add textAlign: "left" to button label, item styles, and empty message
- Restore original left-aligned appearance for placeholder and selected text

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* Fix TypeScript implicit type errors in SearchableDropdown tests (#2355)

* Initial plan

* Fix TypeScript compilation errors in SearchableDropdown.test.tsx

Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>

* ui fixes minor

* format fix

* added search icon and updated the text

* removed callbacks

* added mocked playwright data

* fixed formatting

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
Co-authored-by: sakshigupta12feb <sakshigupta12feb1@gmail.com>

webpack.config.js

@@ -117,6 +117,9 @@ module.exports = function (_env = {}, argv = {}) {
     selfServe: "./src/SelfServe/SelfServe.tsx",
     connectToGitHub: "./src/GitHub/GitHubConnector.ts",
     ...(mode !== "production" && { testExplorer: "./test/testExplorer/TestExplorer.ts" }),
+    ...(mode !== "production" && {
+      searchableDropdownFixture: "./test/component-fixtures/searchableDropdown/SearchableDropdownFixture.tsx",
+    }),
   };
 
   const htmlWebpackPlugins = [
@@ -172,6 +175,11 @@ module.exports = function (_env = {}, argv = {}) {
             template: "test/testExplorer/testExplorer.html",
             chunks: ["testExplorer"],
           }),
+          new HtmlWebpackPlugin({
+            filename: "searchableDropdownFixture.html",
+            template: "test/component-fixtures/searchableDropdown/searchableDropdown.html",
+            chunks: ["searchableDropdownFixture"],
+          }),
         ]
       : []),
   ];