Merge branch 'main' into usecase

changelogs/fragments/8214.yml

@@ -0,0 +1,2 @@
+feat:
+- Add last updated time and cache refresh button to Discover Advanced Dataset Selector ([#8214](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8214))

changelogs/fragments/8382.yml

@@ -0,0 +1,2 @@
+feat:
+- Refactor collaborators panel at workspace create ([#8382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8382))

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx

@@ -8,7 +8,6 @@ import {
   EuiFlyout,
   EuiPanel,
   EuiHorizontalRule,
-  EuiSpacer,
   EuiHideFor,
   EuiFlyoutProps,
   EuiShowFor,
@@ -79,6 +78,7 @@ export function CollapsibleNavGroupEnabled({
   id,
   isNavOpen,
   storage = window.localStorage,
+  currentWorkspace$,
   closeNav,
   navigateToApp,
   navigateToUrl,
@@ -94,7 +94,6 @@ export function CollapsibleNavGroupEnabled({
   const appId = useObservable(observables.appId$, '');
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
-
   const visibleUseCases = useMemo(() => getVisibleUseCases(navGroupsMap), [navGroupsMap]);
 
   const currentNavGroupId = useMemo(() => {
@@ -115,9 +114,6 @@ export function CollapsibleNavGroupEnabled({
     ? !currentNavGroupId
     : currentNavGroupId === ALL_USE_CASE_ID;
 
-  const shouldShowCollapsedNavHeaderContent =
-    isNavOpen && !!collapsibleNavHeaderRender && !currentNavGroupId;
-
   const navLinksForRender: ChromeNavLink[] = useMemo(() => {
     const getSystemNavGroups = () => {
       const result: ChromeNavLink[] = [];
@@ -300,6 +296,7 @@ export function CollapsibleNavGroupEnabled({
             <CollapsibleNavTop
               homeLink={homeLink}
               navGroupsMap={navGroupsMap}
+              collapsibleNavHeaderRender={collapsibleNavHeaderRender}
               navLinks={navLinks}
               navigateToApp={navigateToApp}
               logos={logos}
@@ -308,7 +305,7 @@ export function CollapsibleNavGroupEnabled({
               shouldShrinkNavigation={!isNavOpen}
               onClickShrink={closeNav}
               visibleUseCases={visibleUseCases}
-              currentWorkspace$={observables.currentWorkspace$}
+              currentWorkspace$={currentWorkspace$}
             />
           </EuiPanel>
         )}
@@ -320,12 +317,6 @@ export function CollapsibleNavGroupEnabled({
             hasShadow={false}
             className="eui-yScroll flex-1-container"
           >
-            {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
-              <>
-                {collapsibleNavHeaderRender()}
-                <EuiSpacer />
-              </>
-            ) : null}
             <NavGroups
               navLinks={navLinksForRender}
               navigateToApp={navigateToApp}

src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx

@@ -11,10 +11,10 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
   EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiText,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
@@ -25,6 +25,7 @@ import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
 import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
+  collapsibleNavHeaderRender?: () => JSX.Element | null;
   homeLink?: ChromeNavLink;
   navGroupsMap: Record<string, NavGroupItemInMap>;
   currentNavGroup?: NavGroupItemInMap;
@@ -39,6 +40,7 @@ export interface CollapsibleNavTopProps {
 }
 
 export const CollapsibleNavTop = ({
+  collapsibleNavHeaderRender,
   currentNavGroup,
   navigateToApp,
   logos,
@@ -52,7 +54,6 @@ export const CollapsibleNavTop = ({
   navLinks,
 }: CollapsibleNavTopProps) => {
   const currentWorkspace = useObservable(currentWorkspace$);
-
   const firstVisibleNavLinkInFirstVisibleUseCase = useMemo(
     () =>
       fulfillRegistrationLinksToChromeNavLinks(
@@ -148,12 +149,19 @@ export const CollapsibleNavTop = ({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {currentNavGroup?.title && (
-        <>
-          <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
-        </>
-      )}
+      {
+        // Nav groups with type are system(global) nav group and we should show title for those nav groups
+        (currentNavGroup?.type || collapsibleNavHeaderRender) && (
+          <>
+            <EuiSpacer />
+            {currentNavGroup?.type ? (
+              <EuiText>{currentNavGroup?.title}</EuiText>
+            ) : (
+              collapsibleNavHeaderRender?.()
+            )}
+          </>
+        )
+      }
     </EuiPanel>
   );
 };

src/plugins/data/common/storage/storage.ts

@@ -61,6 +61,10 @@ export class DataStorage {
       if (ourKey != null) ours.push(ourKey);
     });
   }
+
+  clear(): void {
+    this.engine.clear();
+  }
 }
 
 export function createStorage(deps: { engine: IStorageEngine; prefix: string }) {

src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts

@@ -23,17 +23,26 @@ describe('DatasetService', () => {
     service = new DatasetService(uiSettings, sessionStorage);
   });
 
-  test('registerType and getType', () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn(),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
+  const mockResult = {
+    id: 'test-structure',
+    title: 'Test Structure',
+    type: 'test-type',
+    children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
+  };
+
+  const mockPath: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
+
+  const mockType = {
+    id: 'test-type',
+    title: 'Test Type',
+    meta: { icon: { type: 'test' } },
+    toDataset: jest.fn(),
+    fetch: jest.fn().mockResolvedValue(mockResult),
+    fetchFields: jest.fn(),
+    supportedLanguages: jest.fn(),
+  };
 
+  test('registerType and getType', () => {
     service.registerType(mockType);
     expect(service.getType('test-type')).toBe(mockType);
   });
@@ -52,25 +61,9 @@ describe('DatasetService', () => {
   });
 
   test('fetchOptions caches and returns data structures', async () => {
-    const mockType = {
-      id: 'test-type',
-      title: 'Test Type',
-      meta: { icon: { type: 'test' } },
-      toDataset: jest.fn(),
-      fetch: jest.fn().mockResolvedValue({
-        id: 'test-structure',
-        title: 'Test Structure',
-        type: 'test-type',
-        children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
-      }),
-      fetchFields: jest.fn(),
-      supportedLanguages: jest.fn(),
-    };
-
     service.registerType(mockType);
 
-    const path: DataStructure[] = [{ id: 'root', title: 'Root', type: 'root' }];
-    const result = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const result = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
 
     expect(result).toEqual({
       id: 'test-structure',
@@ -79,8 +72,30 @@ describe('DatasetService', () => {
       children: [{ id: 'child1', title: 'Child 1', type: 'test-type' }],
     });
 
-    const cachedResult = await service.fetchOptions(mockDataPluginServices, path, 'test-type');
+    const cachedResult = await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
     expect(cachedResult).toEqual(result);
     expect(mockType.fetch).toHaveBeenCalledTimes(2);
   });
+
+  test('clear cache', async () => {
+    service.registerType(mockType);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+    expect(sessionStorage.keys().length === 1);
+
+    service.clearCache();
+    expect(sessionStorage.keys().length === 0);
+  });
+
+  test('caching object correctly sets last cache time', async () => {
+    service.registerType(mockType);
+
+    const time = Date.now();
+
+    Date.now = jest.fn(() => time);
+
+    await service.fetchOptions(mockDataPluginServices, mockPath, 'test-type');
+
+    expect(service.getLastCacheTime()).toEqual(time);
+  });
 });

src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts

@@ -138,6 +138,7 @@ export class DatasetService {
   }
 
   private cacheDataStructure(dataType: string, dataStructure: DataStructure) {
+    this.setLastCacheTime(Date.now());
     const cachedDataStructure: CachedDataStructure = {
       id: dataStructure.id,
       title: dataStructure.title,
@@ -164,6 +165,18 @@ export class DatasetService {
     });
   }
 
+  public clearCache(): void {
+    this.sessionStorage.clear();
+  }
+
+  public getLastCacheTime(): number | undefined {
+    return Number(this.sessionStorage.get('lastCacheTime')) || undefined;
+  }
+
+  private setLastCacheTime(time: number): void {
+    this.sessionStorage.set('lastCacheTime', time);
+  }
+
   private async fetchDefaultDataset(): Promise<Dataset | undefined> {
     const defaultIndexPatternId = this.uiSettings.get('defaultIndex');
     if (!defaultIndexPatternId) {

src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx

@@ -7,6 +7,8 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiModalBody,
@@ -19,6 +21,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import moment from 'moment';
 import { BaseDataset, DATA_STRUCTURE_META_TYPES, DataStructure } from '../../../common';
 import { QueryStringContract } from '../../query';
 import { IDataPluginServices } from '../../types';
@@ -38,6 +41,7 @@ export const DatasetExplorer = ({
   onNext: (dataset: BaseDataset) => void;
   onCancel: () => void;
 }) => {
+  const uiSettings = services.uiSettings;
   const [explorerDataset, setExplorerDataset] = useState<BaseDataset | undefined>(undefined);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -68,31 +72,72 @@ export const DatasetExplorer = ({
   return (
     <>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h1>
-            <FormattedMessage
-              id="data.explorer.datasetSelector.advancedSelector.title.step1"
-              defaultMessage="Step 1: Select data"
-            />
-          </h1>
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="data.explorer.datasetSelector.advancedSelector.description"
-                defaultMessage="Select from those available to you. "
-              />
-              <EuiLink
-                href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
-                target="_blank"
-              >
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={true}>
+            <EuiModalHeaderTitle>
+              <h1>
                 <FormattedMessage
-                  id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
-                  defaultMessage="Manage data sources"
+                  id="data.explorer.datasetSelector.advancedSelector.title.step1"
+                  defaultMessage="Step 1: Select data"
                 />
-              </EuiLink>
-            </p>
-          </EuiText>
-        </EuiModalHeaderTitle>
+              </h1>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="data.explorer.datasetSelector.advancedSelector.description"
+                    defaultMessage="Select from those available to you. "
+                  />
+                  <EuiLink
+                    href={`${services.http.basePath.get()}/app/management/opensearch-dashboards/dataSources`}
+                    target="_blank"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.dataSourceManagement.title"
+                      defaultMessage="Manage data sources"
+                    />
+                  </EuiLink>
+                </p>
+              </EuiText>
+            </EuiModalHeaderTitle>
+          </EuiFlexItem>
+          {queryString.getDatasetService().getLastCacheTime() && (
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="xs">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s">
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.lastUpdatedTime"
+                      defaultMessage={'Last updated at: {timestamp}. '}
+                      values={{
+                        timestamp: moment(queryString.getDatasetService().getLastCacheTime())
+                          .format(uiSettings.get('dateFormat'))
+                          .toString(),
+                      }}
+                    />
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    onClick={() => {
+                      queryString.getDatasetService().clearCache();
+                      onCancel();
+                    }}
+                    size="xs"
+                    iconSide="left"
+                    iconType="refresh"
+                    iconGap="s"
+                    flush="both"
+                  >
+                    <FormattedMessage
+                      id="data.explorer.datasetSelector.advancedSelector.refreshCacheButton"
+                      defaultMessage="Refresh Cache"
+                    />
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       </EuiModalHeader>
       <EuiModalBody>
         <div