Fixes checkbox bug (#823)

Author: daniellemaxwell

web/beacon-app/src/components/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,26 @@
+export interface CheckboxProps {
+  onClick?: () => void;
+  containerClassName?: string;
+  id?: string;
+  label: string;
+  dataCy?: string;
+}
+
+function Checkbox({ onClick, containerClassName, id, label, dataCy }: CheckboxProps) {
+  return (
+    <div className={containerClassName}>
+      <input
+        type="checkbox"
+        id={id}
+        className="border-2 border-gray-600"
+        onChange={onClick}
+        data-cy={dataCy}
+      />
+      <label htmlFor={id} className="ml-2">
+        {label}
+      </label>
+    </div>
+  );
+}
+
+export default Checkbox;

web/beacon-app/src/features/topics/components/Modal/RevokeAPIKeyModal.tsx

@@ -1,9 +1,9 @@
 import { t, Trans } from '@lingui/macro';
-import { Button, Checkbox, Modal } from '@rotational/beacon-core';
+import { Button, Modal } from '@rotational/beacon-core';
 import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import styled from 'styled-components';
 
+import Checkbox from '@/components/common/Checkbox/Checkbox';
 import { useDeleteAPIKey } from '@/features/apiKeys/hooks/useDeleteApiKey';
 import { APIKey } from '@/features/apiKeys/types/apiKeyService';
 type RevokeAPIKeyModalProps = {
@@ -92,15 +92,13 @@ const RevokeAPIKeyModal = ({ onOpen, onClose }: RevokeAPIKeyModalProps) => {
         <div className="pb-6" data-cy="api-key-name">
           <span className="font-bold">Key Name:</span> {key?.name}
         </div>
-        <CheckboxFieldset onClick={handleCheckboxChange} className="pb-8" data-cy="revoke-checkbox">
-          <div className="flex items-start">
-            <Checkbox></Checkbox>
-            <Trans>
-              I understand that revoking the API key will cause publishers and subscribers to lose
-              access to the event stream (topic) and may impact performance.
-            </Trans>
-          </div>
-        </CheckboxFieldset>
+        <Checkbox
+          id="revokeApiKey"
+          label={t`I understand that revoking the API key will cause publishers and subscribers to lose access to the event stream (topic) and may impact performance.`}
+          containerClassName="pb-8"
+          onClick={handleCheckboxChange}
+          dataCy="revoke-api-key-checkbox"
+        ></Checkbox>
         <div className="mx-auto w-[150px] pb-4">
           <Button
             variant="secondary"
@@ -127,10 +125,4 @@ const RevokeAPIKeyModal = ({ onOpen, onClose }: RevokeAPIKeyModalProps) => {
   );
 };
 
-const CheckboxFieldset = styled.fieldset`
-  label svg {
-    min-width: 23px;
-  }
-`;
-
 export default RevokeAPIKeyModal;

web/beacon-app/src/locales/cs/messages.po

@@ -189,7 +189,7 @@ msgstr ""
 msgid "CAUTION!"
 msgstr ""
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:122
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:120
 msgid "Cancel"
 msgstr ""
 
@@ -594,7 +594,7 @@ msgstr ""
 #~ msgid "I agree to the Rotational Labs Inc."
 #~ msgstr ""
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:98
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:97
 msgid "I understand that revoking the API key will cause publishers and subscribers to lose access to the event stream (topic) and may impact performance."
 msgstr ""
 
@@ -1007,7 +1007,7 @@ msgstr ""
 
 #: src/features/projects/util.ts:45
 #: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:71
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:112
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:110
 msgid "Revoke API Key"
 msgstr ""
 

web/beacon-app/src/locales/en/messages.po

@@ -189,7 +189,7 @@ msgstr "By continuing, you're agreeing to the Rotational Labs Inc."
 msgid "CAUTION!"
 msgstr "CAUTION!"
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:122
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:120
 msgid "Cancel"
 msgstr "Cancel"
 
@@ -594,7 +594,7 @@ msgstr "Home"
 #~ msgid "I agree to the Rotational Labs Inc."
 #~ msgstr "I agree to the Rotational Labs Inc."
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:98
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:97
 msgid "I understand that revoking the API key will cause publishers and subscribers to lose access to the event stream (topic) and may impact performance."
 msgstr "I understand that revoking the API key will cause publishers and subscribers to lose access to the event stream (topic) and may impact performance."
 
@@ -1007,7 +1007,7 @@ msgstr "Reset password request failed."
 
 #: src/features/projects/util.ts:45
 #: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:71
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:112
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:110
 msgid "Revoke API Key"
 msgstr "Revoke API Key"
 

web/beacon-app/src/locales/fr/messages.po

@@ -189,7 +189,7 @@ msgstr ""
 msgid "CAUTION!"
 msgstr ""
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:122
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:120
 msgid "Cancel"
 msgstr ""
 
@@ -594,7 +594,7 @@ msgstr ""
 #~ msgid "I agree to the Rotational Labs Inc."
 #~ msgstr ""
 
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:98
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:97
 msgid "I understand that revoking the API key will cause publishers and subscribers to lose access to the event stream (topic) and may impact performance."
 msgstr ""
 
@@ -1007,7 +1007,7 @@ msgstr ""
 
 #: src/features/projects/util.ts:45
 #: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:71
-#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:112
+#: src/features/topics/components/Modal/RevokeAPIKeyModal.tsx:110
 msgid "Revoke API Key"
 msgstr ""