Repository: provectus/kafka-ui
Issue: Confusing sorting UI in Topics
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

When you access Topics tab, some elements of the UI seem confusing:
- The topics are sorted by Topic Name, but it is not highlighted
- You need to click any other table field to see that sorting works (purple highlight)
- The sorting arrows are way to small, but you need to click them to start sorting
- The arrows point up and down, but you can't actually sort anything up or down in given field (THIS MAY BE A BUG)

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

- The selected sorted field is highlighted by default
- You can click field name, not tiny arrows to start sorting
- Sorting works up and down, as the arrows suggest
- You don't have to update the page to return to the default state (just click on Topic Name instead)

### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

---

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

Please have a look at up&down sorting. It doesn't work right now in a selected field. Only sorting in-between fields works.


Issue comments:

Pull request review comments:
The direct use of `Colors.brand[50]` is a wrong approach. we must use the `theme` object instead
I'm not sure we really need all these `!important`. Could you double check?
```jsx
      <S.Title
        isSortable={isSortable}
        isCurrentSort={isCurrentSort}
        onClick: handleOnClick
        onKeyDown: handleOnKeyDown
        role: 'button'
        tabIndex: 0
      >
```

I would suggest to move all these conditions inside of handleOnClick & handleOnKeyDown functions
```suggestion
  const isOrderable = !!(orderValue && handleOrderBy);
```

```suggestion
  const isOrdered = !!orderValue && orderBy === orderValue;
```
Rewrote to use theme object from props
Removed `!important`
Looks the same
Rewrote this part. Still looks not ideal but better imo
:+1:
You can also use theme color styles there instead of color hardcode
the same here
The role of the <span /> should be role='span', not role='button'.
Here too.
There are two variable names in the same TopicColumnsToSort.NAME, I think it's better to rename these variables by
orderBy && orderValue => orderByName
otherOrderValue => orderByOutOfSyncReplicas
If it is (const sortIconTitle) then it must be (const title => const testTitle).
I don't understand Why this variable (SPACE_KEY) is a constant in uppercase, although, for example, it is not (title)?
The same variable with different names (cell, td).
One place TableHeaderCell one place td
Or they will be TableHeaderCell and cell
Or they will be TableHeaderTd and td
The role of the <span /> should be role='span', not role='button'.
I think a variable name would be better (const titleNode => const span).
I think a variable name would be better (const titleNode => const span).
The same variable in this file has been declared twice with different names (titleNode and previewNode)
And I've already mentioned the best version (const span) :))
Here too.
I don't think so as it is a `span` that acts like a `button`
And, as I know, `role='span'` is not a correct role type 
[List of role types on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types)
It represents a `space key` press and used in `userEvent.type` as constant and will not be changed anytime soon
For example, `userEvent.type` can take `{enter}` as a second arg to represent `enter key` press
So if I needed to put `enter key` to a variable I'll do it like this
```js
const ENTER_KEY = '{enter}'
```

I don't mind changing it tho
I tried to change them like this and I don't like how it looks
If we, by some reason, need to change `const orderByName = TopicColumnsToSort.NAME` to something like `const orderByTotalPartitions = TopicColumnsToSort.TOTAL_PARTITIONS` we have to change all variables to new ones

