Search UI by corovcam · Pull Request #59 · EOSC-CZ/nma

corovcam · 2025-12-09T08:54:52Z

Applies theme overrides and adds variables for the RDM (Research Data Management) platform. This includes changes to colors, styles, and layouts for various elements and modules to align with the new design.

The changes include:

Adds overrides for collections like tables, grids, and menus.
Adds overrides for elements like buttons, labels, and lists.
Adds overrides for modules like dropdowns and accordions.
Adjusts global styles and variables to ensure consistency across the platform.

These changes improve the overall visual appearance and user experience of the RDM platform.

Adds a new search page for datasets with active filters, result options and result list item components. Includes creatibutor component for handling both persons and organizations. Includes access status component to display access rights information. Implements a new layout for search apps and adjust existing search components.

Applies theme overrides and adds variables for the RDM (Research Data Management) platform. This includes changes to colors, styles, and layouts for various elements and modules to align with the new design. The changes include: - Adds overrides for collections like tables, grids, and menus. - Adds overrides for elements like buttons, labels, and lists. - Adds overrides for modules like dropdowns and accordions. - Adjusts global styles and variables to ensure consistency across the platform. These changes improve the overall visual appearance and user experience of the RDM platform. Related to FE-430

…e dependencies

…rch-stranka-a-vysledky

Copilot

Pull request overview

Copilot reviewed 49 out of 60 changed files in this pull request and generated 19 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-10T11:52:05Z

+  }
+
+  .svg-container {
+    flex: 0 1 350px;;


Extra semicolon after CSS value. Line 21 has flex: 0 1 350px;; with two semicolons. While browsers are generally forgiving, this is invalid CSS syntax and should be fixed:

flex: 0 1 350px;

…rch-stranka-a-vysledky

… Creatibutors component

…rch-stranka-a-vysledky

mirekys · 2025-12-12T16:35:26Z

Pls rebase this PR, there are many files deleted that shouldn't be deleted (e.g. .variables, .overrides)

…rch-stranka-a-vysledky

mirekys · 2025-12-12T16:38:52Z

+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 148px;


Use rems or even better vh unit to position on screen

mirekys · 2025-12-12T16:39:10Z

+  flex-direction: column;
+  position: fixed;
+  bottom: 148px;
+  right: 44px;


mirekys · 2025-12-12T16:39:49Z

+  }
+
+  @media screen and (max-width: 1679px) {
+    bottom: 90px;


mirekys · 2025-12-12T16:40:26Z

+
+  @media screen and (max-width: 768px) {
+    right: 25px;
+    bottom: 148px;


And here, pixels doesnt work well on devices with various DPI, scaling

mirekys · 2025-12-12T16:41:13Z

+  }
+}
+
+#user-profile-menu.ui.menu {


Why this is needed?

mirekys · 2025-12-12T17:06:36Z

