feat: change default filter on form list to 'Open'

web/frontend/src/language/de.json

@@ -247,7 +247,6 @@
     "nodes": "Knotenpunkte",
     "DKGStatuses": "DKG-Status",
     "proxies": "Proxys",
-    "filterByStatus": "Nach Status filtern",
     "all": "Alle",
     "resetFilter": "Filter zurücksetzen",
     "showingNOverMOfXResults": "Zeigt {{n}}/{{m}} von {{x}} Ergebnissen.",

web/frontend/src/language/en.json

@@ -249,7 +249,6 @@
     "nodes": "Nodes",
     "DKGStatuses": "DKG Statuses",
     "proxies": "Proxies",
-    "filterByStatus": "Filter by status",
     "all": "All",
     "resetFilter": "Reset filter",
     "showingNOverMOfXResults": "Showing {{n}}/{{m}} of {{x}} results.",

web/frontend/src/language/fr.json

@@ -247,7 +247,6 @@
     "nodes": "Noeuds",
     "DKGStatuses": "Les statuts du DKG",
     "proxies": "Proxies",
-    "filterByStatus": "Filtrer par statut",
     "all": "Tout",
     "resetFilter": "Réinitialiser le filtre",
     "showingNOverMOfXResults": "Montrer {{n}}/{{m}} de {{x}} résultats.",

web/frontend/src/pages/form/Index.tsx