I'm thinking about removing `orderBy`, `orderValue` and `otherOrderValue` variables and to use `TopicColumnsToSort.NAME` etc 
It will be more readable, I think
![image](https://user-images.githubusercontent.com/12596177/149927070-a54c7393-6aca-42db-9666-478bbe4c1f2e.png)
Looks better IMO
We can have `Title` and `Preview` in `TableHeaderCell` component which are both `span`'s
I think it will be confusing
`sortIconTitle` represents `title` attribute value on HTML node (`title='Sort icon'`)

Is `sortIconTitleValue` will be better?
Yes it is also a good version. 
I don't think so.
For me the best way is 
const title = 'test title'; => const  testTitle = 'test title';
const sortIconTitle => this is okay.
I think either all  hardcoded variables must be in snake case or in camelCase.
<span role='button'/>
I suggest this role change to <span role='span'/> or something else
What do you think about it ? @workshur , @Hurenka.
Will be resolved with https://github.com/provectus/kafka-ui/pull/1389#discussion_r786774385
will be resolved with https://github.com/provectus/kafka-ui/pull/1389#discussion_r786659717
will be resolved with https://github.com/provectus/kafka-ui/pull/1389#discussion_r786659717
Please, help us decide which naming to choose @workshur , @Hurenka
Done
Done
Will be resolved with https://github.com/provectus/kafka-ui/pull/1389#discussion_r786774385
To my mind here we can add a role 'button'. if it was an element with predefined role, like 'h2' then the first role would be used - 'heading', therefore adding the second 'button' would not make sense.
But for 'span' we can apply the ARIA role to show that this span is clickable.
I used to write consts representing keyboard events in upper case, like Damir.

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
index 34f655c6374..7f14f530d18 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
@@ -18,22 +18,7 @@ exports[`Tasks view matches snapshot 1`] = `
   background-color: #F1F2F3;
 }
 
-.c1 {
-  padding: 4px 0 4px 24px !important;
-  border-bottom-width: 1px !important;
-  vertical-align: middle !important;
-}
-
-.c1.is-clickable {
-  cursor: pointer !important;
-  pointer-events: all !important;
-}
-
-.c1.has-text-link-dark span {
-  color: #4F4FFF !important;
-}
-
-.c1 span {
+.c2 {
   font-family: Inter,sans-serif;
   font-size: 12px;
   font-style: normal;
@@ -46,18 +31,13 @@ exports[`Tasks view matches snapshot 1`] = `
   text-align: left;
   background: #FFFFFF;
   color: #73848C;
+  cursor: default;
 }
 
-.c1 span.preview {
-  margin-left: 8px;
-  font-size: 14px;
-  color: #4F4FFF;
-  cursor: pointer;
-}
-
-.c1 span.is-clickable {
-  cursor: pointer !important;
-  pointer-events: all !important;
+.c1 {
+  padding: 4px 0 4px 24px;
+  border-bottom-width: 1px;
+  vertical-align: middle;
 }
 
 <table
@@ -67,40 +47,36 @@ exports[`Tasks view matches snapshot 1`] = `
     <tr>
       <th
         className="c1"
-        title="ID"
       >
         <span
-          className="title"
+          className="c2"
         >
           ID
         </span>
       </th>
       <th
         className="c1"
-        title="Worker"
       >
         <span
-          className="title"
+          className="c2"
         >
           Worker
         </span>
       </th>
       <th
         className="c1"
-        title="State"
       >
         <span
-          className="title"
+          className="c2"
         >
           State
         </span>
       </th>
       <th
         className="c1"
-        title="Trace"
       >
         <span
-          className="title"
+          className="c2"
         >
           Trace
         </span>
@@ -109,7 +85,7 @@ exports[`Tasks view matches snapshot 1`] = `
         className="c1"
       >
         <span
-          className="title"
+          className="c2"
         />
       </th>
     </tr>
@@ -203,22 +179,7 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
   background-color: #F1F2F3;
 }
 
