Add example url in image discovery

kloudlite · Oct 10, 2024 · 4ef412a · 4ef412a
1 parent 8f083e9
commit 4ef412a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -4494,6 +4494,8 @@ query consoleGetRegistryImageUrl {
   core_getRegistryImageURL {
     scriptUrl
     url
+    urlExample
+    scriptUrlExample
   }
 }
 

diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx
@@ -1,6 +1,7 @@
 import { useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
+import Banner from '~/components/molecule/banner';
 import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
@@ -71,6 +72,17 @@ export const RegistryImageInstruction = ({
                           language="sh"
                         />
                       ))}
+                    <Banner
+                      type="info"
+                      body={
+                        <div className="flex flex-col gap-md">
+                          <span className="bodyMd-medium">
+                            Webhook Image Metadata Push Example:
+                          </span>
+                          <span className="bodyMd">{data.urlExample}</span>
+                        </div>
+                      }
+                    />
                   </div>
                 )}
                 {active === 'script-url' && (
@@ -85,6 +97,20 @@ export const RegistryImageInstruction = ({
                           language="sh"
                         />
                       ))}
+                    <Banner
+                      type="info"
+                      body={
+                        <div className="flex flex-col gap-md">
+                          <span className="bodyMd-medium">
+                            Shell Script Example with Image and Meta
+                            Information:
+                          </span>
+                          <span className="bodyMd">
+                            {data.scriptUrlExample}
+                          </span>
+                        </div>
+                      }
+                    />
                   </div>
                 )}
               </div>

diff --git a/src/apps/console/server/gql/queries/registry-image-queries.ts b/src/apps/console/server/gql/queries/registry-image-queries.ts
@@ -62,6 +62,8 @@ export const registryImagesQueries = (executor: IExecutor) => ({
         core_getRegistryImageURL {
           scriptUrl
           url
+          urlExample
+          scriptUrlExample
         }
       }
     `,

diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
@@ -6071,7 +6071,12 @@ export type ConsoleGetRegistryImageUrlQueryVariables = Exact<{
 }>;
 
 export type ConsoleGetRegistryImageUrlQuery = {
-  core_getRegistryImageURL: { scriptUrl: Array<string>; url: Array<string> };
+  core_getRegistryImageURL: {
+    scriptUrl: Array<string>;
+    url: Array<string>;
+    urlExample: string;
+    scriptUrlExample: string;
+  };
 };
 
 export type ConsoleSearchRegistryImagesQueryVariables = Exact<{