[ISSUE 1408] Get rid of Bulma's classes 'Elements'. (#1494)

* Removed sass modules not used in project

* get rid Icon from Bulma

* Get rid of Bulma's classes 'Elements'.

* resoved comments from review

* resolved Code Smells problem

* refactoring TableHeader styles

* merge master

Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap

@@ -29,9 +29,21 @@ exports[`Tasks view matches snapshot 1`] = `
   -ms-letter-spacing: 0em;
   letter-spacing: 0em;
   text-align: left;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   background: #FFFFFF;
-  color: #73848C;
   cursor: default;
+  color: #73848C;
 }
 
 .c1 {
@@ -190,9 +202,21 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
   -ms-letter-spacing: 0em;
   letter-spacing: 0em;
   text-align: left;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   background: #FFFFFF;
-  color: #73848C;
   cursor: default;
+  color: #73848C;
 }
 
 .c1 {

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -176,6 +176,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         "messageToggleIconClosed": "#ABB5BA",
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
+        "warningIcon": "#FFDD57",
       },
       "input": Object {
         "backgroundColor": Object {

kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.styled.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  display: block;
+  padding: 1.25rem;
+  border-radius: 6px;
+`;

kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { KsqlCommandResponse, Table } from 'generated-sources';
 
+import * as S from './ResultRenderer.styled';
+
 const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({
   result,
 }) => {
@@ -8,7 +10,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({
 
   const isMessage = !!result.message;
 
-  if (isMessage) return <div className="box">{result.message}</div>;
+  if (isMessage) return <S.Wrapper>{result.message}</S.Wrapper>;
 
   const isTable = result.data !== undefined;
 
@@ -33,7 +35,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({
   );
 
   return (
-    <div className="box">
+    <S.Wrapper>
       <table className="table is-fullwidth">
         <thead>
           <tr>
@@ -57,7 +59,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({
           )}
         </tbody>
       </table>
-    </div>
+    </S.Wrapper>
   );
 };
 

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -183,6 +183,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
         "messageToggleIconClosed": "#ABB5BA",
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
+        "warningIcon": "#FFDD57",
       },
       "input": Object {
         "backgroundColor": Object {

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  display: block;
+  padding: 1.25rem;
+  border-radius: 6px;
+`;

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -18,6 +18,7 @@ import {
 } from 'redux/reducers/topics/selectors';
 
 import validateMessage from './validateMessage';
+import * as S from './SendMessage.styled';
 
 interface RouterParams {
   clusterName: ClusterName;
@@ -131,7 +132,7 @@ const SendMessage: React.FC = () => {
     return <PageLoader />;
   }
   return (
-    <div className="box">
+    <S.Wrapper>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="columns">
           <div className="column is-one-third">
@@ -214,7 +215,7 @@ const SendMessage: React.FC = () => {
           Send
         </Button>
       </form>
-    </div>
+    </S.Wrapper>
   );
 };
 

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import CustomParamButton from './CustomParamButton';
-
-interface Props {
-  index: string;
-  onRemove: (index: string) => void;
-}
-
-const CustomParamAction: React.FC<Props> = ({ index, onRemove }) => (
-  <>
-    <label className="label">&nbsp;</label>
-    <CustomParamButton
-      className="is-danger"
-      type="fa-minus"
-      onClick={() => onRemove(index)}
-    />
-  </>
-);
-
-export default CustomParamAction;

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamButton.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface Props {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  className: string;
-  type: 'fa-plus' | 'fa-minus' | 'fa-chevron-right';
-  btnText?: string;
-  disabled?: boolean;
-}
-
-const CustomParamButton: React.FC<Props> = ({
-  onClick,
-  className,
-  type,
-  btnText,
-}) => (
-  <button
-    type="button"
-    className={`button ${className} is-outlined`}
-    onClick={onClick}
-  >
-    {btnText && <span>{btnText}</span>}
-    <span className="icon">
-      <i className={`fas fa-lg ${type}`} />
-    </span>
-  </button>
-);
-
-export default CustomParamButton;

kafka-ui-react-app/src/components/Version/Version.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { gitCommitPath } from 'lib/paths';
 import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants';
+import WarningIcon from 'components/common/Icons/WarningIcon';
 
 import compareVersions from './compareVersions';
 
@@ -33,10 +34,9 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
       <span className="mr-1">{tag}</span>
       {outdated && (
         <span
-          className="icon has-text-warning"
           title={`Your app version is outdated. Current latest version is ${latestTag}`}
         >
-          <i className="fas fa-exclamation-triangle" />
+          <WarningIcon />
         </span>
       )}
       {commit && (

kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+const WarningIconContainer = styled.span`
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.5rem;
+`;
+
+const WarningIcon: React.FC = () => {
+  const theme = useTheme();
+
+  return (
+    <WarningIconContainer>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.0"
+        width="18px"
+        height="16px"
+        viewBox="0 0 1280.000000 1126.000000"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <g
+          transform="translate(0.000000,1126.000000) scale(0.100000,-0.100000)"
+          fill={theme.icons.warningIcon}
+          stroke="none"
+        >
+          <path d="M6201 11240 c-41 -10 -113 -37 -160 -61 -70 -35 -105 -62 -187 -144 -61 -60 -124 -134 -157 -185 -85 -132 -681 -1182 -2962 -5215 -793 -1402 -1714 -3032 -2047 -3620 -333 -589 -617 -1098 -631 -1131 -79 -187 -72 -394 19 -559 15 -28 64 -86 108 -130 91 -90 177 -139 306 -175 l76 -20 5879 2 5880 3 81 27 c363 124 494 499 304 878 -21 43 -899 1580 -1951 3417 -1052 1836 -2308 4029 -2791 4873 -484 844 -909 1580 -946 1635 -118 177 -268 311 -419 373 -125 52 -272 64 -402 32z m1607 -3410 c793 -1383 2019 -3523 2724 -4755 l1283 -2240 -2712 -3 c-1492 -1 -3934 -1 -5427 0 l-2715 3 1666 2945 c3188 5637 3725 6583 3734 6572 4 -4 655 -1139 1447 -2522z" />
+          <path d="M6290 7874 c-14 -3 -61 -14 -104 -25 -390 -98 -706 -474 -706 -837 0 -46 22 -254 50 -461 27 -207 113 -857 190 -1446 201 -1535 199 -1517 216 -1581 42 -165 141 -297 271 -361 67 -33 86 -38 168 -41 152 -7 246 30 348 136 99 105 144 224 176 464 11 84 61 462 111 841 49 378 131 996 180 1375 50 378 100 756 111 840 24 182 25 305 4 387 -82 323 -360 599 -693 686 -75 20 -266 33 -322 23z" />
+          <path d="M6322 2739 c-345 -44 -594 -371 -552 -726 20 -166 86 -301 204 -410 114 -107 237 -160 391 -170 187 -11 336 47 475 187 134 134 192 273 193 465 1 116 -13 183 -58 280 -120 261 -379 409 -653 374z" />
+        </g>
+      </svg>
+    </WarningIconContainer>
+  );
+};
+
+export default WarningIcon;

kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx

@@ -20,9 +20,6 @@ const ListHeaderCell: React.FC<ListHeaderProps> = ({
     onClick={() => setOrderBy(value)}
   >
     {title}
-    <span className="icon is-small">
-      <i className="fas fa-sort" />
-    </span>
   </th>
 );
 

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts

@@ -5,31 +5,74 @@ interface TitleProps {
   isOrdered?: boolean;
 }
 
-const isOrderableStyles = css`
-  cursor: pointer;
+export const Title = styled.span<TitleProps>(
+  ({ isOrderable, isOrdered, theme: { table } }) => css`
+    font-family: Inter, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: left;
+    justify-content: start;
+    display: flex;
+    align-items: center;
+    background: ${table.th.backgroundColor.normal};
+    cursor: default;
+    color: ${table.th.color.normal};
 
-  &:hover {
-    color: ${(props) => props.theme.table.th.color.hover};
-  }
-`;
+    ${isOrderable &&
+    css`
+      cursor: pointer;
 
-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.table.th.backgroundColor.normal};
-  color: ${(props) =>
-    props.isOrdered
-      ? props.theme.table.th.color.active
-      : props.theme.table.th.color.normal};
-  cursor: default;
+      padding-right: 18px;
+      position: relative;
 
-  ${(props) => props.isOrderable && isOrderableStyles}
-`;
+      &::before,
+      &::after {
+        border: 4px solid transparent;
+        content: '';
+        display: block;
+        height: 0;
+        right: 5px;
+        top: 50%;
+        position: absolute;
+      }
+
+      &::before {
+        border-bottom-color: ${table.th.color.normal};
+        margin-top: -9px;
+      }
+
+      &::after {
+        border-top-color: ${table.th.color.normal};
+        margin-top: 1px;
+      }
+
+      &:hover {
+        color: ${table.th.color.hover};
+        &::before {
+          border-bottom-color: ${table.th.color.hover};
+        }
+        &::after {
+          border-top-color: ${table.th.color.hover};
+        }
+      }
+    `}
+
+    ${isOrderable &&
+    isOrdered &&
+    css`
+      color: ${table.th.color.active};
+      &::before {
+        border-bottom-color: ${table.th.color.active};
+      }
+      &::after {
+        border-top-color: ${table.th.color.active};
+      }
+    `}
+  `
+);
 
 export const Preview = styled.span`
   margin-left: 8px;

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx

@@ -47,11 +47,6 @@ const TableHeaderCell: React.FC<TableHeaderCellProps> = (props) => {
     <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 && (

kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx

@@ -56,7 +56,6 @@ describe('TableHeaderCell', () => {
     const title = within(columnheader).getByRole('button');
     expect(title).toBeInTheDocument();
     expect(title).toHaveTextContent(testTitle);
-    expect(within(title).getByTitle(sortIconTitle)).toBeInTheDocument();
     expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
     expect(title).toHaveStyle('cursor: pointer;');
   });
@@ -130,6 +129,7 @@ describe('TableHeaderCell', () => {
       title: testTitle,
       orderBy: TopicColumnsToSort.NAME,
       orderValue: TopicColumnsToSort.NAME,
+      handleOrderBy: jest.fn(),
     });
     const columnheader = screen.getByRole('columnheader');
     const title = within(columnheader).getByText(testTitle);
@@ -141,6 +141,7 @@ describe('TableHeaderCell', () => {
       title: testTitle,
       orderBy: TopicColumnsToSort.NAME,
       orderValue: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
+      handleOrderBy: jest.fn(),
     });
     const columnheader = screen.getByRole('columnheader');
     const title = within(columnheader).getByText(testTitle);

kafka-ui-react-app/src/components/common/table/__tests__/__snapshots__/SortableColumnHeader.spec.tsx.snap

@@ -15,13 +15,6 @@ exports[`ListHeader matches the snapshot 1`] = `
           onClick={[Function]}
         >
           Name
-          <span
-            className="icon is-small"
-          >
-            <i
-              className="fas fa-sort"
-            />
-          </span>
         </th>
       </ListHeaderCell>
     </tr>
@@ -44,13 +37,6 @@ exports[`ListHeader on column click matches the snapshot 1`] = `
           onClick={[Function]}
         >
           Name
-          <span
-            className="icon is-small"
-          >
-            <i
-              className="fas fa-sort"
-            />
-          </span>
         </th>
       </ListHeaderCell>
     </tr>

kafka-ui-react-app/src/theme/bulma_overrides.scss

@@ -88,10 +88,6 @@
   font-size: $size-8;
 }
 
-.box {
-  box-shadow: none;
-}
-
 .tag:not(body) {
   font-size: 0.75rem;
   height: 1.75em;

kafka-ui-react-app/src/theme/index.scss

@@ -15,16 +15,6 @@
 @import "bulma/sass/base/animations";
 
 // Elements
-@import "bulma/sass/elements/box";
-@import "bulma/sass/elements/container";
-@import "bulma/sass/elements/content";
-@import "bulma/sass/elements/icon";
-@import "bulma/sass/elements/image";
-@import "bulma/sass/elements/notification";
-@import "bulma/sass/elements/progress";
-@import "bulma/sass/elements/tag";
-@import "bulma/sass/elements/title";
-@import "bulma/sass/elements/other";
 
 // Form
 @import "bulma/sass/form/shared";

kafka-ui-react-app/src/theme/theme.ts

@@ -39,6 +39,7 @@ export const Colors = {
   },
   yellow: {
     '10': '#FFEECC',
+    '20': '#FFDD57',
   },
   blue: {
     '10': '#e3f2fd',
@@ -383,6 +384,7 @@ const theme = {
   },
   icons: {
     closeIcon: Colors.neutral[30],
+    warningIcon: Colors.yellow[20],
     messageToggleIconOpened: Colors.neutral[90],
     messageToggleIconClosed: Colors.neutral[30],
     verticalElipsisIcon: Colors.neutral[50],