[Dashboard De-Angular] Fix remaining functional test (opensearch-project#4496)

* fix dashboard state function test in group 4

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

* fix expanding panel

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

---------

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Author: abbyhu2000

src/plugins/dashboard/public/application/components/dashboard_editor.tsx

@@ -112,6 +112,7 @@ export const DashboardEditor = () => {
               isEmbeddableRendered={isEmbeddableRendered}
               indexPatterns={indexPatterns}
               dashboardContainer={dashboardContainer}
+              dashboardIdFromUrl={dashboardIdFromUrl}
             />
           )}
       </div>

src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx

@@ -23,6 +23,7 @@ interface DashboardTopNavProps {
   isEmbeddableRendered: boolean;
   indexPatterns: IndexPattern[];
   dashboardContainer?: DashboardContainer;
+  dashboardIdFromUrl?: string;
 }
 
 export enum UrlParams {
@@ -42,6 +43,7 @@ const TopNav = ({
   isEmbeddableRendered,
   dashboardContainer,
   indexPatterns,
+  dashboardIdFromUrl,
 }: DashboardTopNavProps) => {
   const [topNavMenu, setTopNavMenu] = useState<any>();
   const [isFullScreenMode, setIsFullScreenMode] = useState<any>();
@@ -80,6 +82,7 @@ const TopNav = ({
         savedDashboardInstance,
         services,
         dashboard,
+        dashboardIdFromUrl,
         dashboardContainer
       );
       setTopNavMenu(
@@ -99,6 +102,7 @@ const TopNav = ({
     stateContainer,
     isEmbeddableRendered,
     dashboard,
+    dashboardIdFromUrl
   ]);
 
   useEffect(() => {

src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

@@ -81,7 +81,8 @@
 
     &:hover,
     &:focus {
-      background-color: $embEditingModeHoverColor;
+      // TODO: this is a sass error, $embEditingModeHoverColor is undefined, comment it out for now
+      //background-color: $embEditingModeHoverColor;
     }
   }
 

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx

@@ -30,6 +30,7 @@
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import './_dashboard_grid.scss'
 
 // @ts-ignore
 import sizeMe from 'react-sizeme';

src/plugins/dashboard/public/application/lib/save_dashboard.ts

@@ -51,6 +51,7 @@ export function saveDashboard(
 
   updateSavedDashboard(savedDashboard, appState, timeFilter, dashboard);
 
+  // TODO: should update Dashboard class in the if(id) block
   return savedDashboard.save(saveOptions).then((id: string) => {
     if (id) {
       return id;

src/plugins/dashboard/public/application/utils/get_nav_actions.tsx

@@ -48,6 +48,7 @@ export const getNavActions = (
   savedDashboard: any,
   services: DashboardServices,
   dashboard: Dashboard,
+  dashboardIdFromUrl?: string,
   dashboardContainer?: DashboardContainer
 ) => {
   const {
@@ -390,7 +391,11 @@ export const getNavActions = (
           'data-test-subj': 'saveDashboardSuccess',
         });
 
-        chrome.docTitle.change(savedDashboard.lastSavedTitle);
+        if (id !== dashboardIdFromUrl) {
+          history.replace(createDashboardEditUrl(id));
+        }
+
+        chrome.docTitle.change(savedDashboard.title);
         stateContainer.transitions.set('viewMode', ViewMode.VIEW);
       }
       return { id };