chore(greenhouse): make admin area toolbar consistent across tabs

.changeset/full-zoos-think.md

@@ -0,0 +1,8 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Fixed `DataGridToolbar` inconsistencies in Admin Area across all tabs:
+- "Clear all" button placed near selected filter pills
+- Text "(X ready, X not ready)" and "Last updated: ..." gray colour
+- `DataGridToolbar` component always used to ensure alignment

apps/greenhouse/src/components/admin/Clusters/index.tsx

@@ -6,7 +6,7 @@
 import React, { useState } from "react"
 import { useRouteContext, useSearch } from "@tanstack/react-router"
 import { useIsFetching, useQuery, useQueryClient } from "@tanstack/react-query"
-import { Container, ContentHeading, Button, Stack } from "@cloudoperators/juno-ui-components"
+import { Container, ContentHeading, Button, Stack, DataGridToolbar } from "@cloudoperators/juno-ui-components"
 
 import { ClustersDataGrid } from "./ClustersGrid"
 import { ClustersFilters } from "./ClustersFilters"
@@ -43,23 +43,25 @@ export const Clusters = () => {
       </Container>
       <Container px={false} py>
         <ClustersFilters />
-        <Stack alignment="center" className="bg-theme-background-lvl-1 py-1.5 px-4 my-px text-theme-light">
-          <div>
-            <span className="text-theme-default pr-2">{`${total} clusters`}</span>
-            <span>{`(${ready} ready, ${notReady} not ready)`}</span>
-          </div>
-          <Stack alignment="center" className="ml-auto">
-            {lastUpdatedAt && `Last update: ${new Date(lastUpdatedAt).toLocaleString()}`}
-            <Button
-              size="small"
-              label={isFetching > 0 ? "Loading..." : "Refresh"}
-              className="ml-4 min-w-[90px]"
-              onClick={handleRefresh}
-              variant="subdued"
-              disabled={isFetching > 0}
-            />
+        <DataGridToolbar className="text-theme-light">
+          <Stack>
+            <div>
+              <span className="text-theme-default pr-2">{`${total} clusters`}</span>
+              <span>{`(${ready} ready, ${notReady} not ready)`}</span>
+            </div>
+            <Stack alignment="center" className="ml-auto">
+              {lastUpdatedAt && `Last update: ${new Date(lastUpdatedAt).toLocaleString()}`}
+              <Button
+                size="small"
+                label={isFetching > 0 ? "Loading..." : "Refresh"}
+                className="ml-4 min-w-[90px]"
+                onClick={handleRefresh}
+                variant="subdued"
+                disabled={isFetching > 0}
+              />
+            </Stack>
           </Stack>
-        </Stack>
+        </DataGridToolbar>
         <ClustersDataGrid />
       </Container>
     </>

apps/greenhouse/src/components/admin/ExposedServices/index.tsx

@@ -46,7 +46,7 @@ export const ExposedServices = () => {
       </Container>
       <Container px={false} py>
         <ExposedServicesFilters />
-        <DataGridToolbar>
+        <DataGridToolbar className="text-theme-light">
           <Stack>
             <div>
               <span className="text-theme-default pr-2">{`${total} exposed services`}</span>

apps/greenhouse/src/components/admin/PluginPresets/PluginPresetsFilters.tsx

@@ -8,7 +8,7 @@ import { useLoaderData, useNavigate, useRouteContext } from "@tanstack/react-rou
 import { FilterSettings, SelectedFilter } from "../common/types"
 import { getFiltersForUrl } from "../utils"
 import { SELECTED_FILTER_PREFIX } from "../constants"
-import { Stack, InputGroup, Button, SearchInput } from "@cloudoperators/juno-ui-components/index"
+import { Stack, Button, SearchInput } from "@cloudoperators/juno-ui-components/index"
 import { SelectedFilters } from "../common/SelectedFilters"
 import { useQuery } from "@tanstack/react-query"
 import {
@@ -68,38 +68,25 @@ export const PluginPresetsFilters = () => {
   return (
     <Stack direction="vertical" gap="4" className="bg-theme-background-lvl-1 py-2 px-4 mb-px">
       <Stack alignment="start" gap="4">
-        <InputGroup>
-          <FilterSelect
-            filters={filters}
-            isLoading={isLoading}
-            error={error}
-            onChange={(selectedFilter: SelectedFilter) => {
-              const filterExists = filterSettings.selectedFilters?.some(
-                (filter) => filter.id === selectedFilter.id && filter.value === selectedFilter.value
-              )
-              //only add the filter if it does not already exist
-              if (!filterExists) {
-                updateFilters({
-                  ...filterSettings,
-                  selectedFilters: [...(filterSettings.selectedFilters || []), selectedFilter],
-                })
-              }
-            }}
-          />
-        </InputGroup>
-        <Button
-          label="Clear all"
-          className="ml-4"
-          onClick={() =>
-            updateFilters({
-              ...filterSettings,
-              selectedFilters: [],
-            })
-          }
-          variant="subdued"
+        <FilterSelect
+          filters={filters}
+          isLoading={isLoading}
+          error={error}
+          onChange={(selectedFilter: SelectedFilter) => {
+            const filterExists = filterSettings.selectedFilters?.some(
+              (filter) => filter.id === selectedFilter.id && filter.value === selectedFilter.value
+            )
+            //only add the filter if it does not already exist
+            if (!filterExists) {
+              updateFilters({
+                ...filterSettings,
+                selectedFilters: [...(filterSettings.selectedFilters || []), selectedFilter],
+              })
+            }
+          }}
         />
         <SearchInput
-          placeholder={`search term for PluginPresets name`}
+          placeholder={`search term for PluginPreset name`}
           className="w-96 ml-auto"
           data-testid="searchbar"
           value={filterSettings.searchTerm}
@@ -118,7 +105,21 @@ export const PluginPresetsFilters = () => {
         />
       </Stack>
       {filterSettings.selectedFilters && filterSettings.selectedFilters.length > 0 && (
-        <SelectedFilters selectedFilters={filterSettings.selectedFilters} onDelete={handleFilterDelete} />
+        <Stack>
+          <SelectedFilters selectedFilters={filterSettings.selectedFilters} onDelete={handleFilterDelete} />
+          <Button
+            size="xs"
+            label="Clear all"
+            className="ml-4"
+            onClick={() =>
+              updateFilters({
+                ...filterSettings,
+                selectedFilters: [],
+              })
+            }
+            variant="subdued"
+          />
+        </Stack>
       )}
     </Stack>
   )

apps/greenhouse/src/components/admin/PluginPresets/index.tsx

@@ -42,7 +42,7 @@ export const PluginPresets = () => {
       </Container>
       <Container px={false} py>
         <PluginPresetsFilters />
-        <DataGridToolbar>
+        <DataGridToolbar className="text-theme-light">
           <Stack>
             <div>
               <span className="text-theme-default pr-2">{`${total} PluginPresets`}</span>