[SLOs] Update toggle view options style (#176133)

## Summary
Update according to design !!

<img width="1727" alt="image"
src="866b1b7f-fefc-4e4e-b021-ab5f71741af8">

x-pack/plugins/observability/public/locators/slo_list.test.ts

@@ -14,7 +14,7 @@ describe('SloListLocator', () => {
     const location = await locator.getLocation({});
     expect(location.app).toEqual('observability');
     expect(location.path).toMatchInlineSnapshot(
-      `"/slos?search=(compact:!t,filters:!(),kqlQuery:'',lastRefresh:0,page:0,perPage:25,sort:(by:status,direction:desc),view:cardView)"`
+      `"/slos?search=(filters:!(),kqlQuery:'',lastRefresh:0,page:0,perPage:25,sort:(by:status,direction:desc),view:cardView)"`
     );
   });
 
@@ -24,7 +24,7 @@ describe('SloListLocator', () => {
     });
     expect(location.app).toEqual('observability');
     expect(location.path).toMatchInlineSnapshot(
-      `"/slos?search=(compact:!t,filters:!(),kqlQuery:'slo.name:%20%22Service%20Availability%22%20and%20slo.indicator.type%20:%20%22sli.kql.custom%22',lastRefresh:0,page:0,perPage:25,sort:(by:status,direction:desc),view:cardView)"`
+      `"/slos?search=(filters:!(),kqlQuery:'slo.name:%20%22Service%20Availability%22%20and%20slo.indicator.type%20:%20%22sli.kql.custom%22',lastRefresh:0,page:0,perPage:25,sort:(by:status,direction:desc),view:cardView)"`
     );
   });
 });

x-pack/plugins/observability/public/pages/slos/components/card_view/slos_card_view.tsx

@@ -24,47 +24,37 @@ export interface Props {
   sloList: SLOWithSummaryResponse[];
   loading: boolean;
   error: boolean;
-  cardsPerRow?: string;
   activeAlertsBySlo: ActiveAlerts;
   rulesBySlo?: UseFetchRulesForSloResponse['data'];
 }
 
