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>

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>

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

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,

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>

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>

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>

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">

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>

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>

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>

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 && (

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>

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"

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>

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>

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;

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> = ({