From 4ef412a8bbf3362271b5104b5b6cce9e24fa5443 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Thu, 10 Oct 2024 15:17:04 +0530
Subject: [PATCH] Add example url in image discovery

---
 gql-queries-generator/doc/queries.graphql     |  2 ++
 .../images/handle-image-discovery.tsx         | 26 +++++++++++++++++++
 .../gql/queries/registry-image-queries.ts     |  2 ++
 src/generated/gql/server.ts                   |  7 ++++-
 4 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index fdd3c3e12..cf75d802e 100644
--- 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
index be56dea02..aed43e4be 100644
--- 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
index bc4d6e2ed..741dea94f 100644
--- 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
index 967ce97fb..0dba014b3 100644
--- 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<{