From b0faaa829aa8266b634c751212f4566ce1d791d4 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 7 Dec 2020 14:42:08 +0100
Subject: [PATCH] added missing remove all kabab item

---
 src/clients/scopes/ClientScopes.tsx | 62 +++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/clients/scopes/ClientScopes.tsx b/src/clients/scopes/ClientScopes.tsx
index eb32bc251a..d01176a7b0 100644
--- a/src/clients/scopes/ClientScopes.tsx
+++ b/src/clients/scopes/ClientScopes.tsx
@@ -14,10 +14,10 @@ import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
+  KebabToggle,
   Select,
   Spinner,
-  Split,
-  SplitItem,
+  ToolbarItem,
 } from "@patternfly/react-core";
 import { FilterIcon } from "@patternfly/react-icons";
 import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation";
@@ -128,6 +128,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
   const [searchType, setSearchType] = useState<SearchType>("client");
   const [addToggle, setAddToggle] = useState(false);
   const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [kebabOpen, setKebabOpen] = useState(false);
 
   const [rows, setRows] = useState<TableRow[]>();
   const [rest, setRest] = useState<ClientScopeRepresentation[]>();
@@ -285,13 +286,13 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
           inputGroupPlaceholder={t("searchByName")}
           inputGroupOnChange={filterData}
           toolbarItem={
-            <Split hasGutter>
-              <SplitItem>
+            <>
+              <ToolbarItem>
                 <Button onClick={() => setAddDialogOpen(true)}>
                   {t("addClientScope")}
                 </Button>
-              </SplitItem>
-              <SplitItem>
+              </ToolbarItem>
+              <ToolbarItem>
                 <Select
                   id="add-dropdown"
                   key="add-dropdown"
@@ -328,8 +329,53 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                 >
                   {clientScopeTypesSelectOptions(t)}
                 </Select>
-              </SplitItem>
-            </Split>
+              </ToolbarItem>
+              <ToolbarItem>
+                <Dropdown
+                  onSelect={() => {}}
+                  toggle={
+                    <KebabToggle onToggle={() => setKebabOpen(!kebabOpen)} />
+                  }
+                  isOpen={kebabOpen}
+                  isPlain
+                  dropdownItems={[
+                    <DropdownItem
+                      key="deleteAll"
+                      onClick={async () => {
+                        try {
+                          await Promise.all(
+                            rows.map(async (row) => {
+                              if (row.selected) {
+                                await removeScope(
+                                  adminClient,
+                                  clientId,
+                                  row.clientScope,
+                                  row.type
+                                );
+                              }
+                            })
+                          );
+
+                          setKebabOpen(false);
+                          addAlert(
+                            t("clientScopeRemoveSuccess"),
+                            AlertVariant.success
+                          );
+                          loader();
+                        } catch (error) {
+                          addAlert(
+                            t("clientScopeRemoveError", { error }),
+                            AlertVariant.danger
+                          );
+                        }
+                      }}
+                    >
+                      {t("common:remove")}
+                    </DropdownItem>,
+                  ]}
+                />
+              </ToolbarItem>
+            </>
           }
         >
           <Table