Merge remote-tracking branch 'upstream/main'

Author: ruibaby

gradle/wrapper/gradle-wrapper.jar

@@ -1,6 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
 networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

gradle/wrapper/gradle-wrapper.properties

@@ -83,10 +83,8 @@ done
 # This is normally unused
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -133,26 +131,29 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
         # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
         # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -197,11 +198,15 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \

gradlew

@@ -433,10 +433,10 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
   />
 
   <UrlPreviewModal
-    v-if="isUpdateMode"
-    v-model:visible="previewModal"
+    v-if="previewModal"
     :title="formState.page.spec.title"
     :url="`/preview/singlepages/${formState.page.metadata.name}`"
+    @close="previewModal = false"
   />
 
   <VPageHeader :title="$t('core.page.title')">

ui/console-src/modules/contents/pages/SinglePageEditor.vue

@@ -461,10 +461,10 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
   />
 
   <UrlPreviewModal
-    v-if="isUpdateMode"
-    v-model:visible="previewModal"
+    v-if="previewModal"
     :title="formState.post.spec.title"
     :url="`/preview/posts/${formState.post.metadata.name}`"
+    @close="previewModal = false"
   />
 
   <VPageHeader :title="$t('core.post.title')">

ui/console-src/modules/contents/posts/PostEditor.vue

@@ -229,9 +229,10 @@ const actions: Action[] = [
     </OverlayScrollbarsComponent>
   </VCard>
   <ThemePreviewModal
-    v-model:visible="themePreviewVisible"
+    v-if="themePreviewVisible"
     :title="
       $t('core.dashboard.widgets.presets.quicklink.actions.view_site.title')
     "
+    @close="themePreviewVisible = false"
   />
 </template>

ui/console-src/modules/dashboard/widgets/QuickLinkWidget.vue

@@ -106,8 +106,9 @@ const handleOpenPreview = (theme: Theme) => {
       </ul>
     </Transition>
     <ThemePreviewModal
-      v-model:visible="previewVisible"
+      v-if="previewVisible"
       :theme="selectedPreviewTheme"
+      @close="previewVisible = false"
     />
   </div>
 </template>

ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue

@@ -2,7 +2,7 @@
 import ThemePreviewListItem from "./ThemePreviewListItem.vue";
 import { useSettingFormConvert } from "@console/composables/use-setting-form";
 import { useThemeStore } from "@console/stores/theme";
-import { apiClient } from "@/utils/api-client";
+import { apiClient, axiosInstance } from "@/utils/api-client";
 import type {
   ConfigMap,
   Setting,
@@ -22,28 +22,27 @@ import {
   IconTablet,
   IconRefreshLine,
   Toast,
+  VLoading,
 } from "@halo-dev/components";
 import { storeToRefs } from "pinia";
-import { computed, markRaw, ref, toRaw, watch } from "vue";
+import { computed, markRaw, ref, toRaw } from "vue";
 import { useI18n } from "vue-i18n";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import { useQuery } from "@tanstack/vue-query";
+import { onMounted } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     title?: string;
     theme?: Theme;
   }>(),
   {
-    visible: false,
     title: undefined,
     theme: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
@@ -56,7 +55,6 @@ interface SettingTab {
 
 const { activatedTheme } = storeToRefs(useThemeStore());
 
-const previewFrame = ref<HTMLIFrameElement | null>(null);
 const themesVisible = ref(false);
 const switching = ref(false);
 const selectedTheme = ref<Theme>();
@@ -71,29 +69,11 @@ const { data: themes } = useQuery<Theme[]>({
     });
     return data.items;
   },
-  enabled: computed(() => props.visible),
 });
 
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      selectedTheme.value = props.theme || activatedTheme?.value;
-    } else {
-      setTimeout(() => {
-        themesVisible.value = false;
-        settingsVisible.value = false;
-      }, 200);
-    }
-  }
-);
-
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
+onMounted(() => {
+  selectedTheme.value = toRaw(props.theme) || toRaw(activatedTheme?.value);
+});
 
 const handleOpenThemes = () => {
   settingsVisible.value = false;
@@ -122,6 +102,26 @@ const modalTitle = computed(() => {
   });
 });
 
