userdashboard/AiReportExplanation: add switch component to display/hi…

…de ai explanation on frontend with test

adhocracy-plus/assets/scss/components/_button.scss

@@ -350,3 +350,35 @@
         padding-right: 0.5rem;
     }
 }
+
+.btn-switch {
+    display: flex;
+}
+
+.btn-switch__switch {
+    display: inline-block;
+    width: 36px;
+    height: 22px;
+    margin-inline-end: 0.5 * $spacer;
+    border: 2px solid $brand-primary;
+    background-color: $brand-primary;
+    border-radius: 20px;
+
+}
+
+.btn-switch__adjuster {
+    display: inline-block;
+    border: 9px solid $body-bg;
+    border-radius: 50px;
+}
+
+[aria-pressed="false"] .btn-switch__switch,
+[aria-checked="false"] .btn-switch__switch {
+    border-color: $brand-secondary;
+    background-color: $brand-secondary;
+}
+
+[aria-pressed="true"] .btn-switch__adjuster,
+[aria-checked="true"] .btn-switch__adjuster {
+    transform: translate(14px);
+}

apps/contrib/assets/SwitchButton.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+export const SwitchButton = (props) => {
+  const [isChecked, setIsChecked] = useState(false)
+
+  const toggleIsChecked = () => {
+    setIsChecked(!isChecked)
+  }
+
+  return (
+    <button
+      id={props.id}
+      className="btn-switch"
+      aria-labelledby={'switch-id-' + props.id}
+      role="switch"
+      aria-checked={isChecked}
+      onClick={toggleIsChecked}
+    >
+      <span className="btn-switch__switch">
+        <span className="btn-switch__adjuster" />
+      </span>
+      <span
+        id={'switch-id-' + props.id}
+      >
+        {props.switchLabel}
+      </span>
+    </button>
+  )
+}

apps/contrib/assets/__tests__/SwitchButton.jest.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { SwitchButton } from '../SwitchButton'
+
+test('Show button correctly', () => {
+  render(
+    <SwitchButton
+      switchLabel="This is the label for the switch"
+    />
+  )
+  expect(screen.getByText('This is the label for the switch')).toBeInTheDocument()
+})
+
+test('Switch button should change state onclick', () => {
+  const { getByRole } = render(<SwitchButton />)
+  const switchButton = getByRole('switch')
+
+  expect(switchButton).toHaveAttribute('aria-checked', 'false')
+  fireEvent.click(switchButton)
+  expect(switchButton).toHaveAttribute('aria-checked', 'true')
+  fireEvent.click(switchButton)
+  // State should be updated back to false after the second click
+  expect(switchButton).toHaveAttribute('aria-checked', 'false')
+})

apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import django from 'django'
+import { SwitchButton } from '../../../../../apps/contrib/assets/SwitchButton'
 
 const translated = {
   intro: django.gettext('This comment contains disinformation. Defakts uses an Artificial ' +
@@ -11,31 +12,39 @@ const translated = {
   readLess: django.gettext('Read less')
 }
 
-export const AIReportExplanation = ({ AIReport }) => {
+export const AiReportExplanation = ({ AIReport, notificationPk }) => {
   const [isExpanded, setIsExpanded] = useState()
 
   const toggleExpand = () => {
     setIsExpanded(!isExpanded)
   }
 
   return (
-    <li className="alert alert--danger d-flex text-start mb-3">
-      <i
-        className="fas fa-exclamation-circle text-danger pt-1 pe-2"
-        aria-hidden="True"
-      />
-      <p>
-        {translated.intro + ' '}
-        {isExpanded && AIReport + ' '}
-        <button
-          className="btn--link text-danger"
-          type="button"
-          onClick={toggleExpand}
-          aria-label={isExpanded ? translated.ariaReadLess : translated.ariaReadMore}
-        >
-          {isExpanded ? translated.readLess : translated.readMore}
-        </button>
-      </p>
+    <li className="alert alert--danger mb-3">
+      <div className="d-flex text-start mb-4">
+        <i
+          className="fas fa-exclamation-circle text-danger pt-1 pe-2"
+          aria-hidden="True"
+        />
+        <p>
+          {translated.intro + ' '}
+          {isExpanded && AIReport + ' '}
+          <button
+            className="btn--link text-danger"
+            type="button"
+            onClick={toggleExpand}
+            aria-label={isExpanded ? translated.ariaReadLess : translated.ariaReadMore}
+          >
+            {isExpanded ? translated.readLess : translated.readMore}
+          </button>
+        </p>
+      </div>
+      <div className="d-flex text-start">
+        <SwitchButton
+          id={notificationPk}
+          switchLabel={translated.readLess}
+        />
+      </div>
     </li>
   )
 }

apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx

@@ -8,7 +8,9 @@ export const ModerationFeedback = (props) => {
     delete: django.gettext('delete'),
     edit: django.gettext('edit'),
     feedbackTitle: django.gettext('Moderator\'s feedback'),
-    editWasOn: django.gettext('Last edit was on ')
+    editWasOn: django.gettext('Last edit was on '),
+    feedbackMenu: django.gettext('Feedback menu')
+
   }
 
   return (
@@ -21,7 +23,7 @@ export const ModerationFeedback = (props) => {
           <div className="text-end">
             <div className="dropdown">
               <button
-                title="{% trans 'Feedback menu' %}"
+                title={translated.feedbackMenu}
                 type="button"
                 className="dropdown-toggle btn btn--none"
                 aria-haspopup="true"

apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx

@@ -23,6 +23,7 @@ const translated = {
   notificationUnread: django.gettext('Notification successfully marked as unread.'),
   aiClassified: django.gettext('AI'),
   postedComment: django.gettext('posted a {}comment{}'),
+  notificationMenu: django.gettext('Notification menu'),
   dummyText: django.gettext('Dummy text')
 
 }
@@ -272,7 +273,7 @@ export const ModerationNotification = (props) => {
           <div className="ms-auto">
             <div className="dropdown">
               <button
-                title="{% trans 'Notification menu' %}"
+                title={translated.notificationMenu}
                 type="button"
                 className="dropdown-toggle btn btn--none"
                 aria-haspopup="true"
@@ -307,7 +308,10 @@ export const ModerationNotification = (props) => {
           <p>{commentText}</p>
         </li>
         {/* FIXME add if once report added to serializer */}
-        <AiReportExplanation AiReport={translated.dummyText} />
+        <AiReportExplanation
+          AiReport={translated.dummyText}
+          notificationPk={notification.pk}
+        />
         <ModerationNotificationActionsBar
           itemPk={notification.pk}
           isEditing={notification.moderator_feedback}

changelog/7542.md

@@ -0,0 +1,4 @@
+### Added
+
+- general switch button react component
+- switch button to AIreportExplanation component

docs/ai_report.md

@@ -2,3 +2,4 @@ FIXME add docs for AI report, for now just list coresponding files
 
 ### React components
 apps/userdashboard/assets/js/a4_candy_userdashboard/AiReportExplanation.jsx
+apps/contrib/assets/SwitchButton.jsx