feat: show-recipe-scraper-version (#1210)

* add recipe scraper version

* add scraper version and details copy dialog

* implement axios downloader - fix #1171

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -97,6 +97,7 @@ import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { MealType, planTypeOptions } from "~/composables/use-group-mealplan";
 import { ShoppingListSummary } from "~/types/api-types/group";
+import { useAxiosDownloader } from "~/composables/api/use-axios-download";
 
 export interface ContextMenuIncludes {
   delete: boolean;
@@ -278,11 +279,13 @@ export default defineComponent({
       context.emit("delete", props.slug);
     }
 
+    const download = useAxiosDownloader();
+
     async function handleDownloadEvent() {
       const { data } = await api.recipes.getZipToken(props.slug);
 
       if (data) {
-        window.open(api.recipes.getZipRedirectUrl(props.slug, data.token));
+        download(api.recipes.getZipRedirectUrl(props.slug, data.token), `${props.slug}.zip`);
       }
     }
 

frontend/composables/api/use-axios-download.ts

@@ -0,0 +1,22 @@
+import { useContext } from "@nuxtjs/composition-api";
+
+export function useAxiosDownloader() {
+  const { $axios } = useContext();
+
+  function download(url: string, filename: string) {
+    $axios({
+      url,
+      method: "GET",
+      responseType: "blob",
+    }).then((response) => {
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", filename);
+      document.body.appendChild(link);
+      link.click();
+    });
+  }
+
+  return download;
+}

frontend/pages/admin/site-settings.vue

@@ -7,6 +7,36 @@
       <template #title> {{ $t("settings.site-settings") }} </template>
     </BasePageTitle>
 
+    <BaseDialog v-model="bugReportDialog" title="Bug Report" :width="800" :icon="$globals.icons.github">
+      <v-card-text>
+        <div class="pb-4">
+          Use this information to report a bug. Providing details of your instance to developers is the best way to get
+          your issues resolved quickly.
+        </div>
+        <v-textarea v-model="bugReportText" outlined rows="18" readonly> </v-textarea>
+        <div class="d-flex justify-end" style="gap: 5px">
+          <BaseButton color="gray" secondary target="_blank" href="https://github.com/hay-kot/mealie/issues/new/choose">
+            <template #icon> {{ $globals.icons.github }}</template>
+            Tracker
+          </BaseButton>
+          <AppButtonCopy :copy-text="bugReportText" color="info" :icon="false" />
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <div class="d-flex justify-end">
+      <BaseButton
+        color="info"
+        @click="
+          dockerValidate();
+          bugReportDialog = true;
+        "
+      >
+        <template #icon> {{ $globals.icons.github }}</template>
+        Bug Report
+      </BaseButton>
+    </div>
+
     <section>
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="Configuration"> </BaseCardSectionTitle>
       <v-card class="mb-4">
@@ -97,22 +127,39 @@
         </div>
       </v-alert>
     </section>
+
+    <!-- General App Info -->
     <section class="mt-4">
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General About"> </BaseCardSectionTitle>
       <v-card class="mb-4">
-        <v-list-item v-for="property in appInfo" :key="property.name">
+        <template v-for="(property, idx) in appInfo">
-          <v-list-item-icon>
+          <v-list-item :key="property.name">
-            <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
+            <v-list-item-icon>
-          </v-list-item-icon>
+              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
-          <v-list-item-content>
+            </v-list-item-icon>
-            <v-list-item-title>
+            <v-list-item-content>
-              <div>{{ property.name }}</div>
+              <v-list-item-title>
-            </v-list-item-title>
+                <div>{{ property.name }}</div>
-            <v-list-item-subtitle class="text-end">
+              </v-list-item-title>
-              {{ property.value }}
+              <template v-if="property.slot === 'recipe-scraper'">
-            </v-list-item-subtitle>
+                <v-list-item-subtitle>
-          </v-list-item-content>
+                  <a
-        </v-list-item>
+                    target="_blank"
+                    :href="`https://github.com/hhursev/recipe-scrapers/releases/tag/${property.value}`"
+                  >
+                    {{ property.value }}
+                  </a>
+                </v-list-item-subtitle>
+              </template>
+              <template v-else>
+                <v-list-item-subtitle>
+                  {{ property.value }}
+                </v-list-item-subtitle>
+              </template>
+            </v-list-item-content>
+          </v-list-item>
+          <v-divider v-if="appInfo && idx !== appInfo.length - 1" :key="`divider-${property.name}`"></v-divider>
+        </template>
       </v-card>
     </section>
   </v-container>
@@ -361,6 +408,12 @@ export default defineComponent({
               icon: $globals.icons.group,
               value: data.defaultGroup,
             },
+            {
+              slot: "recipe-scraper",
+              name: "Recipe Scraper Version",
+              icon: $globals.icons.primary,
+              value: data.recipeScraperVersion,
+            },
           ];
 
           return prettyInfo;
@@ -374,7 +427,45 @@ export default defineComponent({
 
     const appInfo = getAppInfo();
 
+    const bugReportDialog = ref(false);
+
+    const bugReportText = computed(() => {
+      const ignore = {
+        [i18n.tc("about.database-url")]: true,
+        [i18n.tc("about.default-group")]: true,
+      };
+      let text = "**Details**\n";
+
+      appInfo.value?.forEach((item) => {
+        if (ignore[item.name as string]) {
+          return;
+        }
+        text += `${item.name as string}: ${item.value as string}\n`;
+      });
+
+      const ignoreChecks: { [key: string]: boolean } = {
+        "Application Version": true,
+      };
+
+      text += "\n**Checks**\n";
+
+      simpleChecks.value.forEach((item) => {
+        if (ignoreChecks[item.text]) {
+          return;
+        }
+        const status = item.status ? "Yes" : "No";
+        text += `${item.text}: ${status}\n`;
+      });
+
+      text += `Email Configured: ${appConfig.value.emailReady ? "Yes" : "No"}\n`;
+      text += `Docker Volumes: ${docker.state}`;
+
+      return text;
+    });
+
     return {
+      bugReportDialog,
+      bugReportText,
       DockerVolumeState,
       docker,
       dockerValidate,

frontend/types/api-types/admin.ts

@@ -17,6 +17,7 @@ export interface AdminAboutInfo {
   dbUrl?: string;
   defaultGroup: string;
   buildId: string;
+  recipeScraperVersion: string;
 }
 export interface AllBackups {
   imports: BackupFile[];

mealie/routes/admin/admin_about.py

@@ -4,6 +4,7 @@ import shutil
 import string
 
 from fastapi import APIRouter, BackgroundTasks
+from recipe_scrapers import __version__ as recipe_scraper_version
 
 from mealie.core.release_checker import get_latest_version
 from mealie.core.settings.static import APP_VERSION
@@ -33,6 +34,7 @@ class AdminAboutController(BaseAdminController):
             default_group=settings.DEFAULT_GROUP,
             allow_signup=settings.ALLOW_SIGNUP,
             build_id=settings.GIT_COMMIT_HASH,
+            recipe_scraper_version=recipe_scraper_version.__version__,
         )
 
     @router.get("/statistics", response_model=AppStatistics)

mealie/schema/admin/about.py

@@ -24,6 +24,7 @@ class AdminAboutInfo(AppInfo):
     db_url: str | None
     default_group: str
     build_id: str
+    recipe_scraper_version: str
 
 
 class CheckAppConfig(MealieModel):