Merge pull request #91 from skbkontur/gurikov/EDITSKS-4386_change-all…

…-buttons-to-checkboxes added checkBox in place of Button
skbkontur · Sep 25, 2024 · a49b9ca · a49b9ca
2 parents 8b808bf + 5246ea5
commit a49b9ca
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
@@ -55,7 +55,7 @@ jobs:
       - name: Check front code
         run: yarn --cwd db-viewer-ui lint
 
-      - name: Build docker-compose environment
+      - name: Build docker compose environment
         run: docker compose up -d --wait
 
       - name: Run db-viewer api
@@ -69,7 +69,7 @@ jobs:
 
       - name: Stop docker containers
         if: always()
-        run: docker rm -f db-viewer-api && docker-compose down
+        run: docker rm -f db-viewer-api && docker compose down
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v3

diff --git a/db-viewer-ui/src/Components/FieldSelector/FieldSelector.tsx b/db-viewer-ui/src/Components/FieldSelector/FieldSelector.tsx
@@ -21,7 +21,7 @@ interface FieldSelectorProps {
     showSelectAllButton?: boolean;
 }
 
-function filterFieldDefintionsByText(fieldDefinitions: FieldDefinition[], text: string): FieldDefinition[] {
+function filterFieldDefinitionsByText(fieldDefinitions: FieldDefinition[], text: string): FieldDefinition[] {
     if (!text) {
         return fieldDefinitions;
     }
@@ -80,27 +80,29 @@ export function FieldSelector({
         );
     };
 
-    const fieldDefinitionsFiltered = filterFieldDefintionsByText(fieldDefinitions, searchText);
+    const fieldDefinitionsFiltered = filterFieldDefinitionsByText(fieldDefinitions, searchText);
 
     const nothingToDisplay = <span className={jsStyles.nothingToDisplay(theme)}>Ничего не найдено</span>;
     const allFieldsSelected = isAllFieldSelected(fieldDefinitionsFiltered);
     return (
         <div className={jsStyles.root()}>
-            <Input
-                data-tid="FilterInput"
-                leftIcon={<SearchLoupeIcon16Regular />}
-                value={searchText}
-                width={300}
-                onValueChange={setSearchText}
-            />
-            {showSelectAllButton && (
-                <div
-                    data-tid={"TypesSelectAll"}
-                    onClick={() => handleSelectAll(fieldDefinitionsFiltered)}
-                    className={jsStyles.selectAll(theme)}>
-                    {allFieldsSelected ? "Снять выбор с найденных" : "Выбрать все найденные"}
-                </div>
-            )}
+            <RowStack gap={5} verticalAlign="baseline">
+                <Input
+                    data-tid="FilterInput"
+                    leftIcon={<SearchLoupeIcon16Regular />}
+                    value={searchText}
+                    width={300}
+                    onValueChange={setSearchText}
+                />
+                {showSelectAllButton && (
+                    <Checkbox
+                        data-tid="TypesSelectAll"
+                        onValueChange={() => handleSelectAll(fieldDefinitionsFiltered)}
+                        checked={allFieldsSelected}>
+                        Все найденные
+                    </Checkbox>
+                )}
+            </RowStack>
             <RowStack data-tid="ColumnCheckboxes" className={jsStyles.fieldList()} block gap={4}>
                 {fieldDefinitionsFiltered.length === 0 ? <Fit>{nothingToDisplay}</Fit> : null}
 

diff --git a/db-viewer-ui/stories/Commons/FieldSelector.stories.tsx b/db-viewer-ui/stories/Commons/FieldSelector.stories.tsx
@@ -19,6 +19,19 @@ export const Default = (): React.ReactElement => (
     />
 );
 
+export const WithSelectAll = (): React.ReactElement => (
+    <FieldSelector
+        hiddenFields={[]}
+        fieldDefinitions={[
+            { name: "name1", caption: "Name 1" },
+            { name: "name2", caption: "Name 2" },
+        ]}
+        onShowField={action("onShowField")}
+        onHideField={action("onHideField")}
+        showSelectAllButton
+    />
+);
+
 export const LongStrings = (): React.ReactElement => (
     <FieldSelector
         hiddenFields={[]}

diff --git a/version.json b/version.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.8",
+  "version": "1.8-prerelease.4",
   "assemblyVersion": {
     "precision": "build"
   },