Merge pull request 'UI: search bar improvement. Bug: ESC doesnt work' (#223) from Qubasa-Qubasa-main into main

docs/quickstart.md

@@ -28,34 +28,85 @@ If `.clan-flake` is missing, `clan-cli` will instead search for other indicators
 
 # Migrating Existing NixOS Configuration Flake
 
-## Integrating with Existing NixOS Machines
+Absolutely, let's break down the migration step by step, explaining each action in detail:
 
-If you already manage NixOS machines using a flake, you can integrate them with the Clan Core as shown in the example below:
+#### Before You Begin
 
-```nix
-{
-  description = "My custom NixOS flake";
+1. **Backup Your Current Configuration**: Always start by making a backup of your current NixOS configuration to ensure you can revert if needed.
 
-  inputs.clan-core.url = "git+https://git.clan.lol/clan/clan-core";
+   ```shell
+   cp -r /etc/nixos ~/nixos-backup
+   ```
 
-  outputs = { clan-core, ... }: {
-    nixosConfigurations = clan-core.lib.buildClan {
-      directory = ./.;
-      machines = {
-        turingmachine = {
-          nixpkgs.hostPlatform = "x86_64-linux";
-          imports = [
-            ./configuration.nix
-          ];
-        };
-      };
-    };
-  };
-}
-```
+2. **Update Flake Inputs**: The patch adds a new input named `clan-core` to your `flake.nix`. This input points to a Git repository for Clan Core. Here's the addition:
 
-In this configuration:
+   ```nix
+   inputs.clan-core = {
+     url = "git+https://git.clan.lol/clan/clan-core";
+     inputs.nixpkgs.follows = "nixpkgs";
+   };
+   ```
 
-- `description`: Provides a brief description of the flake.
-- `inputs.clan-core.url`: Specifies the Clan Core template's repository URL.
-- `nixosConfigurations`: Defines NixOS configurations, using Clan Core's `buildClan` function to manage the machines.
+   - `url`: Specifies the Git repository URL for Clan Core.
+   - `inputs.nixpkgs.follows`: Tells Nix to use the same `nixpkgs` input as your main input (in this case, it follows `nixpkgs`).
+
+3. **Update Outputs**: Then modify the `outputs` section of your `flake.nix` to adapt to Clan Core's new provisioning method. The key changes are as follows:
+
+   Add `clan-core` to the output
+
+   ```diff
+   -  outputs = { self, nixpkgs,  }:
+   +  outputs = { self, nixpkgs, clan-core }:
+   ```
+
+   Previous configuration:
+
+   ```nix
+   nixosConfigurations.example-desktop = nixpkgs.lib.nixosSystem {
+       system = "x86_64-linux";
+       modules = [
+           ./configuration.nix
+       ];
+       [...]
+   };
+   ```
+
+   After change:
+
+   ```nix
+   nixosConfigurations = clan-core.lib.buildClan {
+       directory = ./.;
+       machines = {
+           example-desktop = {
+               nixpkgs.hostPlatform = "x86_64-linux";
+               imports = [
+                   ./configuration.nix
+               ];
+           };
+       };
+   };
+   ```
+
+   - `nixosConfigurations`: Defines NixOS configurations, using Clan Core’s `buildClan` function to manage the machines.
+   - Inside `machines`, a new machine configuration is defined (in this case, `example-desktop`).
+   - Inside `example-desktop` which is the target machine hostname, `nixpkgs.hostPlatform` specifies the host platform as `x86_64-linux`.
+
+4. **Rebuild and Switch**: Rebuild your NixOS configuration using the updated flake:
+
+   ```shell
+   sudo nixos-rebuild switch --flake .
+   ```
+
+   - This command rebuilds and switches to the new configuration. Make sure to include the `--flake .` argument to use the current directory as the flake source.
+
+5. **Test Configuration**: Before rebooting, verify that your new configuration builds without errors or warnings.
+
+6. **Reboot**: If everything is fine, you can reboot your system to apply the changes:
+
+   ```shell
+   sudo reboot
+   ```
+
+7. **Verify**: After the reboot, confirm that your system is running with the new configuration, and all services and applications are functioning as expected.
+
+By following these steps, you've successfully migrated your NixOS Flake configuration to include the `clan-core` input and adapted the `outputs` section to work with Clan Core's new machine provisioning method.

pkgs/ui/src/components/table/searchBar.tsx

@@ -33,12 +33,13 @@ export function SearchBar(props: SearchBarProps) {
   const debouncedSearch = useDebounce(search, 250);
 
   // Define a function to handle the Esc key press
-  const handleEsc = (event: any) => {
+  function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {
     if (event.key === "Escape") {
+      console.log("Escape key pressed");
       setSearch("");
       setFilteredList(tableData);
     }
-  };
+  }
 
   useEffect(() => {
     if (debouncedSearch) {
@@ -47,7 +48,7 @@ export function SearchBar(props: SearchBarProps) {
       });
       setFilteredList(filtered);
     }
-  }, [debouncedSearch]);
+  }, [debouncedSearch, tableData, setFilteredList]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value === "") {
@@ -65,6 +66,7 @@ export function SearchBar(props: SearchBarProps) {
     <Autocomplete
       freeSolo
       options={suggestions}
+      onKeyDown={handleEsc}
       onChange={(event, value) => {
         // do something with the selected value
         if (value === null) {
@@ -81,18 +83,17 @@ export function SearchBar(props: SearchBarProps) {
           label="Search"
           variant="outlined"
           value={search}
-          onKeyDown={handleEsc}
           onChange={handleInputChange}
           autoComplete="nickname"
           InputProps={{
             ...params.InputProps,
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton>
-                  <SearchIcon />
-                </IconButton>
-              </InputAdornment>
-            ),
+            // endAdornment: (
+            //   <InputAdornment position="end">
+            //     <IconButton>
+            //       <SearchIcon />
+            //     </IconButton>
+            //   </InputAdornment>
+            // ),
           }}
         >
           {/* {suggestions.map((item, index) => (