From 299993d30b3efbe217f10269fc99f01d127c652d Mon Sep 17 00:00:00 2001
From: mfrances17 <39063664+mfrances17@users.noreply.github.com>
Date: Fri, 27 Aug 2021 15:18:23 -0400
Subject: [PATCH] Fix labels for user vs admin clear events (#1079)

* fix labels for user vs admin clear events

* fix lint issue unrelated to fixed issue
---
 src/events/EventsSection.tsx                  | 400 +++++++++---------
 .../event-config/EventConfigForm.tsx          |   8 +-
 src/realm-settings/messages.ts                |   5 +-
 3 files changed, 207 insertions(+), 206 deletions(-)

diff --git a/src/events/EventsSection.tsx b/src/events/EventsSection.tsx
index 1b5531df4b..f0d97d1d87 100644
--- a/src/events/EventsSection.tsx
+++ b/src/events/EventsSection.tsx
@@ -184,211 +184,209 @@ export const EventsSection = () => {
 
   const userEventSearchFormDisplay = () => {
     return (
-      <>
-        <Flex
-          direction={{ default: "column" }}
-          spaceItems={{ default: "spaceItemsNone" }}
-        >
-          <FlexItem>
-            <Dropdown
-              id="user-events-search-select"
-              data-testid="UserEventsSearchSelector"
-              className="pf-u-ml-md"
-              toggle={
-                <DropdownToggle
-                  data-testid="userEventsSearchSelectorToggle"
-                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                  className="keycloak__events_search_selector_dropdown__toggle"
-                >
-                  {t("searchForUserEvent")}
-                </DropdownToggle>
-              }
-              isOpen={searchDropdownOpen}
-            >
-              <Form
-                isHorizontal
-                className="keycloak__user_events_search__form"
-                data-testid="searchForm"
+      <Flex
+        direction={{ default: "column" }}
+        spaceItems={{ default: "spaceItemsNone" }}
+      >
+        <FlexItem>
+          <Dropdown
+            id="user-events-search-select"
+            data-testid="UserEventsSearchSelector"
+            className="pf-u-ml-md"
+            toggle={
+              <DropdownToggle
+                data-testid="userEventsSearchSelectorToggle"
+                onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
+                className="keycloak__events_search_selector_dropdown__toggle"
               >
-                <FormGroup
-                  label={t("userId")}
-                  fieldId="kc-userId"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-userId"
-                    name="user"
-                    data-testid="userId-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("eventType")}
-                  fieldId="kc-eventType"
-                  className="keycloak__events_search__form_label"
-                >
-                  <Controller
-                    name="type"
-                    control={control}
-                    render={({
-                      onChange,
-                      value,
-                    }: {
-                      onChange: (newValue: EventType[]) => void;
-                      value: EventType[];
-                    }) => (
-                      <Select
-                        className="keycloak__events_search__event_type_select"
-                        name="eventType"
-                        data-testid="event-type-searchField"
-                        chipGroupProps={{
-                          numChips: 1,
-                          expandedText: "Hide",
-                          collapsedText: "Show ${remaining}",
-                        }}
-                        variant={SelectVariant.typeaheadMulti}
-                        typeAheadAriaLabel="Select"
-                        onToggle={(isOpen) => setSelectOpen(isOpen)}
-                        selections={value}
-                        onSelect={(_, selectedValue) => {
-                          const option = selectedValue.toString() as EventType;
-                          const changedValue = value.includes(option)
-                            ? value.filter((item) => item !== option)
-                            : [...value, option];
-
-                          onChange(changedValue);
-                        }}
-                        onClear={(event) => {
-                          event.stopPropagation();
-                          onChange([]);
-                        }}
-                        isOpen={selectOpen}
-                        aria-labelledby={"eventType"}
-                        chipGroupComponent={
-                          <ChipGroup>
-                            {value.map((chip) => (
-                              <Chip
-                                key={chip}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  onChange(value.filter((val) => val !== chip));
-                                }}
-                              >
-                                {chip}
-                              </Chip>
-                            ))}
-                          </ChipGroup>
-                        }
-                      >
-                        {events?.enabledEventTypes?.map((option) => (
-                          <SelectOption key={option} value={option} />
-                        ))}
-                      </Select>
-                    )}
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("client")}
-                  fieldId="kc-client"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-client"
-                    name="client"
-                    data-testid="client-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateFrom")}
-                  fieldId="kc-dateFrom"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateFrom"
-                    name="dateFrom"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateFrom-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateTo")}
-                  fieldId="kc-dateTo"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateTo"
-                    name="dateTo"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateTo-searchField"
-                  />
-                </FormGroup>
-                <ActionGroup>
-                  <Button
-                    className="keycloak__user_events_search__form_btn"
-                    variant={"primary"}
-                    onClick={submitSearch}
-                    data-testid="search-events-btn"
-                    isDisabled={!isDirty}
-                  >
-                    {t("searchUserEventsBtn")}
-                  </Button>
-                </ActionGroup>
-              </Form>
-            </Dropdown>
-            <Button
-              className="pf-u-ml-md"
-              onClick={refresh}
-              data-testid="refresh-btn"
+                {t("searchForUserEvent")}
+              </DropdownToggle>
+            }
+            isOpen={searchDropdownOpen}
+          >
+            <Form
+              isHorizontal
+              className="keycloak__user_events_search__form"
+              data-testid="searchForm"
             >