-const useColumns = (cardsPerRow: string | undefined) => {
+const useColumns = () => {
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
   const isMedium = useIsWithinBreakpoints(['m']);
-  const isLarge = useIsWithinBreakpoints(['l']);
-
-  const columns = (Number(cardsPerRow) as EuiFlexGridProps['columns']) ?? 3;
+  const isLarge = useIsWithinBreakpoints(['l', 'xl']);
 
   switch (true) {
     case isMobile:
       return 1;
     case isMedium:
-      return columns > 2 ? 2 : columns;
+      return 3;
     case isLarge:
-      return columns > 3 ? 3 : columns;
+      return 4;
     default:
-      return columns;
+      return 3;
   }
 };
 
-export function SloListCardView({
-  sloList,
-  loading,
-  error,
-  cardsPerRow,
-  rulesBySlo,
-  activeAlertsBySlo,
-}: Props) {
+export function SloListCardView({ sloList, loading, error, rulesBySlo, activeAlertsBySlo }: Props) {
   const { isLoading: historicalSummaryLoading, data: historicalSummaries = [] } =
     useFetchHistoricalSummary({
       list: sloList.map((slo) => ({ sloId: slo.id, instanceId: slo.instanceId ?? ALL_VALUE })),
     });
 
-  const columns = useColumns(cardsPerRow);
+  const columns = useColumns();
 
   if (loading && sloList.length === 0) {
-    return <LoadingSloGrid gridSize={Number(cardsPerRow)} />;
+    return <LoadingSloGrid gridSize={columns} />;
   }
 
   return (
@@ -87,7 +77,7 @@ export function SloListCardView({
                 )?.data
               }
               historicalSummaryLoading={historicalSummaryLoading}
-              cardsPerRow={Number(cardsPerRow)}
+              cardsPerRow={Number(columns)}
             />
           </EuiFlexItem>
         ))}

x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx

@@ -15,16 +15,7 @@ import { ToggleSLOView } from './toggle_slo_view';
 
 export function SloList() {
   const { state, store: storeState } = useUrlSearchState();
-  const {
-    view,
-    page,
-    perPage,
-    kqlQuery,
-    filters,
-    compact: isCompact,
-    tagsFilter,
-    statusFilter,
-  } = state;
+  const { view, page, perPage, kqlQuery, filters, tagsFilter, statusFilter } = state;
 
   const {
     isLoading,
@@ -61,8 +52,6 @@ export function SloList() {
           sloList={sloList}
           sloView={view}
           onChangeView={(newView) => onStateChange({ view: newView })}
-          onToggleCompactView={() => onStateChange({ compact: !isCompact })}
-          isCompact={isCompact}
           loading={isLoading || isCreatingSlo || isCloningSlo || isUpdatingSlo || isDeletingSlo}
           onStateChange={onStateChange}
           initialState={state}
@@ -72,7 +61,6 @@ export function SloList() {
         sloList={results}
         loading={isLoading || isRefetching}
         error={isError}
-        isCompact={isCompact}
         sloView={view}
       />
 

x-pack/plugins/observability/public/pages/slos/components/slo_view_settings.tsx

@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSwitch } from '@elastic/eui';
-
-export const SLO_LIST_IS_COMPACT = 'slo-list-is-compact';
-
-export function SLOViewSettings({
-  toggleCompactView,
-  isCompact,
-}: {
-  toggleCompactView: () => void;
-  isCompact: boolean;
-}) {
-  return (
-    <EuiSwitch
-      label={
-        <FormattedMessage
-          id="xpack.observability.slo.listView.compactViewLabel"
-          defaultMessage="Compact view"
-        />
-      }
-      id="sloListCompactToggle"
-      checked={isCompact}
-      onChange={toggleCompactView}
-      compressed
-    />
-  );
-}

x-pack/plugins/observability/public/pages/slos/components/slos_view.tsx

@@ -19,11 +19,10 @@ export interface Props {
   sloList: SLOWithSummaryResponse[];
   loading: boolean;
   error: boolean;
-  isCompact: boolean;
   sloView: string;
 }
 
-export function SlosView({ isCompact, sloList, loading, error, sloView }: Props) {
+export function SlosView({ sloList, loading, error, sloView }: Props) {
   const sloIdsAndInstanceIds = sloList.map(
     (slo) => [slo.id, slo.instanceId ?? ALL_VALUE] as [string, string]
   );
@@ -46,7 +45,6 @@ export function SlosView({ isCompact, sloList, loading, error, sloView }: Props)
         sloList={sloList}
         loading={loading}
         error={error}
-        cardsPerRow={isCompact ? '4' : '3'}
         activeAlertsBySlo={activeAlertsBySlo}
         rulesBySlo={rulesBySlo}
       />
@@ -59,7 +57,7 @@ export function SlosView({ isCompact, sloList, loading, error, sloView }: Props)
         rulesBySlo={rulesBySlo}
         error={error}
         loading={loading}
-        isCompact={isCompact}
+        isCompact={sloView === 'compactView'}
       />
     </EuiFlexItem>
   );

x-pack/plugins/observability/public/pages/slos/components/toggle_slo_view.tsx

@@ -12,14 +12,11 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { FindSLOResponse } from '@kbn/slo-schema';
 import { SearchState } from '../hooks/use_url_search_state';
 import { SortBySelect } from './common/sort_by_select';
-import { SLOViewSettings } from './slo_view_settings';
 
-export type SLOView = 'cardView' | 'listView';
+export type SLOView = 'cardView' | 'listView' | 'compactView';
 
 interface Props {
-  onToggleCompactView: () => void;
   onChangeView: (view: SLOView) => void;
-  isCompact: boolean;
   sloView: SLOView;
   sloList?: FindSLOResponse;
   loading: boolean;
@@ -31,7 +28,7 @@ const toggleButtonsIcons = [
   {
     id: `cardView`,
     label: 'Card View',
-    iconType: 'visGauge',
+    iconType: 'apps',
     'data-test-subj': 'sloCardViewButton',
   },
   {
@@ -40,13 +37,18 @@ const toggleButtonsIcons = [
     iconType: 'list',
     'data-test-subj': 'sloListViewButton',
   },
+  {
+    iconType: 'tableDensityCompact',
+    id: 'compactView',
+    label: i18n.translate('xpack.observability.slo.listView.compactViewLabel', {
+      defaultMessage: 'Compact view',
+    }),
+  },
 ];
 
 export function ToggleSLOView({
   sloView,
   onChangeView,
-  onToggleCompactView,
-  isCompact = true,
   sloList,
   loading,
   initialState,
@@ -96,9 +98,6 @@ export function ToggleSLOView({
           isIconOnly
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <SLOViewSettings toggleCompactView={onToggleCompactView} isCompact={isCompact} />
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }

x-pack/plugins/observability/public/pages/slos/hooks/use_url_search_state.ts

@@ -25,7 +25,6 @@ export interface SearchState {
     direction: SortDirection;
   };
   view: SLOView;
-  compact: boolean;
   filters: Filter[];
   lastRefresh?: number;
   tagsFilter?: Filter;
@@ -38,7 +37,6 @@ export const DEFAULT_STATE = {
   perPage: DEFAULT_SLO_PAGE_SIZE,
   sort: { by: 'status' as const, direction: 'desc' as const },
   view: 'cardView' as const,
-  compact: true,
   filters: [],
   lastRefresh: 0,
 };

x-pack/plugins/observability/public/pages/slos/slos.test.tsx

@@ -221,10 +221,10 @@ describe('SLOs Page', () => {
         await act(async () => {
           render(<SlosPage />);
         });
-        expect(await screen.findByTestId('sloListViewButton')).toBeTruthy();
-        fireEvent.click(screen.getByTestId('sloListViewButton'));
+        expect(await screen.findByTestId('compactView')).toBeTruthy();
+        fireEvent.click(screen.getByTestId('compactView'));
 
-        screen.getAllByLabelText('All actions').at(0)?.click();
+        (await screen.findAllByLabelText('All actions')).at(0)?.click();
 
         await waitForEuiPopoverOpen();
 
@@ -250,8 +250,8 @@ describe('SLOs Page', () => {
         await act(async () => {
           render(<SlosPage />);
         });
-        expect(await screen.findByTestId('sloListViewButton')).toBeTruthy();
-        fireEvent.click(screen.getByTestId('sloListViewButton'));
+        expect(await screen.findByTestId('compactView')).toBeTruthy();
+        fireEvent.click(screen.getByTestId('compactView'));
         screen.getAllByLabelText('All actions').at(0)?.click();
 
         await waitForEuiPopoverOpen();
@@ -276,8 +276,8 @@ describe('SLOs Page', () => {
         await act(async () => {
           render(<SlosPage />);
         });
-        expect(await screen.findByTestId('sloListViewButton')).toBeTruthy();
-        fireEvent.click(screen.getByTestId('sloListViewButton'));
+        expect(await screen.findByTestId('compactView')).toBeTruthy();
+        fireEvent.click(screen.getByTestId('compactView'));
         screen.getAllByLabelText('All actions').at(0)?.click();
 
         await waitForEuiPopoverOpen();
@@ -303,9 +303,9 @@ describe('SLOs Page', () => {
           render(<SlosPage />);
         });
 
-        expect(await screen.findByTestId('sloListViewButton')).toBeTruthy();
-        fireEvent.click(screen.getByTestId('sloListViewButton'));
-        screen.getAllByLabelText('All actions').at(0)?.click();
+        expect(await screen.findByTestId('compactView')).toBeTruthy();
+        fireEvent.click(screen.getByTestId('compactView'));
+        (await screen.findAllByLabelText('All actions')).at(0)?.click();
 
         await waitForEuiPopoverOpen();
 
@@ -335,8 +335,8 @@ describe('SLOs Page', () => {
           render(<SlosPage />);
         });
 
-        expect(await screen.findByTestId('sloListViewButton')).toBeTruthy();
-        fireEvent.click(screen.getByTestId('sloListViewButton'));
+        expect(await screen.findByTestId('compactView')).toBeTruthy();
+        fireEvent.click(screen.getByTestId('compactView'));
         screen.getAllByLabelText('All actions').at(0)?.click();
 
         await waitForEuiPopoverOpen();

x-pack/plugins/observability/public/pages/slos/slos.tsx

@@ -58,7 +58,6 @@ export function SlosPage() {
           defaultMessage: 'SLOs',
         }),
         rightSideItems: [<CreateSloBtn />, <FeedbackButton />],
-        bottomBorder: false,
       }}
       topSearchBar={<SloListSearchBar />}
     >