fix: UI issues identified in shared library upgrade

[jenny-s51]

Description

Fixed issue with sidebar on logout noted in opendatahub-io/mod-arch-library#33 (comment)

Also applies some changes needed for #1669 towards opendatahub-io/mod-arch-library#39.

Before:

After:

Fixed height of grouped toolbar search input fields and elements for better consistency:

Before:

After:

Fixed label alignment and added autoResize to textArea fields to align with MUI styling for description fields:

Before:

After:

How Has This Been Tested?

To test:

This PR needs to be tested with the latest changes to MUI-theme.scss in opendatahub-io/mod-arch-library#39 for correct UI visuals. Pull down this PR first to get the correct state of the stylesheet.

Testing Instructions

Prerequisites: This PR requires the updated MUI-theme.scss from opendatahub-io/mod-arch-library#39. Pull that PR first.

Required Local Configuration Changes:

To prevent React type conflicts when referencing the local mod-arch libraries, you may need to make the following changes:

1. clients/ui/frontend/config/webpack.dev.js - Comment out the ForkTsCheckerWebpackPlugin:

   plugins: [
   -  new ForkTsCheckerWebpackPlugin(),
   +  // new ForkTsCheckerWebpackPlugin(), // Disabled due to React types conflicts with shared libraries
      new ReactRefreshWebpackPlugin({ overlay: false }),
   ],

2. clients/ui/frontend/config/webpack.common.js - Use ts-loader consistently:

   - env === 'development'
   -   ? { loader: 'swc-loader' }
   -   : {
   -       loader: 'ts-loader',
   -       options: {
   -         transpileOnly: true,
   -       },
   -     },
   + {
   +   loader: 'ts-loader',
   +   options: {
   +     transpileOnly: true,
   +   },
   + },

Setup:

1. Update library paths in clients/ui/frontend/package.json:

   "mod-arch-core": "file:/<your-path>/mod-arch-library/mod-arch-core",
   "mod-arch-kubeflow": "file:/<your-path>/mod-arch-library/mod-arch-kubeflow",
   "mod-arch-shared": "file:/<your-path>/mod-arch-library/mod-arch-shared"

2. Build the library:

   cd <your-path>/mod-arch-library
   npm run build

3. Install and run:

   cd clients/ui/frontend
   npm install
   cd ..
   make dev-start

4. Verify:

   • Build should complete without type errors
   • Open http://localhost:9000 and confirm the MUI theme is applied correctly across all pages

---

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages
• Automated tests are provided as part of the PR for major new functionalities; testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work.
• Code changes follow the kubeflow contribution guidelines.
• For first time contributors: Please reach out to the Reviewers to ensure all tests are being run, ensuring the label ok-to-test has been added to the PR.

If you have UI changes

• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.
• Verify that UI/UX changes conform the UX guidelines for Kubeflow.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign alexcreasy for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• clients/ui/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[jenny-s51]

Hi @lucferbux , can you please take a look at this one as well? Thank you 🙏

[lucferbux]

@jenny-s51 I'm gonna trigger a new release with opendatahub-io/mod-arch-library#39 can you then update the library to point at that version in this PR?

[jenny-s51]

@jenny-s51 I'm gonna trigger a new release with opendatahub-io/mod-arch-library#39 can you then update the library to point at that version in this PR?

Absolutely - thank you @lucferbux!

[lucferbux]

Ok, so you can update the libraries to the 1.1.3 release:

• https://www.npmjs.com/package/mod-arch-shared/v/1.1.3
• https://www.npmjs.com/package/mod-arch-kubeflow/v/1.1.3
• https://www.npmjs.com/package/mod-arch-core/v/1.1.3

[jenny-s51]

Thank you @lucferbux - I've updated the versions.

There was a bug introduced with https://github.com/opendatahub-io/mod-arch-library/pull/37/files (out of scope from the style changes) which is causing the test errors in the GH actions workflow below, so we'll have to resolve this issue first and then cut a new release of the shared library first so we don't break the tests in MR.

[jenny-s51]

Opened the issue here: opendatahub-io/mod-arch-library#43