+
+from oarepo_ui.overrides import UIComponentOverride, UIComponent
+
+OAREPO_UI_OVERRIDES = {


We can leave this here

mirekys · 2025-12-12T17:12:36Z

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>


Cannot use this graphics

mirekys · 2025-12-12T17:31:41Z

@@ -0,0 +1,96 @@
+import React from "react";


Why not use RDM code for this?

Should be available in app-RDM

Because I don't like the way it looks by default (roles are missing). Of course I could copy their code, but that is what I did with my previous NMA UI implementation (I copied and modified nr-docs design). The only thing that changes here since previous NMA logic is the metadata model, but the UI design stays the same/similar. Or since we don't have any usable NMD design, I could of course, copy the whole RDM Search UI, delete all overrides and less and only style colors, etc. (like we did with detail)

mirekys · 2025-12-12T17:33:07Z

@@ -0,0 +1,50 @@
+import React from "react";


This might not be needed as discussed today

mirekys · 2025-12-12T17:55:41Z

@@ -0,0 +1,29 @@
+import React from "react";


Why not RDM component?

mirekys · 2025-12-12T18:33:21Z

-                          {i18next.t("Uploaded on")} <span>{createdDate}</span>{" "}
-                          {version && `(${i18next.t("version")}: ${version})`}
-                        </>
+              {sanitizedDescription && (


Sanitized vs truncated?

mirekys · 2025-12-12T18:34:21Z

+
  return (
-    <Item key={result.id} data-testid="result-item">
+    <Item className="results-list-item-main">


Bring back test id

mirekys · 2025-12-12T18:36:57Z

@@ -1,71 +1,188 @@
-import React from "react";
+import React, { useContext, useState } from "react";


This looks like taken from previous nma, much simpler would be to copy from RDM result item & adapt it to design as it expects RDM model we use now

mirekys · 2025-12-12T18:38:03Z

+const SortLabelMobile = (cmp) => cmp;
+
+export const ResultOptions = ({ currentResultsState = {} }) => {
+  const { total } = currentResultsState.data;


Are we 100% sure this cannot happen? Will break whole search ui otherwise

mirekys · 2025-12-12T18:39:22Z

+        </Accordion>
+      )}
+      {orgCreatibutors.length > 0 && (
+        <Accordion style={personalCreatibutors.length > 0 ? { marginTop: "-1rem" } : {}}>


No fixed inline styles, conditionally add rel-mt-1 class instead

mirekys · 2025-12-12T18:40:17Z

+  );
+};
+
+CreatibutorsList.propTypes = {


Creatibutors are solved in RDM (uses the same record model as current nma), can be taken & adapted from there

mirekys · 2025-12-12T18:41:36Z

+      ? creatibutor.role.title
+      : (creatibutor?.role?.title?.["en"] ||
+         creatibutor?.role?.title?.["cs"] ||
+         creatibutor?.role?.title_l10n ||


Title l10n should be the first option (already localized by backend)

mirekys · 2025-12-12T18:42:55Z

+  return person.name || familyName || givenName || "";
+};
+
+const normalizeIdentifier = (identifier) => {


This should be handled by backend in ui serialization

mirekys · 2025-12-12T18:43:18Z

@@ -0,0 +1,96 @@
+import React from "react";


Should be available in app-RDM

…rch-stranka-a-vysledky

corovcam · 2025-12-16T11:55:27Z

To answer previous feedback comments and to continue with this one, I have a general question about the Search UI design. What I've done here is that I coppied everything I deemed necessary from previous NMA along with model changes and removed some unnecessary stuff. But from what I understand from feedback I could also only use RDM components and not do any changes here, like we did with detail.

I made a PoC of Search UI using only RDM component with minor changes. The goal, as I understood from the feedback comments by @mirekys was to minimize code (if that is our objective). The design along with minimized code can be seen here: #88
@mesemus @mirekys @Ducica how do we proceed?

sonarqubecloud · 2025-12-16T12:08:43Z

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

corovcam added 2 commits December 8, 2025 16:29

Copilot AI review requested due to automatic review settings December 9, 2025 08:54

Copilot started reviewing on behalf of corovcam December 9, 2025 08:55 View session

corovcam changed the title ~~Corovcam/fe-430-search-stranka-a-vysledky~~ Search UI Dec 9, 2025

This comment was marked as outdated.

Sign in to view

corovcam marked this pull request as draft December 9, 2025 09:48

mirekys reviewed Dec 9, 2025

View reviewed changes

Comment thread static/icons/locks/closed_access.svg Outdated

corovcam added 2 commits December 10, 2025 11:10

feat: implement search functionality with custom components and updat…

cd2ca89

…e dependencies

Merge remote-tracking branch 'origin/rdm-14' into corovcam/fe-430-sea…

8fad919

…rch-stranka-a-vysledky

Copilot AI review requested due to automatic review settings December 10, 2025 11:44

Copilot started reviewing on behalf of corovcam December 10, 2025 11:45 View session

Copilot AI reviewed Dec 10, 2025

View reviewed changes

corovcam added 4 commits December 10, 2025 12:54

Merge remote-tracking branch 'origin/rdm-14' into corovcam/fe-430-sea…

4061463

…rch-stranka-a-vysledky

Less modifications

b30e41e

fix: update accordion icon color and improve conditional rendering in…

526a378

… Creatibutors component

Merge remote-tracking branch 'origin/rdm-14' into corovcam/fe-430-sea…

2b187ab

…rch-stranka-a-vysledky

corovcam added 2 commits December 12, 2025 18:00

Merge remote-tracking branch 'origin/rdm-14' into corovcam/fe-430-sea…

a896c1e

…rch-stranka-a-vysledky

Resolve copilot suggestions

a67dde8

Copilot AI review requested due to automatic review settings December 12, 2025 17:36

Copilot started reviewing on behalf of corovcam December 12, 2025 17:36 View session

mirekys reviewed Dec 12, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

mirekys reviewed Dec 12, 2025

View reviewed changes

corovcam added 2 commits December 15, 2025 13:28

Merge remote-tracking branch 'origin/rdm-14' into corovcam/fe-430-sea…

ba5a06d

…rch-stranka-a-vysledky

UI enhancements

85cf29f

corovcam mentioned this pull request Dec 16, 2025

Search UI according to RDM #88

Merged


		from oarepo_ui.overrides import UIComponentOverride, UIComponent

		OAREPO_UI_OVERRIDES = {

		@@ -0,0 +1,25 @@
		<?xml version="1.0" encoding="UTF-8" standalone="no"?>

		@@ -1,71 +1,188 @@
		import React from "react";
		import React, { useContext, useState } from "react";

Uh oh!

Conversation

corovcam commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mirekys commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

corovcam Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

corovcam commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Dec 16, 2025

Quality Gate failed

Uh oh!

corovcam commented Dec 9, 2025 •

edited

Loading

mirekys commented Dec 12, 2025 •

edited

Loading

corovcam Dec 15, 2025 •

edited

Loading

corovcam commented Dec 16, 2025 •

edited

Loading