+const {
+  data: previewHTML,
+  isLoading,
+  refetch: refetchPreviewHTML,
+} = useQuery({
+  queryKey: ["site-preview", previewUrl],
+  queryFn: async () => {
+    const { data } = await axiosInstance.get(previewUrl.value, {
+      headers: {
+        Accept: "text/html",
+        "Cache-Control": "no-cache",
+        Pragma: "no-cache",
+        Expires: "0",
+      },
+    });
+    return data;
+  },
+  enabled: computed(() => !!previewUrl.value),
+});
+
 // theme settings
 const saving = ref(false);
 const settingTabs = ref<SettingTab[]>([] as SettingTab[]);
@@ -150,9 +150,7 @@ const { data: setting } = useQuery<Setting>({
 
     activeSettingTab.value = settingTabs.value[0].id;
   },
-  enabled: computed(
-    () => props.visible && !!selectedTheme.value?.spec.settingName
-  ),
+  enabled: computed(() => !!selectedTheme.value?.spec.settingName),
 });
 
 const { data: configMap, refetch: handleFetchConfigMap } = useQuery<ConfigMap>({
@@ -195,7 +193,7 @@ const handleSaveConfigMap = async () => {
 
   saving.value = false;
 
-  handleRefresh();
+  refetchPreviewHTML();
 };
 
 const handleOpenSettings = (theme?: Theme) => {
@@ -206,10 +204,6 @@ const handleOpenSettings = (theme?: Theme) => {
   settingsVisible.value = !settingsVisible.value;
 };
 
-const handleRefresh = () => {
-  previewFrame.value?.contentWindow?.location.reload();
-};
-
 // mock devices
 const mockDevices = [
   {
@@ -241,11 +235,10 @@ const iframeClasses = computed(() => {
 <template>
   <VModal
     :body-class="['!p-0']"
-    :visible="visible"
     fullscreen
     :title="modalTitle"
     :mount-to-body="true"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <template #center>
       <!-- TODO: Reactor VTabbar component to support icon prop -->
@@ -281,7 +274,7 @@ const iframeClasses = computed(() => {
           content: $t('core.common.buttons.refresh'),
           delay: 300,
         }"
-        @click="handleRefresh"
+        @click="refetchPreviewHTML()"
       >
         <IconRefreshLine />
       </span>
@@ -432,12 +425,12 @@ const iframeClasses = computed(() => {
       <div
         class="flex h-full flex-1 items-center justify-center transition-all duration-300"
       >
+        <VLoading v-if="isLoading" />
         <iframe
-          v-if="visible"
-          ref="previewFrame"
+          v-else
           class="border-none transition-all duration-500"
           :class="iframeClasses"
-          :src="previewUrl"
+          :srcdoc="previewHTML"
         ></iframe>
       </div>
     </div>

ui/console-src/modules/interface/themes/components/preview/ThemePreviewModal.vue

@@ -269,6 +269,10 @@ onMounted(() => {
     </div>
 
     <ThemeListModal v-model:visible="themesModal" @select="onSelectTheme" />
-    <ThemePreviewModal v-model:visible="previewModal" :theme="selectedTheme" />
+    <ThemePreviewModal
+      v-if="previewModal"
+      :theme="selectedTheme"
+      @close="previewModal = false"
+    />
   </BasicLayout>
 </template>

ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -1,6 +1,8 @@
 import { common, createLowlight } from "lowlight";
 import xml from "highlight.js/lib/languages/xml";
+import dart from "highlight.js/lib/languages/dart";
 
 const lowlight = createLowlight(common);
 lowlight.register("html", xml);
+lowlight.register("dart", dart);
 export default lowlight;