-              {t("refresh")}
-            </Button>
-          </FlexItem>
-          <FlexItem>
-            {Object.entries(activeFilters).length > 0 && (
-              <div className="keycloak__searchChips pf-u-ml-md">
-                {Object.entries(activeFilters).map((filter) => {
-                  const [key, value] = filter as [
-                    keyof UserEventSearchForm,
-                    string | EventType[]
-                  ];
+              <FormGroup
+                label={t("userId")}
+                fieldId="kc-userId"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-userId"
+                  name="user"
+                  data-testid="userId-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("eventType")}
+                fieldId="kc-eventType"
+                className="keycloak__events_search__form_label"
+              >
+                <Controller
+                  name="type"
+                  control={control}
+                  render={({
+                    onChange,
+                    value,
+                  }: {
+                    onChange: (newValue: EventType[]) => void;
+                    value: EventType[];
+                  }) => (
+                    <Select
+                      className="keycloak__events_search__event_type_select"
+                      name="eventType"
+                      data-testid="event-type-searchField"
+                      chipGroupProps={{
+                        numChips: 1,
+                        expandedText: "Hide",
+                        collapsedText: "Show ${remaining}",
+                      }}
+                      variant={SelectVariant.typeaheadMulti}
+                      typeAheadAriaLabel="Select"
+                      onToggle={(isOpen) => setSelectOpen(isOpen)}
+                      selections={value}
+                      onSelect={(_, selectedValue) => {
+                        const option = selectedValue.toString() as EventType;
+                        const changedValue = value.includes(option)
+                          ? value.filter((item) => item !== option)
+                          : [...value, option];
 
-                  return (
-                    <ChipGroup
-                      className="pf-u-mt-md pf-u-mr-md"
-                      key={key}
-                      categoryName={filterLabels[key]}
-                      isClosable
-                      onClick={() => removeFilter(key)}
+                        onChange(changedValue);
+                      }}
+                      onClear={(event) => {
+                        event.stopPropagation();
+                        onChange([]);
+                      }}
+                      isOpen={selectOpen}
+                      aria-labelledby={"eventType"}
+                      chipGroupComponent={
+                        <ChipGroup>
+                          {value.map((chip) => (
+                            <Chip
+                              key={chip}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                onChange(value.filter((val) => val !== chip));
+                              }}
+                            >
+                              {chip}
+                            </Chip>
+                          ))}
+                        </ChipGroup>
+                      }
                     >
-                      {typeof value === "string" ? (
-                        <Chip isReadOnly>{value}</Chip>
-                      ) : (
-                        value.map((entry) => (
-                          <Chip
-                            key={entry}
-                            onClick={() => removeFilterValue(key, entry)}
-                          >
-                            {entry}
-                          </Chip>
-                        ))
-                      )}
-                    </ChipGroup>
-                  );
-                })}
-              </div>
-            )}
-          </FlexItem>
-        </Flex>
-      </>
+                      {events?.enabledEventTypes?.map((option) => (
+                        <SelectOption key={option} value={option} />
+                      ))}
+                    </Select>
+                  )}
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("client")}
+                fieldId="kc-client"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-client"
+                  name="client"
+                  data-testid="client-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateFrom")}
+                fieldId="kc-dateFrom"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateFrom"
+                  name="dateFrom"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateFrom-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateTo")}
+                fieldId="kc-dateTo"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateTo"
+                  name="dateTo"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateTo-searchField"
+                />
+              </FormGroup>
+              <ActionGroup>
+                <Button
+                  className="keycloak__user_events_search__form_btn"
+                  variant={"primary"}
+                  onClick={submitSearch}
+                  data-testid="search-events-btn"
+                  isDisabled={!isDirty}
+                >
+                  {t("searchUserEventsBtn")}
+                </Button>
+              </ActionGroup>
+            </Form>
+          </Dropdown>
+          <Button
+            className="pf-u-ml-md"
+            onClick={refresh}
+            data-testid="refresh-btn"
+          >
+            {t("refresh")}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          {Object.entries(activeFilters).length > 0 && (
+            <div className="keycloak__searchChips pf-u-ml-md">
+              {Object.entries(activeFilters).map((filter) => {
+                const [key, value] = filter as [
+                  keyof UserEventSearchForm,
+                  string | EventType[]
+                ];
+
+                return (
+                  <ChipGroup
+                    className="pf-u-mt-md pf-u-mr-md"
+                    key={key}
+                    categoryName={filterLabels[key]}
+                    isClosable
+                    onClick={() => removeFilter(key)}
+                  >
+                    {typeof value === "string" ? (
+                      <Chip isReadOnly>{value}</Chip>
+                    ) : (
+                      value.map((entry) => (
+                        <Chip
+                          key={entry}
+                          onClick={() => removeFilterValue(key, entry)}
+                        >
+                          {entry}
+                        </Chip>
+                      ))
+                    )}
+                  </ChipGroup>
+                );
+              })}
+            </div>
+          )}
+        </FlexItem>
+      </Flex>
     );
   };
 
