Issues/1228 Increased length of the sorting box to make the title readable like for 'Latest first' there, make all labels Title Case in popup menus. (#1263)

* Make all labels Title Case in popup menus. * Increased length of the sorting box to make the title readable like for 'Latest first' there. * Update kafka-ui-react-app/src/components/common/Select/Select.styled.ts Co-authored-by: Oleg Shur <workshur@gmail.com> Co-authored-by: Oleg Shur <workshur@gmail.com>
2021-12-17 11:46:27 +04:00 · 2021-12-17 11:46:27 +04:00 · 2d40c3eac1
commit 2d40c3eac1
parent 65d648419c
17 changed files with 144 additions and 67 deletions
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@ -76,7 +76,7 @@ const Brokers: React.FC = () => {
          <Metrics.Indicator label="In Sync Replicas">
            {inSyncReplicasCount}
          </Metrics.Indicator>
-          <Metrics.Indicator label="Out of Sync Replicas">
+          <Metrics.Indicator label="Out Of Sync Replicas">
            {outOfSyncReplicasCount}
          </Metrics.Indicator>
        </Metrics.Section>
@ -85,7 +85,7 @@ const Brokers: React.FC = () => {
        <thead>
          <tr>
            <TableHeaderCell title="Broker" />
-            <TableHeaderCell title="Segment size (Mb)" />
+            <TableHeaderCell title="Segment Size (Mb)" />
            <TableHeaderCell title="Segment Count" />
          </tr>
        </thead>
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx
@ -126,7 +126,7 @@ const Actions: React.FC<ActionsProps> = ({
        <span>
          <i className="fas fa-sync-alt" />
        </span>
-        <span>Restart all tasks</span>
+        <span>Restart All Tasks</span>
      </Button>
      <Button
        buttonSize="M"
@ -143,7 +143,7 @@ const Actions: React.FC<ActionsProps> = ({
        <span>
          <i className="fas fa-pencil-alt" />
        </span>
-        <span>Edit config</span>
+        <span>Edit Config</span>
      </Button>

      <Button
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/Actions.spec.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/Actions.spec.tsx
@ -148,7 +148,7 @@ describe('Actions', () => {
    it('calls restartConnector when restart button clicked', () => {
      const restartConnector = jest.fn();
      const wrapper = mount(setupWrapper({ restartConnector }));
-      wrapper.find({ children: 'Restart all tasks' }).simulate('click');
+      wrapper.find({ children: 'Restart All Tasks' }).simulate('click');
      expect(restartConnector).toHaveBeenCalledTimes(1);
      expect(restartConnector).toHaveBeenCalledWith(
        clusterName,
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/snapshots/Actions.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/snapshots/Actions.spec.tsx.snap
@ -139,7 +139,7 @@ exports[`Actions view matches snapshot 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -157,7 +157,7 @@ exports[`Actions view matches snapshot 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
@ -330,7 +330,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -348,7 +348,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
@ -506,7 +506,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -524,7 +524,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
@ -697,7 +697,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -715,7 +715,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
@ -888,7 +888,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -906,7 +906,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
@ -1064,7 +1064,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
      />
    </span>
    <span>
-      Restart all tasks
+      Restart All Tasks
    </span>
  </button>
  <a
@ -1082,7 +1082,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
        />
      </span>
      <span>
-        Edit config
+        Edit Config
      </span>
    </button>
  </a>
--- a/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/Overview.tsx
@ -33,11 +33,11 @@ const Overview: React.FC<OverviewProps> = ({
        <Metrics.Indicator label="State">
          <TagStyled color="yellow">{connector.status.state}</TagStyled>
        </Metrics.Indicator>
-        <Metrics.Indicator label="Tasks running">
+        <Metrics.Indicator label="Tasks Running">
          {runningTasksCount}
        </Metrics.Indicator>
-        <Metrics.Indicator label="Tasks failed" isAlert>
-          {failedTasksCount}
+        <Metrics.Indicator label="Tasks Failed" isAlert>
+          f{failedTasksCount}
        </Metrics.Indicator>
      </Metrics.Section>
    </Metrics.Wrapper>
--- a/kafka-ui-react-app/src/components/Connect/Details/Overview/tests/snapshots/Overview.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Overview/tests/snapshots/Overview.spec.tsx.snap
@ -181,7 +181,7 @@ exports[`Overview view matches snapshot 1`] = `
          <div
            className="c4"
          >
-            Tasks running
+            Tasks Running
             
          </div>
          <span>
@ -196,7 +196,7 @@ exports[`Overview view matches snapshot 1`] = `
          <div
            className="c4"
          >
-            Tasks failed
+            Tasks Failed
             
            <svg
              fill="none"
@ -214,6 +214,7 @@ exports[`Overview view matches snapshot 1`] = `
            </svg>
          </div>
          <span>
+            f
            2
          </span>
        </div>
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@ -98,10 +98,10 @@ const Details: React.FC = () => {
          <Metrics.Indicator label="Members">
            {consumerGroup.members}
          </Metrics.Indicator>
-          <Metrics.Indicator label="Assigned topics">
+          <Metrics.Indicator label="Assigned Topics">
            {consumerGroup.topics}
          </Metrics.Indicator>
-          <Metrics.Indicator label="Assigned partitions">
+          <Metrics.Indicator label="Assigned Partitions">
            {consumerGroup.partitions?.length}
          </Metrics.Indicator>
          <Metrics.Indicator label="Coordinator ID">
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
@ -30,10 +30,10 @@ const List: React.FC = () => {
      <Table isFullwidth>
        <thead>
          <tr>
-            <TableHeaderCell title="Consumer group ID" />
-            <TableHeaderCell title="Num of members" />
-            <TableHeaderCell title="Num of topics" />
-            <TableHeaderCell title="Messages behind" />
+            <TableHeaderCell title="Consumer Group ID" />
+            <TableHeaderCell title="Num Of Members" />
+            <TableHeaderCell title="Num Of Topics" />
+            <TableHeaderCell title="Messages Behind" />
            <TableHeaderCell title="Coordinator" />
            <TableHeaderCell title="State" />
          </tr>
--- a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
@ -43,7 +43,7 @@ const List: FC = () => {
          buttonType="primary"
          buttonSize="M"
        >
-          Execute KSQL request
+          Execute KSQL Request
        </Button>
      </PageHeading>
      <Metrics.Wrapper>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx
@ -33,9 +33,9 @@ const TopicConsumerGroups: React.FC<Props> = ({
      <Table isFullwidth>
        <thead>
          <tr>
-            <TableHeaderCell title="Consumer group ID" />
-            <TableHeaderCell title="Num of members" />
-            <TableHeaderCell title="Messages behind" />
+            <TableHeaderCell title="Consumer Group ID" />
+            <TableHeaderCell title="Num Of Members" />
+            <TableHeaderCell title="Messages Behind" />
            <TableHeaderCell title="Coordinator" />
            <TableHeaderCell title="State" />
          </tr>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
@ -88,7 +88,7 @@ const Details: React.FC<Props> = ({
              isLink
              to={clusterTopicSendMessagePath(clusterName, topicName)}
            >
-              Produce message
+              Produce Message
            </Button>
          </Route>
          {!isReadOnly && !isInternal && (
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@ -313,9 +313,10 @@ const Filters: React.FC<FiltersProps> = ({
          selectSize="M"
          onChange={(e) => toggleSeekDirection(e.target.value)}
          value={seekDirection}
+          minWidth="120px"
        >
-          <option value={SeekDirection.FORWARD}>Oldest first</option>
-          <option value={SeekDirection.BACKWARD}>Newest first</option>
+          <option value={SeekDirection.FORWARD}>Oldest First</option>
+          <option value={SeekDirection.BACKWARD}>Newest First</option>
        </Select>
      </div>
      <S.FiltersMetrics>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/tests/snapshots/Filters.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/tests/snapshots/Filters.spec.tsx.snap
@ -216,6 +216,42 @@ exports[`Filters component matches the snapshot 1`] = `
  cursor: not-allowed;
 }

+.c11 {
+  height: 32px;
+  border: 1px #ABB5BA solid;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+  padding-left: 12px;
+  padding-right: 16px;
+  color: #171A1C;
+  min-width: 120px;
+  background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
+  background-repeat: no-repeat !important;
+  background-position-x: calc(100% - 8px) !important;
+  background-position-y: 55% !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+}
+
+.c11:hover {
+  color: #171A1C;
+  border-color: #73848C;
+}
+
+.c11:focus {
+  outline: none;
+  color: #171A1C;
+  border-color: #454F54;
+}
+
+.c11:disabled {
+  color: #ABB5BA;
+  border-color: #E3E6E8;
+  cursor: not-allowed;
+}
+
 .c6 {
  position: relative;
 }
@ -361,7 +397,7 @@ exports[`Filters component matches the snapshot 1`] = `
  outline: none;
 }

-.c11 {
+.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -379,7 +415,7 @@ exports[`Filters component matches the snapshot 1`] = `
  padding-bottom: 16px;
 }

-.c12 {
+.c13 {
  color: #73848C;
  font-size: 12px;
  display: -webkit-box;
@ -388,7 +424,7 @@ exports[`Filters component matches the snapshot 1`] = `
  display: flex;
 }

-.c13 {
+.c14 {
  color: #171A1C;
  padding-right: 6px;
  height: 12px;
@ -523,33 +559,33 @@ exports[`Filters component matches the snapshot 1`] = `
          class="select-wrapper c6"
        >
          <select
-            class="c7"
+            class="c11"
          >
            <option
              value="FORWARD"
            >
-              Oldest first
+              Oldest First
            </option>
            <option
              value="BACKWARD"
            >
-              Newest first
+              Newest First
            </option>
          </select>
        </div>
      </div>
      <div
-        class="c11"
+        class="c12"
      >
        <p
          style="font-size: 14px;"
        />
        <div
-          class="c12"
+          class="c13"
          title="Elapsed Time"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="far fa-clock"
@ -561,11 +597,11 @@ exports[`Filters component matches the snapshot 1`] = `
          </span>
        </div>
        <div
-          class="c12"
+          class="c13"
          title="Bytes Consumed"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="fas fa-arrow-down"
@ -576,11 +612,11 @@ exports[`Filters component matches the snapshot 1`] = `
          </span>
        </div>
        <div
-          class="c12"
+          class="c13"
          title="Messages Consumed"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="far fa-file-alt"
@ -813,6 +849,42 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
  cursor: not-allowed;
 }

+.c11 {
+  height: 32px;
+  border: 1px #ABB5BA solid;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+  padding-left: 12px;
+  padding-right: 16px;
+  color: #171A1C;
+  min-width: 120px;
+  background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
+  background-repeat: no-repeat !important;
+  background-position-x: calc(100% - 8px) !important;
+  background-position-y: 55% !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+}
+
+.c11:hover {
+  color: #171A1C;
+  border-color: #73848C;
+}
+
+.c11:focus {
+  outline: none;
+  color: #171A1C;
+  border-color: #454F54;
+}
+
+.c11:disabled {
+  color: #ABB5BA;
+  border-color: #E3E6E8;
+  cursor: not-allowed;
+}
+
 .c6 {
  position: relative;
 }
@ -958,7 +1030,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
  outline: none;
 }

-.c11 {
+.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -976,7 +1048,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
  padding-bottom: 16px;
 }

-.c12 {
+.c13 {
  color: #73848C;
  font-size: 12px;
  display: -webkit-box;
@ -985,7 +1057,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
  display: flex;
 }

-.c13 {
+.c14 {
  color: #171A1C;
  padding-right: 6px;
  height: 12px;
@ -1119,33 +1191,33 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
          class="select-wrapper c6"
        >
          <select
-            class="c7"
+            class="c11"
          >
            <option
              value="FORWARD"
            >
-              Oldest first
+              Oldest First
            </option>
            <option
              value="BACKWARD"
            >
-              Newest first
+              Newest First
            </option>
          </select>
        </div>
      </div>
      <div
-        class="c11"
+        class="c12"
      >
        <p
          style="font-size: 14px;"
        />
        <div
-          class="c12"
+          class="c13"
          title="Elapsed Time"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="far fa-clock"
@ -1157,11 +1229,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
          </span>
        </div>
        <div
-          class="c12"
+          class="c13"
          title="Bytes Consumed"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="fas fa-arrow-down"
@ -1172,11 +1244,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
          </span>
        </div>
        <div
-          class="c12"
+          class="c13"
          title="Messages Consumed"
        >
          <div
-            class="c13"
+            class="c14"
          >
            <i
              class="far fa-file-alt"
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@ -55,7 +55,7 @@ const Overview: React.FC<Props> = ({
          >
            <Metrics.RedText>{underReplicatedPartitions}</Metrics.RedText>
          </Metrics.Indicator>
-          <Metrics.Indicator label="In sync replicas" isAlert>
+          <Metrics.Indicator label="In Sync Replicas" isAlert>
            {inSyncReplicas && replicas && inSyncReplicas < replicas ? (
              <Metrics.RedText>{inSyncReplicas}</Metrics.RedText>
            ) : (
@ -71,7 +71,7 @@ const Overview: React.FC<Props> = ({
          <Metrics.Indicator label="Segment Size" title="">
            <BytesFormatted value={segmentSize} />
          </Metrics.Indicator>
-          <Metrics.Indicator label="Segment count">
+          <Metrics.Indicator label="Segment Count">
            {segmentCount}
          </Metrics.Indicator>
          <Metrics.Indicator label="Clean Up Policy">
@ -84,9 +84,9 @@ const Overview: React.FC<Props> = ({
          <thead>
            <tr>
              <TableHeaderCell title="Partition ID" />
-              <TableHeaderCell title="Broker leader" />
-              <TableHeaderCell title="Min offset" />
-              <TableHeaderCell title="Max offset" />
+              <TableHeaderCell title="Broker Leader" />
+              <TableHeaderCell title="Min Offset" />
+              <TableHeaderCell title="Max Offset" />
              <TableHeaderCell title=" " />
            </tr>
          </thead>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
@ -36,7 +36,7 @@ const Settings: React.FC<Props> = ({
          <tr>
            <TableHeaderCell title="Key" />
            <TableHeaderCell title="Value" />
-            <TableHeaderCell title="Default value" />
+            <TableHeaderCell title="Default Value" />
          </tr>
        </thead>
        <tbody>
--- a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
+++ b/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
@ -3,6 +3,7 @@ import styled from 'styled-components';
 interface Props {
  selectSize: 'M' | 'L';
  isLive?: boolean;
+  minWidth?: string;
 }

 export const Select = styled.select<Props>`
@ -14,6 +15,7 @@ export const Select = styled.select<Props>`
  padding-left: ${(props) => (props.isLive ? '36px' : '12px')};
  padding-right: 16px;
  color: ${(props) => props.theme.selectStyles.color.normal};
+  min-width: ${({ minWidth }) => minWidth || 'auto' };

  background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
  background-repeat: no-repeat !important;
--- a/kafka-ui-react-app/src/components/common/Select/Select.tsx
+++ b/kafka-ui-react-app/src/components/common/Select/Select.tsx
@ -11,6 +11,7 @@ export interface SelectProps
  selectSize?: 'M' | 'L';
  isLive?: boolean;
  hookFormOptions?: RegisterOptions;
+  minWidth?: string;
 }

 const Select: React.FC<SelectProps> = ({