-.c1 {
-  padding: 4px 0 4px 24px !important;
-  border-bottom-width: 1px !important;
-  vertical-align: middle !important;
-}
-
-.c1.is-clickable {
-  cursor: pointer !important;
-  pointer-events: all !important;
-}
-
-.c1.has-text-link-dark span {
-  color: #4F4FFF !important;
-}
-
-.c1 span {
+.c2 {
   font-family: Inter,sans-serif;
   font-size: 12px;
   font-style: normal;
@@ -231,18 +192,13 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
   text-align: left;
   background: #FFFFFF;
   color: #73848C;
+  cursor: default;
 }
 
-.c1 span.preview {
-  margin-left: 8px;
-  font-size: 14px;
-  color: #4F4FFF;
-  cursor: pointer;
-}
-
-.c1 span.is-clickable {
-  cursor: pointer !important;
-  pointer-events: all !important;
+.c1 {
+  padding: 4px 0 4px 24px;
+  border-bottom-width: 1px;
+  vertical-align: middle;
 }
 
 <table
@@ -252,40 +208,36 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
     <tr>
       <th
         className="c1"
-        title="ID"
       >
         <span
-          className="title"
+          className="c2"
         >
           ID
         </span>
       </th>
       <th
         className="c1"
-        title="Worker"
       >
         <span
-          className="title"
+          className="c2"
         >
           Worker
         </span>
       </th>
       <th
         className="c1"
-        title="State"
       >
         <span
-          className="title"
+          className="c2"
         >
           State
         </span>
       </th>
       <th
         className="c1"
-        title="Trace"
       >
         <span
-          className="title"
+          className="c2"
         >
           Trace
         </span>
@@ -294,7 +246,7 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
         className="c1"
       >
         <span
-          className="title"
+          className="c2"
         />
       </th>
     </tr>
diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
index 2fbbed56bb5..26d4830207e 100644
--- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
@@ -259,6 +259,8 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#FFFFFF",
         },
         "color": Object {
+          "active": "#4F4FFF",
+          "hover": "#4F4FFF",
           "normal": "#73848C",
         },
         "previewColor": Object {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
index 117c5269190..f9e7653eb82 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
@@ -270,6 +270,8 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "normal": "#FFFFFF",
         },
         "color": Object {
+          "active": "#4F4FFF",
+          "hover": "#4F4FFF",
           "normal": "#73848C",
         },
         "previewColor": Object {
diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
index 6d4fbf847cc..6e4d44d65f2 100644
--- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
+++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
@@ -1,43 +1,52 @@
-import styled from 'styled-components';
-import { Colors } from 'theme/theme';
+import styled, { css } from 'styled-components';
 
-import { TableHeaderCellProps } from './TableHeaderCell';
+interface TitleProps {
+  isOrderable?: boolean;
+  isOrdered?: boolean;
+}
 
-export const TableHeaderCell = styled.th<TableHeaderCellProps>`
-  padding: 4px 0 4px 24px !important;
-  border-bottom-width: 1px !important;
-  vertical-align: middle !important;
+const isOrderableStyles = css`
+  cursor: pointer;
 
-  &.is-clickable {
-    cursor: pointer !important;
-    pointer-events: all !important;
+  &:hover {
+    color: ${(props) => props.theme.thStyles.color.hover};
   }
+`;
 
-  &.has-text-link-dark span {
-    color: ${Colors.brand[50]} !important;
-  }
+export const Title = styled.span<TitleProps>`
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  background: ${(props) => props.theme.thStyles.backgroundColor.normal};
+  color: ${(props) =>
+    props.isOrdered
+      ? props.theme.thStyles.color.active
+      : props.theme.thStyles.color.normal};
+  cursor: default;
 
-  span {
-    font-family: Inter, sans-serif;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-    letter-spacing: 0em;
-    text-align: left;
-    background: ${(props) => props.theme.thStyles.backgroundColor.normal};
-    color: ${(props) => props.theme.thStyles.color.normal};
+  ${(props) => props.isOrderable && isOrderableStyles}
+`;
 
-    &.preview {
-      margin-left: 8px;
-      font-size: 14px;
-      color: ${(props) => props.theme.thStyles.previewColor.normal};
-      cursor: pointer;
-    }
+export const Preview = styled.span`
+  margin-left: 8px;
+  font-family: Inter, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  background: ${(props) => props.theme.thStyles.backgroundColor.normal};
+  font-size: 14px;
+  color: ${(props) => props.theme.thStyles.previewColor.normal};
+  cursor: pointer;
+`;
 
-    &.is-clickable {
-      cursor: pointer !important;
-      pointer-events: all !important;
-    }
-  }
+export const TableHeaderCell = styled.th`
+  padding: 4px 0 4px 24px;
+  border-bottom-width: 1px;
+  vertical-align: middle;
 `;
diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
index 66a75835ceb..bf90430e006 100644
--- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
+++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { TopicColumnsToSort } from 'generated-sources';
 import * as S from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
-import cx from 'classnames';
 
 export interface TableHeaderCellProps {
   title?: string;
@@ -13,38 +12,57 @@ export interface TableHeaderCellProps {
 }
 
 const TableHeaderCell: React.FC<TableHeaderCellProps> = (props) => {
-  const { title, previewText, onPreview, orderBy, orderValue, handleOrderBy } =
-    props;
+  const {
+    title,
+    previewText,
+    onPreview,
+    orderBy,
+    orderValue,
+    handleOrderBy,
+    ...restProps
+  } = props;
 
+  const isOrdered = !!orderValue && orderValue === orderBy;
+  const isOrderable = !!(orderValue && handleOrderBy);
+
+  const handleOnClick = () => {
+    return orderValue && handleOrderBy && handleOrderBy(orderValue);
+  };
+  const handleOnKeyDown = (event: React.KeyboardEvent) => {
+    return (
+      event.code === 'Space' &&
+      orderValue &&
+      handleOrderBy &&
+      handleOrderBy(orderValue)
+    );
+  };
+  const orderableProps = isOrderable && {
+    isOrderable,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    role: 'button',
+    tabIndex: 0,
+  };
   return (
-    <S.TableHeaderCell
-      className={cx(orderBy && orderBy === orderValue && 'has-text-link-dark')}
-      {...props}
-    >
-      <span className="title">{title}</span>
+    <S.TableHeaderCell {...restProps}>
+      <S.Title isOrdered={isOrdered} {...orderableProps}>
+        {title}
+        {isOrderable && (
+          <span title="Sort icon" className="icon is-small">
+            <i className="fas fa-sort" />
+          </span>
+        )}
+      </S.Title>
+
       {previewText && (
-        <span
-          className="preview"
+        <S.Preview
           onClick={onPreview}
           onKeyDown={onPreview}
           role="button"
           tabIndex={0}
         >
           {previewText}
-        </span>
-      )}
-      {orderValue && (
-        <span
-          className="icon is-small is-clickable"
-          onClick={() =>
-            orderValue && handleOrderBy && handleOrderBy(orderValue)
-          }
-          onKeyDown={() => handleOrderBy}
-          role="button"
-          tabIndex={0}
-        >
-          <i className="fas fa-sort" />
-        </span>
+        </S.Preview>
       )}
     </S.TableHeaderCell>
   );
diff --git a/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx b/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx
index 7b5fd4e2aba..7742f67b703 100644
--- a/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx
@@ -1,17 +1,25 @@
 import React from 'react';
-import { StaticRouter } from 'react-router';
+import { screen, within } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
 import TableHeaderCell, {
   TableHeaderCellProps,
 } from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import { mountWithTheme } from 'lib/testHelpers';
 import { TopicColumnsToSort } from 'generated-sources';
+import theme from 'theme/theme';
+import userEvent from '@testing-library/user-event';
 
-const STUB_TITLE = 'stub test title';
-const STUB_PREVIEW_TEXT = 'stub preview text';
+const SPACE_KEY = ' ';
+
+const testTitle = 'test title';
+const testPreviewText = 'test preview text';
+const handleOrderBy = jest.fn();
+const onPreview = jest.fn();
+
+const sortIconTitle = 'Sort icon';
 
 describe('TableHeaderCell', () => {
-  const setupComponent = (props: TableHeaderCellProps) => (
-    <StaticRouter>
+  const setupComponent = (props: Partial<TableHeaderCellProps> = {}) =>
+    render(
       <table>
         <thead>
           <tr>
@@ -19,49 +27,135 @@ describe('TableHeaderCell', () => {
           </tr>
         </thead>
       </table>
-    </StaticRouter>
-  );
+    );
 
   it('renders without props', () => {
-    const wrapper = mountWithTheme(setupComponent({}));
-    expect(wrapper.contains(<TableHeaderCell />)).toBeTruthy();
+    setupComponent();
+    expect(screen.getByRole('columnheader')).toBeInTheDocument();
   });
 
   it('renders with title & preview text', () => {
-    const wrapper = mountWithTheme(
-      setupComponent({
-        title: STUB_TITLE,
-        previewText: STUB_PREVIEW_TEXT,
-      })
-    );
+    setupComponent({
+      title: testTitle,
+      previewText: testPreviewText,
+    });
 
-    expect(wrapper.find('span.title').text()).toEqual(STUB_TITLE);
-    expect(wrapper.find('span.preview').text()).toEqual(STUB_PREVIEW_TEXT);
+    const columnheader = screen.getByRole('columnheader');
+    expect(within(columnheader).getByText(testTitle)).toBeInTheDocument();
+    expect(within(columnheader).getByText(testPreviewText)).toBeInTheDocument();
   });
 
-  it('renders with orderBy props', () => {
-    const wrapper = mountWithTheme(
-      setupComponent({
-        title: STUB_TITLE,
-        orderBy: TopicColumnsToSort.NAME,
-        orderValue: TopicColumnsToSort.NAME,
-      })
-    );
+  it('renders with orderable props', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+      orderValue: TopicColumnsToSort.NAME,
+      handleOrderBy,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByRole('button');
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent(testTitle);
+    expect(within(title).getByTitle(sortIconTitle)).toBeInTheDocument();
+    expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
+    expect(title).toHaveStyle('cursor: pointer;');
+  });
 
-    expect(wrapper.find('span.title').text()).toEqual(STUB_TITLE);
-    expect(wrapper.exists('span.icon.is-small.is-clickable')).toBeTruthy();
-    expect(wrapper.exists('i.fas.fa-sort')).toBeTruthy();
+  it('renders click on title triggers handler', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+      orderValue: TopicColumnsToSort.NAME,
+      handleOrderBy,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByRole('button');
+    userEvent.click(title);
+    expect(handleOrderBy.mock.calls.length).toBe(1);
+  });
+
+  it('renders space on title triggers handler', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+      orderValue: TopicColumnsToSort.NAME,
+      handleOrderBy,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByRole('button');
+    userEvent.type(title, SPACE_KEY);
+    // userEvent.type clicks and only then presses space
+    expect(handleOrderBy.mock.calls.length).toBe(2);
+  });
+
+  it('click on preview triggers handler', () => {
+    setupComponent({
+      title: testTitle,
+      previewText: testPreviewText,
+      onPreview,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const preview = within(columnheader).getByRole('button');
+    userEvent.click(preview);
+    expect(onPreview.mock.calls.length).toBe(1);
+  });
+
+  it('click on preview triggers handler', () => {
+    setupComponent({
+      title: testTitle,
+      previewText: testPreviewText,
+      onPreview,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const preview = within(columnheader).getByRole('button');
+    userEvent.type(preview, SPACE_KEY);
+    // userEvent.type clicks and only then presses space
+    expect(onPreview.mock.calls.length).toBe(2);
+  });
+
+  it('renders without sort indication', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+    });
+
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByText(testTitle);
+    expect(within(title).queryByTitle(sortIconTitle)).not.toBeInTheDocument();
+    expect(title).toHaveStyle('cursor: default;');
+  });
+
+  it('renders with hightlighted title when orderBy and orderValue are equal', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+      orderValue: TopicColumnsToSort.NAME,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByText(testTitle);
+    expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
+  });
+
+  it('renders without hightlighted title when orderBy and orderValue are not equal', () => {
+    setupComponent({
+      title: testTitle,
+      orderBy: TopicColumnsToSort.NAME,
+      orderValue: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
+    });
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByText(testTitle);
+    expect(title).toHaveStyle(`color: ${theme.thStyles.color.normal}`);
   });
 
   it('renders with default (primary) theme', () => {
-    const wrapper = mountWithTheme(
-      setupComponent({
-        title: STUB_TITLE,
-      })
-    );
+    setupComponent({
+      title: testTitle,
+    });
 
-    const domNode = wrapper.find('span').at(0).getDOMNode();
-    const background = getComputedStyle(domNode).getPropertyValue('background');
-    expect(background).toBe('rgb(255, 255, 255)');
+    const columnheader = screen.getByRole('columnheader');
+    const title = within(columnheader).getByText(testTitle);
+    expect(title).toHaveStyle(
+      `background: ${theme.thStyles.backgroundColor.normal};`
+    );
   });
 });
diff --git a/kafka-ui-react-app/src/redux/reducers/topics/reducer.ts b/kafka-ui-react-app/src/redux/reducers/topics/reducer.ts
index 485793cd215..5e4426d77d7 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/reducer.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/reducer.ts
@@ -2,13 +2,14 @@ import { Action, TopicsState } from 'redux/interfaces';
 import { getType } from 'typesafe-actions';
 import * as actions from 'redux/actions';
 import * as _ from 'lodash';
+import { TopicColumnsToSort } from 'generated-sources';
 
 export const initialState: TopicsState = {
   byName: {},
   allNames: [],
   totalPages: 1,
   search: '',
-  orderBy: null,
+  orderBy: TopicColumnsToSort.NAME,
   consumerGroups: [],
 };
 
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 6737c6739ab..ec49a6cfac0 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -127,6 +127,8 @@ const theme = {
     },
     color: {
       normal: Colors.neutral[50],
+      hover: Colors.brand[50],
+      active: Colors.brand[50],
     },
     previewColor: {
       normal: Colors.brand[50],


Test patch: