add dropdown for toggling settings on small screens

meetulr · meetulr · commit c3fb6a64eb3c · 2024-01-31T17:44:50.000+05:30
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -446,16 +446,15 @@
   "orgSettings": {
     "title": "Talawa Setting",
     "pageName": "Settings",
-    "generalSettings": "General",
-    "actionItemCategorySettings": "Action Item Categories",
+    "general": "General",
+    "actionItemCategories": "Action Item Categories",
     "updateOrganization": "Update Organization",
     "seeRequest": "See Request",
     "settings": "Settings",
     "noData": "No data",
     "otherSettings": "Other Settings",
     "changeLanguage": "Change Language",
-    "manageCustomFields": "Manage Custom Fields",
-    "actionItemCategories": "Action Item Categories"
+    "manageCustomFields": "Manage Custom Fields"
   },
   "deleteOrg": {
     "deleteOrganization": "Delete Organization",
diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -441,8 +441,8 @@
   "orgSettings": {
     "title": "Paramètre Talawa",
     "pageName": "Paramètres",
-    "generalSettings": "Général",
-    "actionItemCategorySettings": "Catégories d’éléments d’action",
+    "general": "Général",
+    "actionItemCategories": "Catégories d’éléments d’action",
     "updateYourDetails": "Mettre à jour vos informations",
     "updateYourPassword": "Mettez à jour votre mot de passe",
     "updateOrganization": "Mettre à jour l'organisation",
@@ -451,8 +451,7 @@
     "noData": "Pas de données",
     "otherSettings": "Autres paramètres",
     "changeLanguage": "Changer la langue",
-    "manageCustomFields": "Gérer les Champs Personnalisés",
-    "actionItemCategories": "Catégories d’éléments d’action"
+    "manageCustomFields": "Gérer les Champs Personnalisés"
   },
   "deleteOrg": {
     "deleteOrganization": "Supprimer l'organisation",
diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -441,8 +441,8 @@
   "orgSettings": {
     "title": "तलावा सेटिंग",
     "pageName": "सेटिंग्स",
-    "generalSettings": "सामान्य",
-    "actionItemCategorySettings": "कार्रवाई आइटम श्रेणियाँ",
+    "general": "सामान्य",
+    "actionItemCategories": "कार्रवाई आइटम श्रेणियाँ",
     "updateYourDetails": "अपना विवरण अपडेट करें",
     "updateYourPassword": "अपना पासवर्ड अपडेट करें",
     "updateOrganization": "अद्यतन संगठन",
@@ -451,8 +451,7 @@
     "noData": "कोई डेटा नहीं",
     "otherSettings": "अन्य सेटिंग्स",
     "changeLanguage": "भाषा बदलें",
-    "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें",
-    "actionItemCategories": "कार्रवाई आइटम श्रेणियाँ"
+    "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें"
   },
   "deleteOrg": {
     "deleteOrganization": "संगठन हटाएं",
diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -440,8 +440,8 @@
   "orgSettings": {
     "title": "Configuración Talawa",
     "pageName": "Configuración",
-    "generalSettings": "General",
-    "actionItemCategorySettings": "Categorías de elementos de acción",
+    "general": "General",
+    "actionItemCategories": "Categorías de elementos de acción",
     "updateYourDetails": "Actualiza tus datos",
     "updateYourPassword": "Actualice su contraseña",
     "updateOrganization": "Actualizar Organización",
@@ -450,8 +450,7 @@
     "noData": "Sin datos",
     "otherSettings": "Otras Configuraciones",
     "changeLanguage": "Cambiar Idioma",
-    "manageCustomFields": "Gestionar Campos Personalizados",
-    "actionItemCategories": "Categorías de elementos de acción"
+    "manageCustomFields": "Gestionar Campos Personalizados"
   },
   "deleteOrg": {
     "deleteOrganization": "Eliminar organización",
diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -441,8 +441,8 @@
   "orgSettings": {
     "title": "塔拉瓦設置",
     "pageName": "设置",
-    "generalSettings": "一般",
-    "actionItemCategorySettings": "措施项类别",
+    "general": "一般",
+    "actionItemCategories": "措施项类别",
     "updateYourDetails": "更新您的詳細信息",
     "updateYourPassword": "更新您的密碼",
     "updateOrganization": "更新組織",
@@ -451,8 +451,7 @@
     "noData": "沒有數據",
     "otherSettings": "其他设置",
     "changeLanguage": "更改语言",
-    "manageCustomFields": "管理自定义字段",
-    "actionItemCategories": "措施项类别"
+    "manageCustomFields": "管理自定义字段"
   },
   "deleteOrg": {
     "deleteOrganization": "删除组织",
diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css
@@ -34,3 +34,20 @@ hr {
   height: 1px;
   background-color: var(--bs-gray-500);
 }
+
+.settingsTabs {
+  display: none;
+}
+
+@media (min-width: 577px) {
+  .settingsDropdown {
+    display: none;
+    border: 1px solid black;
+  }
+}
+
+@media (min-width: 577px) {
+  .settingsTabs {
+    display: block;
+  }
+}
diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
@@ -12,6 +12,7 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
 import OrgSettings from './OrgSettings';
 import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import userEvent from '@testing-library/user-event';
 
 const MOCKS = [
   {
@@ -127,7 +128,7 @@ describe('Organisation Settings Page', () => {
     window.location.assign('/orgsetting/id=123');
     localStorage.setItem('UserType', 'SUPERADMIN');
 
-    const { getByText, queryByText } = render(
+    const { queryByText } = render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
           <Provider store={store}>
@@ -140,14 +141,14 @@ describe('Organisation Settings Page', () => {
     );
 
     await waitFor(() => {
-      fireEvent.click(getByText(translations.actionItemCategorySettings));
+      userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
       expect(
         queryByText(translations.actionItemCategories)
       ).toBeInTheDocument();
     });
 
     await waitFor(() => {
-      fireEvent.click(getByText(translations.generalSettings));
+      userEvent.click(screen.getByTestId('generalSettings'));
       expect(queryByText(translations.updateOrganization)).toBeInTheDocument();
     });
   });
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx
@@ -3,26 +3,31 @@ import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLang
 import DeleteOrg from 'components/DeleteOrg/DeleteOrg';
 import OrgUpdate from 'components/OrgUpdate/OrgUpdate';
 import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
-import { Button, Card, Form } from 'react-bootstrap';
+import { Button, Card, Dropdown, Form } from 'react-bootstrap';
+import type { DropDirection } from 'react-bootstrap/esm/DropdownContext';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import { useTranslation } from 'react-i18next';
 import styles from './OrgSettings.module.css';
 import OrgProfileFieldSettings from 'components/OrgProfileFieldSettings/OrgProfileFieldSettings';
 import OrgActionItemCategories from 'components/OrgActionItemCategories/OrgActionItemCategories';
 
-type SettingType = 'General' | 'ActionItemCategories';
+type SettingType = 'general' | 'actionItemCategories';
 
 function orgSettings(): JSX.Element {
   const { t } = useTranslation('translation', {
     keyPrefix: 'orgSettings',
   });
 
-  const [orgSetting, setOrgSetting] = useState<SettingType>('General');
+  const orgSettings: SettingType[] = ['general', 'actionItemCategories'];
+
+  const [orgSetting, setOrgSetting] = useState<SettingType>('general');
 
   document.title = t('title');
   const orgId = window.location.href.split('=')[1];
 
+  const dropDirection: DropDirection = 'down';
+
   return (
     <>
       <OrganizationScreen screenName="Settings" title={t('pageName')}>
@@ -31,34 +36,57 @@ function orgSettings(): JSX.Element {
         >
           <Row className="mx-3 mt-4">
             <Col>
-              <Button
-                className="me-3 border rounded-3"
-                variant={
-                  orgSetting === 'General' ? `success` : `outline-secondary`
-                }
-                onClick={() => setOrgSetting('General')}
-              >
-                {t('generalSettings')}
-              </Button>
-              <Button
-                className="border rounded-3"
-                variant={
-                  orgSetting === 'ActionItemCategories'
-                    ? `success`
-                    : `outline-secondary`
-                }
-                onClick={() => setOrgSetting('ActionItemCategories')}
+              <div className={styles.settingsTabs}>
+                {orgSettings.map((setting, index) => (
+                  <Button
+                    key={index}
+                    className="me-3 border rounded-3"
+                    variant={
+                      orgSetting === setting ? `success` : `outline-secondary`
+                    }
+                    onClick={() => setOrgSetting(setting)}
+                    data-testid={`${setting}Settings`}
+                  >
+                    {t(setting)}
+                  </Button>
+                ))}
+              </div>
+
+              <Dropdown
+                className={styles.settingsDropdown}
+                data-testid="settingsDropdownContainer"
+                drop={dropDirection}
               >
-                {t('actionItemCategorySettings')}
-              </Button>
+                <Dropdown.Toggle
+                  variant="success"
+                  id="dropdown-basic"
+                  data-testid="settingsDropdownToggle"
+                >
+                  <span className="me-1">{t(orgSetting)}</span>
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  {orgSettings.map((setting, index) => (
+                    <Dropdown.Item
+                      key={index}
+                      onClick={
+                        /* istanbul ignore next */
+                        () => setOrgSetting(setting)
+                      }
+                      className={orgSetting === setting ? 'text-secondary' : ''}
+                    >
+                      {t(setting)}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
             </Col>
 
             <Row className="mt-3">
               <hr />
             </Row>
           </Row>
 
-          {orgSetting === 'General' && (
+          {orgSetting === 'general' && (
             <Row className={`${styles.settingsBody} mt-3`}>
               <Col lg={7}>
                 <Card className="rounded-4 mb-4 mx-auto shadow-sm border border-light-subtle">
@@ -103,7 +131,7 @@ function orgSettings(): JSX.Element {
             </Row>
           )}
 
-          {orgSetting === 'ActionItemCategories' && (
+          {orgSetting === 'actionItemCategories' && (
             <Row
               className={`${styles.actionItemStyles} mt-3 mb-3 mx-4 position-relative shadow-sm rounded-4`}
             >