diff --git a/src/realm-settings/event-config/EventConfigForm.tsx b/src/realm-settings/event-config/EventConfigForm.tsx
index d9883b0999..d9a255fecb 100644
--- a/src/realm-settings/event-config/EventConfigForm.tsx
+++ b/src/realm-settings/event-config/EventConfigForm.tsx
@@ -161,12 +161,14 @@ export const EventConfigForm = ({
       </ActionGroup>
       <Divider />
       <FormGroup
-        label={t("clearEvents")}
+        label={type === "user" ? t("clearUserEvents") : t("clearAdminEvents")}
         fieldId={`clear-${type}-events`}
         labelIcon={
           <HelpItem
             helpText={`realm-settings-help:${type}-clearEvents`}
-            forLabel={t("clearEvents")}
+            forLabel={
+              type === "user" ? t("clearUserEvents") : t("clearAdminEvents")
+            }
             forID={`clear-${type}-events`}
           />
         }
@@ -177,7 +179,7 @@ export const EventConfigForm = ({
           data-testid={`clear-${type}-events`}
           onClick={() => clear()}
         >
-          {t("clearEvents")}
+          {type === "user" ? t("clearUserEvents") : t("clearAdminEvents")}
         </Button>
       </FormGroup>
     </>
diff --git a/src/realm-settings/messages.ts b/src/realm-settings/messages.ts
index 180a77b460..554f82a20c 100644
--- a/src/realm-settings/messages.ts
+++ b/src/realm-settings/messages.ts
@@ -30,11 +30,12 @@ export default {
     events: "Events",
     userEventsConfig: "User events configuration",
     userEventsSettings: "User events settings",
-    adminEventsConfig: "Admin events config",
+    adminEventsConfig: "Admin events configuration",
     adminEventsSettings: "Admin events settings",
     saveEvents: "Save events",
     expiration: "Expiration",
-    clearEvents: "Clear user events",
+    clearUserEvents: "Clear user events",
+    clearAdminEvents: "Clear admin events",
     includeRepresentation: "Include representation",
     email: "Email",
     template: "Template",