@@ -14,7 +14,7 @@ const FormIndex: FC = () => {
   const fctx = useContext(FlashContext);
   const pctx = useContext(ProxyContext);
 
-  const [statusToKeep, setStatusToKeep] = useState<Status>(null);
+  const [statusToKeep, setStatusToKeep] = useState<Status>(Status.Open);
   const [forms, setForms] = useState<LightFormInfo[]>(null);
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState({ Forms: null });
@@ -47,7 +47,7 @@ const FormIndex: FC = () => {
 
   // Apply the filter statusToKeep
   useEffect(() => {
-    if (data === null) return;
+    if (data.Forms === null) return;
 
     if (statusToKeep === null) {
       setForms(data.Forms);

web/frontend/src/pages/form/components/FormTableFilter.tsx

@@ -14,7 +14,7 @@ type FormTableFilterProps = {
 
 const FormTableFilter: FC<FormTableFilterProps> = ({ setStatusToKeep }) => {
   const { t } = useTranslation();
-  const [filterByText, setFilterByText] = useState(t('filterByStatus') as string);
+  const [filterByText, setFilterByText] = useState(t('statusOpen') as string);
 
   const handleClick = (statusToKeep: Status, filterText) => {
     setStatusToKeep(statusToKeep);
@@ -41,18 +41,6 @@ const FormTableFilter: FC<FormTableFilterProps> = ({ setStatusToKeep }) => {
           leaveTo="transform opacity-0 scale-95">
           <Menu.Items className="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div className="py-1">
-              <Menu.Item>
-                {({ active }) => (
-                  <button
-                    onClick={() => handleClick(Status.Initial, t('statusInitial'))}
-                    className={classNames(
-                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                      'block px-4 py-2 text-sm w-full text-left'
-                    )}>
-                    {t('statusInitial')}
-                  </button>
-                )}
-              </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
                   <button
@@ -128,7 +116,7 @@ const FormTableFilter: FC<FormTableFilterProps> = ({ setStatusToKeep }) => {
               <Menu.Item>
                 {({ active }) => (
                   <button
-                    onClick={() => handleClick(null, t('filterByStatus'))}
+                    onClick={() => handleClick(null, t('all'))}
                     className={classNames(
                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                       'block px-4 py-2 text-sm w-full text-left'
@@ -143,7 +131,7 @@ const FormTableFilter: FC<FormTableFilterProps> = ({ setStatusToKeep }) => {
       </Menu>
       <button
         type="button"
-        onClick={() => handleClick(null, t('filterByStatus'))}
+        onClick={() => handleClick(null, t('statusOpen'))}
         className="text-gray-700 my-2 mx-2 items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:text-[#ff0000]">
         {t('resetFilter')}
       </button>

web/frontend/tests/formIndex.spec.ts

@@ -13,9 +13,14 @@ async function goForward(page: Page) {
   await page.getByRole('button', { name: i18n.t('next') }).click();
 }
 
+async function disableFilter(page: Page) {
+  await page.getByRole('button', { name: i18n.t('statusOpen') }).click();
+  await page.getByRole('menuitem', { name: i18n.t('all'), exact: true }).click();
+}
+
 test.beforeEach(async ({ page }) => {
   // mock empty list per default
-  await mockForms(page);
+  await mockForms(page, 'empty');
   await mockPersonalInfo(page);
   await setUp(page, '/form/index');
 });
@@ -47,10 +52,23 @@ test('Assert pagination works correctly for empty list', async ({ page }) => {
   }
 });
 
-test('Assert pagination works correctly for non-empty list', async ({ page }) => {
+
+test('Assert "Open" is default list filter', async ({ page }) => {
+  await mockForms(page, 'default');
+  await page.reload();
+  const table = await page.getByRole('table');
+  for (let form of Forms.Forms.filter(form => form.Status === 1)) {
+    let name = translate(form.Title);
+    let row = await table.getByRole('row', { name: name });
+    await expect(row).toBeVisible();
+  }
+});
+
+test('Assert pagination works correctly for non-empty list of all forms', async ({ page }) => {
   // mock non-empty list w/ 11 elements i.e. 2 pages
-  await mockForms(page, false);
+  await mockForms(page, 'all');
   await page.reload();
+  await disableFilter(page);
   const next = await page.getByRole('button', { name: i18n.t('next') });
   const previous = await page.getByRole('button', { name: i18n.t('previous') });
   // 1st page
@@ -120,9 +138,10 @@ async function assertQuickAction(row: Locator, form: any, sciper?: string) {
   }
 }
 
-test('Assert forms are displayed correctly for unauthenticated user', async ({ page }) => {
-  await mockForms(page, false);
+test('Assert all forms are displayed correctly for unauthenticated user', async ({ page }) => {
+  await mockForms(page, 'all');
   await page.reload();
+  await disableFilter(page);
   const table = await page.getByRole('table');
   for (let form of Forms.Forms.slice(0, -1)) {
     let name = translate(form.Title);
@@ -140,11 +159,12 @@ test('Assert forms are displayed correctly for unauthenticated user', async ({ p
   await assertQuickAction(row, Forms.Forms.at(-1)!);
 });
 
-test('Assert quick actions are displayed correctly for authenticated users', async ({ page }) => {
+test('Assert quick actions are displayed correctly for authenticated users on all forms', async ({ page }) => {
   for (let sciper of [SCIPER_USER, SCIPER_ADMIN]) {
     await logIn(page, sciper);
-    await mockForms(page, false);
+    await mockForms(page, 'all');
     await page.reload();
+  await disableFilter(page);
     const table = await page.getByRole('table');
     for (let form of Forms.Forms.slice(0, -1)) {
       let row = await table.getByRole('row', { name: translate(form.Title) });

web/frontend/tests/json/formIndexDefault.json

@@ -0,0 +1,114 @@
+{
+  "Forms": [
+    {
+      "FormID": "f1700a27cef992db7eac71f006a1566369d21e4b76933f43e84a2ae23195e678",
+      "Title": {
+        "En": "Colours",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 5,
+      "Pubkey": "d27836cec530a5e4d255ab704547438b8eede9af7ba78833a7da907064613a71"
+    },
+    {
+      "FormID": "6783449fb12c481d8e06a27cfdfb7971ad12dcff2083bfe90be35f44fb572d67",
+      "Title": {
+        "En": "Foo",
+        "Fr": "Toto",
+        "De": ""
+      },
+      "Status": 3,
+      "Pubkey": "ff83fcc6018685fc3b90f5029eec0f948ff57e220b87c538bdb1a5e17f5c549d"
+    },
+    {
+      "FormID": "ed26713245824d44ee46ec90507ef521962f2313706934cdfe76ff1823738109",
+      "Title": {
+        "En": "Christmas Tree",
+        "Fr": "Sapin de Noël",
+        "De": "Weihnachtsbaum"
+      },
+      "Status": 2,
+      "Pubkey": "3964e8383919eafdeb998d6a694d9a8a74a5438d9d00868fdabcb07fa1a1be28"
+    },
+    {
+      "FormID": "fdf8bfb702e8883e330a2b303b24212b6fc16df5a53a097998b77ba74632dc72",
+      "Title": {
+        "En": "Line 6",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 1,
+      "Pubkey": "725502be5772ec458f061abeaeb50f45c0f5c07abd530bfc95334d80f3184fbc"
+    },
+    {
+      "FormID": "4440182e69ef1fbbcdd5cd870e46a59a09fd32a89b8353bab677fe84a5c2f073",
+      "Title": {
+        "En": "RER A",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    },
+    {
+      "FormID": "9f50ad723805a6419ba1a9f83dd0aa582f3e13b94f14727cd0c8c01744e0dba2",
+      "Title": {
+        "En": "Languages",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 1,
+      "Pubkey": "348f56a444e1b75214a9c675587222099007ce739a04651667c054d9be626e07"
+    },
+    {
+      "FormID": "1269a8507dc316a9ec983ede527705078bfef2b151a49f7ffae6e903ef1bb38f",
+      "Title": {
+        "En": "Seasons",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    },
+    {
+      "FormID": "576be424ee2f37699e74f3752b8912c8cdbfa735a939e1c238863d5d2012bb26",
+      "Title": {
+        "En": "Pets",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    },
+    {
+      "FormID": "06861f854608924f42c99f2c78b22263ea79a9b27d6c616de8f73a8cb7d09152",
+      "Title": {
+        "En": "Weather",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    },
+    {
+      "FormID": "f17100c712db07ec81923c33394ff2d5e56146135ce908754ce610b898d9ba1a",
+      "Title": {
+        "En": "Currency",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    },
+    {
+      "FormID": "a3776492297f71c4c0c75f0fd21d3d25a90ea52a60a660f4e2cb5cc3026bd396",
+      "Title": {
+        "En": "Fruits",
+        "Fr": "",
+        "De": ""
+      },
+      "Status": 0,
+      "Pubkey": ""
+    }
+  ]
+}

web/frontend/tests/mocks/evoting.ts

@@ -4,7 +4,7 @@ import Worker2 from './../json/api/proxies/dela-worker-2.json';
 import Worker3 from './../json/api/proxies/dela-worker-3.json';
 import { FORMID } from './shared';
 
-export async function mockForms(page: page, empty: boolean = true) {
+export async function mockForms(page: page, formList: string) {
   // clear current mock
   await page.unroute(`${process.env.DELA_PROXY_URL}/evoting/forms`);
   await page.route(`${process.env.DELA_PROXY_URL}/evoting/forms`, async (route) => {
@@ -16,16 +16,20 @@ export async function mockForms(page: page, empty: boolean = true) {
           'Access-Control-Allow-Origin': '*',
         },
       });
-    } else if (empty) {
+    } else if (formList === 'empty') {
       await route.fulfill({
         status: 200,
         contentType: 'application/json',
         body: '{"Forms": []}',
       });
-    } else {
+    } else if (formList === 'all'){
       await route.fulfill({
         path: './tests/json/formIndex.json',
       });
+    } else if (formList === 'default' ) {
+      await route.fulfill({
+        path: './tests/json/formIndexDefault.json',
+      });
     }
   });
 }