add scroll for getting start modal

Signed-off-by: Hailong Cui <[email protected]>
ruanyl · Apr 8, 2024 · 8f1f050 · 8f1f050
1 parent 24ee5f1
commit 8f1f050
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -136,7 +136,7 @@ export const convertPermissionsToPermissionSettings = (permissions: SavedObjectP
     if (!isWorkspacePermissionMode(mode)) {
       return;
     }
-    if (permissions[mode].users) {
+    if (permissions[mode].users || permissions[mode].groups) {
       permissions[mode].users?.forEach((userId) => {
         const settingTypeKey = `userId-${userId}`;
         const modes = settingType2Modes[settingTypeKey] ? settingType2Modes[settingTypeKey] : [];
@@ -157,11 +157,12 @@ export const convertPermissionsToPermissionSettings = (permissions: SavedObjectP
 
         modes.push(mode);
         if (modes.length === 1) {
-          userPermissionSettings.push({
+          groupPermissionSettings.push({
             type: WorkspacePermissionItemType.Group,
             group,
             modes,
           });
+          settingType2Modes[settingTypeKey] = modes;
         }
       });
     }

diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useRef, useState } from 'react';
 import {
   EuiFlexItem,
   EuiText,
@@ -30,20 +30,28 @@ interface Props extends Omit<WorkspaceOverviewCardProps, 'card'> {
 }
 
 export const WorkspaceOverviewGettingStartModal = (props: Props) => {
-  const [selectedItemName, setSelectedItem] = useState('all');
+  const ALL = 'all';
+  const [selectedItemName, setSelectedItem] = useState(ALL);
+  const scrollToRefs = useRef({} as Record<string, HTMLDivElement | null>);
+  const allRef = useRef(null as HTMLDivElement | null);
 
   const { onCloseModal, availableCards } = props;
 
-  const selectItem = (name: string) => {
-    setSelectedItem(name);
-  };
-
   const createItem = (name: string, data = {}) => {
     return {
       id: slugify(name),
       name,
       isSelected: selectedItemName === name,
-      onClick: () => selectItem(name),
+      onClick: () => {
+        setSelectedItem(name);
+        if (name === ALL && allRef.current) {
+          allRef.current.scrollIntoView(true);
+          return;
+        }
+        if (scrollToRefs.current[slugify(name)]) {
+          scrollToRefs.current[slugify(name)]?.scrollIntoView(true);
+        }
+      },
       ...data,
     };
   };
@@ -56,16 +64,15 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
     ),
   ];
 
-  const sideNav = ['all', ...categories].map((category) => createItem(category));
+  const sideNav = [ALL, ...categories].map((category) => createItem(category));
 
   const cardList: ReactNode[] = categories.map((category) => {
     const cards = availableCards.filter((card) => {
       return card.category.label === category;
     });
 
     return (
-      <div id={slugify(category)}>
-        <EuiSpacer size="m" />
+      <div id={slugify(category)} ref={(ref) => (scrollToRefs.current[slugify(category)] = ref)}>
         <EuiTitle>
           <h2>{category}</h2>
         </EuiTitle>
@@ -79,6 +86,7 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
             );
           })}
         </EuiFlexGrid>
+        <EuiSpacer size="m" />
       </div>
     );
   });
@@ -99,7 +107,7 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
           </EuiPageSideBar>
           <EuiPageBody paddingSize="s">
             <EuiPageContent verticalPosition="center" horizontalPosition="center" paddingSize="m">
-              {cardList}
+              <div ref={allRef}>{cardList}</div>
             </EuiPageContent>
           </EuiPageBody>
         </EuiPage>

diff --git a/src/plugins/workspace/public/components/workspace_overview/index.tsx b/src/plugins/workspace/public/components/workspace_overview/index.tsx
@@ -101,21 +101,21 @@ export const WorkspaceOverview = () => {
     {
       id: 'overview',
       name: i18n.translate('workspace.overview.title', {
-        defaultMessage: 'overview',
+        defaultMessage: 'Overview',
       }),
       content: <WorkspaceOverviewContent />,
     },
     {
       id: 'library',
       name: i18n.translate('workspace.library.title', {
-        defaultMessage: 'library',
+        defaultMessage: 'Library',
       }),
       content: <WorkspaceOverviewLibrary />,
     },
     {
       id: 'settings',
       name: i18n.translate('workspace.setting.title', {
-        defaultMessage: 'setting',
+        defaultMessage: 'Setting',
       }),
       content: <WorkspaceOverviewSettings />,
     },

diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx
@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGrid, EuiTitle, EuiFlexItem, EuiCard, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiFlexItem, EuiCard, EuiSpacer, EuiPanel, EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
+import { i18n } from '@osd/i18n';
 import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
 
 export const WorkspaceOverviewContent = () => {
@@ -17,22 +18,32 @@ export const WorkspaceOverviewContent = () => {
   const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
 
   return (
-    <>
+    <EuiPanel hasBorder={false} color="transparent">
       <EuiTitle>
-        <h5>Overview</h5>
+        <span>
+          {i18n.translate('workspace.overview.title', {
+            defaultMessage: 'Overview',
+          })}
+        </span>
       </EuiTitle>
       <EuiSpacer size="l" />
-      <EuiFlexGrid columns={3}>
-        <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={2}>
           <EuiCard
             layout="horizontal"
-            onClick={() => {}}
             title="about"
             titleSize="xs"
             description={currentWorkspace?.description || ''}
           />
         </EuiFlexItem>
-      </EuiFlexGrid>
-    </>
+        <EuiFlexItem grow={8}>
+          <EuiPanel>
+            <EuiTitle size="xs">
+              <span>recent items</span>
+            </EuiTitle>
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 };