fix sonar

asyncapi · Apr 3, 2024 · 66d6f6f · 66d6f6f
1 parent 98d78e2
commit 66d6f6f
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 35 deletions.
diff --git a/apps/studio-next/src/components/Modals/Settings/SettingsTabs.tsx b/apps/studio-next/src/components/Modals/Settings/SettingsTabs.tsx
@@ -36,6 +36,10 @@ export const SettingsTabs: FunctionComponent<SettingTabsProps> = ({
               key={tab.name}
               className="cursor-pointer"
               onClick={() => setActiveTab(tab.name)}
+              tabIndex={0}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') setActiveTab(tab.name);
+              }}
             >
               <div
                 className={`p-2 hover:text-pink-500 ${

diff --git a/apps/studio-next/src/components/Terminal/TerminalInfo.tsx b/apps/studio-next/src/components/Terminal/TerminalInfo.tsx
@@ -7,7 +7,7 @@ import { ConvertToLatestModal } from '../Modals';
 import { useServices } from '../../services';
 import { useAppState, useDocumentsState, useFilesState, useSettingsState } from '../../state';
 
-import type { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import type { FunctionComponent } from 'react';
 
 interface TerminalInfoProps {}
 
@@ -21,7 +21,7 @@ export const TerminalInfo: FunctionComponent<TerminalInfoProps> = () => {
   const actualVersion = document.document?.version() || '2.0.0';
   const latestVersion = specificationSvc.latestVersion;
 
-  const onNonLatestClick = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
+  const onNonLatestClick = useCallback((e: {stopPropagation: ()=>void}) => {
     e.stopPropagation();
     show(ConvertToLatestModal);
   }, []);
@@ -92,7 +92,12 @@ export const TerminalInfo: FunctionComponent<TerminalInfoProps> = () => {
         <span>{autoSaving ? 'Autosave: On' : 'Autosave: Off'}</span>
       </div>
       {actualVersion !== latestVersion && document.valid === true && (
-        <div className="ml-3" onClick={onNonLatestClick}>
+        <div className="ml-3" 
+          onClick={onNonLatestClick}
+          tabIndex={0}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') onNonLatestClick(event);
+          }}>
           <span className="text-yellow-500">
             <svg xmlns="http://www.w3.org/2000/svg" className="inline-block h-5 w-5 mr-1 -mt-0.5" viewBox="0 0 20 20" fill="currentColor">
               <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />

diff --git a/apps/studio-next/src/components/Terminal/TerminalTabs.tsx b/apps/studio-next/src/components/Terminal/TerminalTabs.tsx
@@ -14,6 +14,33 @@ interface TerminalTabsProps {
   active?: string;
 }
 
+const onTerminalTabClickHandler = (e: {currentTarget: {parentElement: any}}) => {
+  const clientRects = e.currentTarget.parentElement?.parentElement?.getClientRects()[0];
+  if (!clientRects) return;
+
+  const height = clientRects.height;
+  const calc160px = 'calc(100% - 160px)';
+  const calc36px = 'calc(100% - 36px)';
+
+  const prevHeight = otherState.getState().editorHeight;
+  const newHeight =
+    height < 50 ? calc160px : calc36px;
+  if (
+    prevHeight === calc160px &&
+    newHeight === calc160px
+  ) {
+    return 'calc(100% - 161px)';
+  }
+  if (
+    prevHeight === calc36px &&
+    newHeight === calc36px
+  ) {
+    return 'calc(100% - 37px)';
+  }
+
+  otherState.setState({ editorHeight: newHeight });
+}
+
 export const TerminalTabs: React.FunctionComponent<TerminalTabsProps> = ({
   tabs = [],
   active = 0,
@@ -29,39 +56,18 @@ export const TerminalTabs: React.FunctionComponent<TerminalTabsProps> = ({
     <div>
       <div
         className="flex flex-row justify-between items-center px-2 border-b border-gray-700 text-white uppercase font-bold text-xs cursor-pointer"
-        onClick={e => {
-          const clientRects = e.currentTarget.parentElement?.parentElement?.getClientRects()[0];
-          if (!clientRects) return;
-
-          const height = clientRects.height;
-          const calc160px = 'calc(100% - 160px)';
-          const calc36px = 'calc(100% - 36px)';
-
-          const prevHeight = otherState.getState().editorHeight;
-          const newHeight =
-            height < 50 ? calc160px : calc36px;
-          if (
-            prevHeight === calc160px &&
-            newHeight === calc160px
-          ) {
-            return 'calc(100% - 161px)';
-          }
-          if (
-            prevHeight === calc36px &&
-            newHeight === calc36px
-          ) {
-            return 'calc(100% - 37px)';
-          }
-
-          otherState.setState({ editorHeight: newHeight });
-        }}
+        onClick={onTerminalTabClickHandler}
+        tabIndex={0}
+        onKeyDown={onTerminalTabClickHandler}
       >
         <ul className="flex flex-row">
           {!isV3 && tabs.map(tab => (
             <li
               key={tab.name}
               className="px-2 cursor-pointer"
               onClick={() => setActiveTab(tab.name)}
+              tabIndex={0}
+              onKeyDown={() => setActiveTab(tab.name)}
             >
               <div
                 className={`py-2 hover:text-white ${

diff --git a/apps/studio-next/src/components/common/Dropdown.tsx b/apps/studio-next/src/components/common/Dropdown.tsx
@@ -28,6 +28,8 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
     <div className={className}>
       <button
         onClick={() => setOpen(!open)}
+        tabIndex={0}
+        onKeyDown={() => setOpen(!open)}
         type="button"
         className={`flex p-2 text-sm rounded-md ${buttonHoverClassName} focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150`}
       >
@@ -36,6 +38,8 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
       <div
         ref={dropdownRef}
         onClick={() => setOpen(false)}
+        tabIndex={0}
+        onKeyDown={() => setOpen(false)}
         className={`${
           open ? 'visible' : 'invisible'
         } origin-top-right absolute ${align === 'right' &&

diff --git a/apps/studio-next/src/components/common/Switch.tsx b/apps/studio-next/src/components/common/Switch.tsx
@@ -11,13 +11,17 @@ export const Switch: React.FunctionComponent<SwitchProps> = ({
 }) => {
   const [toggle, setToggle] = useState(initToggle);
 
+  const onClickHandler = (e: any) => {
+    const newValue = !toggle;
+    setToggle(newValue);
+    onChange(newValue);
+  }
+
   return (
     <div 
-      onClick={() => {
-        const newValue = !toggle;
-        setToggle(newValue);
-        onChange(newValue);
-      }}
+      onClick={onClickHandler}
+      tabIndex={0}
+      onKeyDown={onClickHandler}
     >
       <label 
         htmlFor="toggle"
@@ -32,4 +36,4 @@ export const Switch: React.FunctionComponent<SwitchProps> = ({
       </label>
     </div>
   );
-};
+};