fix(dashboard): solve dashboard toolset dropdown issue & small fix

apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue

@@ -200,6 +200,7 @@ onMounted(async () => {
                     />
                     <p-button icon-left="ic_refresh"
                               style-type="secondary"
+                              :loading="displayState.loading"
                               :disabled="storeState.allDataTableInvalid"
                               @click="handleClickAllApply"
                     >

apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue

@@ -62,6 +62,7 @@ const storeState = reactive({
 /* Query */
 const {
     dashboard,
+    widgetList,
     keys,
     fetcher,
     queryClient,
@@ -129,6 +130,10 @@ const state = reactive({
     varsSnapshot: {} as DashboardVars,
     dashboardOptionsSnapshot: {} as DashboardOptions,
     isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && !storeState.isAdminMode),
+    isDashboardLayoutChanged: computed(() => {
+        const _layouts = dashboard.value?.layouts || [];
+        return !isEqual(_layouts?.[0]?.widgets, widgetList.value.map((w) => w.widget_id));
+    }),
 });
 
 const {
@@ -168,7 +173,8 @@ const updateWidget = async () => {
     if (result) {
         state.fieldManager.updateOriginData(cloneDeep(result.options));
     }
-    if (_isCreating) {
+
+    if (_isCreating || state.isDashboardLayoutChanged) {
         const _layouts = cloneDeep(dashboard.value?.layouts || []);
         if (_layouts.length) {
             const _targetLayout = _layouts[0];
@@ -193,9 +199,10 @@ const updateWidget = async () => {
 const { mutate: updateDashboard } = useMutation(
     {
         mutationFn: fetcher.updateDashboardFn,
-        onSuccess: () => {
+        onSuccess: (data) => {
             const dashboardQueryKey = state.isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
-            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            // queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            queryClient.setQueryData(dashboardQueryKey.value, () => data);
         },
     },
 );
@@ -257,7 +264,7 @@ watch(() => widget.value?.size, (widgetSize) => {
 }, { immediate: true });
 watch(() => state.mounted, async (mounted) => {
     if (mounted) {
-        if (widget.value?.state === 'CREATING') {
+        if (widget.value?.state === 'CREATING' || state.isDashboardLayoutChanged) {
             await updateWidget();
         }
         // await loadOverlayWidget();

apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue

@@ -162,7 +162,7 @@ const handleSelectItem = (item: MenuItem) => {
                                            style-type="tertiary-icon-button"
                                            button-icon="ic_ellipsis-horizontal"
                                            size="sm"
-                                           :menu="getControlMenuItems(props.dashboardId).value"
+                                           :menu="getControlMenuItems(props.dashboardId)"
                                            :selected="[]"
                                            use-fixed-menu-style
                                            reset-selection-on-menu-close

apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts

@@ -1,3 +1,4 @@
+import { toValue } from '@vueuse/core';
 import type { ComputedRef } from 'vue';
 import { reactive, computed } from 'vue';
 
@@ -73,6 +74,7 @@ export const useDashboardControlMenuItems = ({
 
         const _isDeprecated = _dashboard.version === '1.0';
         const _isDashboardManageable = _getDashboardManageable(_dashboard);
+
         if (!_isDashboardManageable) {
             if (_isDeprecated) return [];
             return computed(() => ([
@@ -159,8 +161,8 @@ export const useDashboardControlMenuItems = ({
         ]));
     };
     const getControlMenuItems = (id: string): ComputedRef<MenuItem[]>|MenuItem[] => {
-        if (id.includes('folder')) return _getFolderControlMenuItems(id);
-        return _getDashboardControlMenuItems(id);
+        if (id.includes('folder')) return toValue(_getFolderControlMenuItems(id));
+        return toValue(_getDashboardControlMenuItems(id));
     };
 
     return {

apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts

@@ -27,7 +27,8 @@ import WorkspaceVariableModel from '@/lib/variable-models/managed-model/resource
 
 import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboards/constants/dashboard-managed-variables-schema';
 
-const DEFAULT_REFRESH_INTERVAL = '5m';
+// const DEFAULT_REFRESH_INTERVAL = '5m';
+const DEFAULT_REFRESH_INTERVAL = 'off';
 export const DASHBOARD_DEFAULT = Object.freeze<{ options: DashboardOptions }>({
     options: {
         date_range: {