fix: resetting the navigate route and modifying the CSS in summary pa…

…ge (#2990) ### This PR resolves [#2893](#2893) issue. Updates the credential page navigation and improves the invitation panel UI: 1. Changes credential page navigation parameters from `?action=add` and `?action=manage` to `?tab=credentials` 2. Enhances invitation panel layout: - Adds proper spacing between buttons using `gap: 8px` - Makes panel narrow with `scrollableY="true"` - Improves vertical layout with justified flex wrap - Adds consistent 10px padding and gap spacing These changes provide better navigation consistency and a more polished invitation interface. **Checklist:** - [x] Mention to the original issue - [ ] Documentation - [ ] Minium required manager version - [ ] Specific setting for review - [ ] Minimum requirements to check during review - [ ] Test case(s) to demonstrate the difference of before/after
lablup · Dec 24, 2024 · 84f2449 · 84f2449
1 parent 9e2be95
commit 84f2449
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 74 deletions.
diff --git a/react/src/components/UserCredentialList.tsx b/react/src/components/UserCredentialList.tsx
@@ -38,9 +38,10 @@ import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { BanIcon, PlusIcon, UndoIcon } from 'lucide-react';
-import { useState, useTransition } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
+import { StringParam, useQueryParam } from 'use-query-params';
 
 type Keypair = NonNullable<
   NonNullable<UserCredentialListQuery$data['keypair_list']>['items'][number]
@@ -51,6 +52,14 @@ const UserCredentialList: React.FC = () => {
   const { token } = theme.useToken();
   const { message, modal } = App.useApp();
 
+  const [action, setAction] = useQueryParam('action', StringParam);
+  useEffect(() => {
+    if (action === 'add') {
+      setOpenUserKeypairSettingModal(true);
+      setAction(undefined);
+    }
+  }, [action, setAction]);
+
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const [activeType, setActiveType] = useState<'active' | 'inactive'>('active');
   const [order, setOrder] = useState<string | undefined>(undefined);

diff --git a/src/components/backend-ai-summary-view.ts b/src/components/backend-ai-summary-view.ts
@@ -522,7 +522,10 @@ export default class BackendAISummary extends BackendAIPage {
                   ? html`
                       <button
                         @click="${() => {
-                          this._moveTo('/credential', '?action=add');
+                          this._moveTo(
+                            '/credential',
+                            '?tab=credentials&action=add',
+                          );
                         }}"
                         class="vertical center center-justified layout start-menu-items link-button"
                         style="border-left:1px solid var(--token-colorBorder, #ccc);"
@@ -532,7 +535,7 @@ export default class BackendAISummary extends BackendAIPage {
                       </button>
                       <button
                         @click="${() => {
-                          this._moveTo('/credential', '?action=manage');
+                          this._moveTo('/credential', '?tab=credentials');
                         }}"
                         class="vertical center center-justified layout start-menu-items link-button"
                         style="border-left:1px solid var(--token-colorBorder, #ccc);"
@@ -566,80 +569,80 @@ export default class BackendAISummary extends BackendAIPage {
             ?active="${this.active === true}"
             height="500"
           ></backend-ai-resource-panel>
-          <div class="horizontal wrap layout">
-            <lablup-activity-panel
-              title="${_t('summary.Invitation')}"
-              elevation="1"
-              height="245"
-              scrollableY
+          <lablup-activity-panel
+            title="${_t('summary.Invitation')}"
+            elevation="1"
+            narrow
+            height="245"
+            scrollableY="true"
+          >
+            <div
+              class="layout vertical"
+              slot="message"
+              style="padding: 10px; gap: 10px;"
             >
-              <div slot="message">
-                ${this.invitations.length > 0
-                  ? this.invitations.map(
-                      (invitation, index) => html`
-                        <lablup-activity-panel
-                          class="inner-panel"
-                          noheader
-                          autowidth
-                          elevation="0"
-                          height="130"
-                        >
-                          <div slot="message">
-                            <div class="wrap layout">
-                              <h3 style="padding-top:10px;">
-                                From ${invitation.inviter}
-                              </h3>
-                              <div class="invitation_folder_name">
-                                ${_t('summary.FolderName')}:
-                                ${invitation.vfolder_name}
-                              </div>
-                              <div class="horizontal center layout">
-                                ${_t('summary.Permission')}:
-                                ${[...invitation.perm].map(
-                                  (c) => html`
-                                    <lablup-shields
-                                      app=""
-                                      color="${[
-                                        'green',
-                                        'blue',
-                                        'red',
-                                        'yellow',
-                                      ][['r', 'w', 'd', 'o'].indexOf(c)]}"
-                                      description="${c.toUpperCase()}"
-                                      ui="flat"
-                                    ></lablup-shields>
-                                  `,
-                                )}
-                              </div>
-                              <div
-                                style="margin:15px auto;"
-                                class="horizontal layout end-justified"
-                              >
-                                <mwc-button
-                                  outlined
-                                  label="${_t('summary.Decline')}"
-                                  @click="${(e) =>
-                                    this._deleteInvitation(e, invitation)}"
-                                ></mwc-button>
-                                <mwc-button
-                                  unelevated
-                                  label="${_t('summary.Accept')}"
-                                  @click="${(e) =>
-                                    this._acceptInvitation(e, invitation)}"
-                                ></mwc-button>
-                                <span class="flex"></span>
-                              </div>
+              ${this.invitations.length > 0
+                ? this.invitations.map(
+                    (invitation, index) => html`
+                      <lablup-activity-panel
+                        class="inner-panel"
+                        noheader
+                        autowidth
+                        elevation="0"
+                        height="130"
+                      >
+                        <div slot="message">
+                          <div class="wrap layout">
+                            <h3 style="padding-top:10px;">
+                              From ${invitation.inviter}
+                            </h3>
+                            <div class="invitation_folder_name">
+                              ${_t('summary.FolderName')}:
+                              ${invitation.vfolder_name}
+                            </div>
+                            <div class="horizontal center layout">
+                              ${_t('summary.Permission')}:
+                              ${[...invitation.perm].map(
+                                (c) => html`
+                                  <lablup-shields
+                                    app=""
+                                    color="${['green', 'blue', 'red', 'yellow'][
+                                      ['r', 'w', 'd', 'o'].indexOf(c)
+                                    ]}"
+                                    description="${c.toUpperCase()}"
+                                    ui="flat"
+                                  ></lablup-shields>
+                                `,
+                              )}
+                            </div>
+                            <div
+                              style="margin:15px auto; gap: 8px;"
+                              class="horizontal layout end-justified"
+                            >
+                              <mwc-button
+                                outlined
+                                label="${_t('summary.Decline')}"
+                                @click="${(e) =>
+                                  this._deleteInvitation(e, invitation)}"
+                              ></mwc-button>
+                              <mwc-button
+                                unelevated
+                                label="${_t('summary.Accept')}"
+                                @click="${(e) =>
+                                  this._acceptInvitation(e, invitation)}"
+                              ></mwc-button>
+                              <span class="flex"></span>
                             </div>
                           </div>
-                        </lablup-activity-panel>
-                      `,
-                    )
-                  : html`
-                      <p>${_text('summary.NoInvitations')}</p>
-                    `}
-              </div>
-            </lablup-activity-panel>
-          </div>
+                        </div>
+                      </lablup-activity-panel>
+                    `,
+                  )
+                : html`
+                    <p>${_text('summary.NoInvitations')}</p>
+                  `}
+            </div>
+          </lablup-activity-panel>
           ${!globalThis.isElectron && this.allowAppDownloadPanel
             ? html`
                 <lablup-activity-panel