oauth for webinar implementation

kloudlite · Sep 11, 2024 · e41e93f · e41e93f
1 parent ff0a27e
commit e41e93f
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 68 deletions.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -4482,6 +4482,13 @@ query consoleGetRegistryImage($image: String!) {
   }
 }
 
+query consoleGetRegistryImageUrl($image: String!, $meta: Map!) {
+  core_getRegistryImageURL(image: $image, meta: $meta) {
+    scriptUrl
+    url
+  }
+}
+
 query consoleListRegistryImages($pq: CursorPaginationIn) {
   core_listRegistryImages(pq: $pq) {
     edges {

diff --git a/lib/types/common.ts b/lib/types/common.ts
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 export type NonNullableString = string & NonNullable<undefined>;
 
-export type MapType<T = string | number | boolean> = {
+export type MapType<T = string | number | Date | boolean> = {
   [key: string]: T | MapType<T>;
 };
 

diff --git a/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx b/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx
@@ -1,7 +1,8 @@
-import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
+import { useLoaderData, useNavigate } from '@remix-run/react';
 import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { toast } from '~/components/molecule/toast';
+import { getCookie } from '~/root/lib/app-setup/cookies';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import getQueries from '~/root/lib/server/helpers/get-queries';
 import { IRemixCtx } from '~/root/lib/types/common';
@@ -11,10 +12,9 @@ export const decodeState = (str: string) =>
   Buffer.from(str, 'base64url').toString('utf8');
 
 const CallBack = () => {
-  const { query, state, provider, setupAction } = useLoaderData();
+  const { query, state, provider, setupAction, callbackUrl } = useLoaderData();
   const api = useAuthApi();
   const navigate = useNavigate();
-  const [searchParams, _setSearchParams] = useSearchParams();
 
   useDebounce(
     () => {
@@ -71,9 +71,9 @@ const CallBack = () => {
             navigate('/');
           } else {
             toast.success('Login Successfull');
-            const callback = searchParams.get('callback');
-            if (callback) {
-              window.location.href = callback;
+            if (callbackUrl) {
+              getCookie().remove('callback_url');
+              window.location.href = callbackUrl;
               return;
             }
             navigate('/');
@@ -98,6 +98,8 @@ const CallBack = () => {
 
 export const loader = async (ctx: IRemixCtx) => {
   const { provider } = ctx.params;
+  const callbackUrl = getCookie(ctx).get('callback_url');
+
   const queries = getQueries(ctx);
   const {
     state,
@@ -115,6 +117,7 @@ export const loader = async (ctx: IRemixCtx) => {
     query: queries,
     state: queryData?.state || state,
     provider,
+    callbackUrl,
   };
 };
 

diff --git a/src/apps/auth/routes/_providers+/login.tsx b/src/apps/auth/routes/_providers+/login.tsx
@@ -6,12 +6,14 @@ import {
   GoogleLogo,
 } from '@jengaicons/react';
 import { Link, useOutletContext, useSearchParams } from '@remix-run/react';
+import { useEffect } from 'react';
 import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { Button } from '~/components/atoms/button';
 import { PasswordInput, TextInput } from '~/components/atoms/input';
 import { ArrowLeft, ArrowRight } from '~/components/icons';
 import { toast } from '~/components/molecule/toast';
 import { cn } from '~/components/utils';
+import { getCookie } from '~/root/lib/app-setup/cookies';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
@@ -117,17 +119,13 @@ const Login = () => {
     ? `/login?mode=email&callback=${callback}`
     : `/login?mode=email`;
 
-  const githubLoginHref = callback
-    ? `${githubLoginUrl}&callback=${callback}`
-    : githubLoginUrl;
-
-  const gitlabLoginHref = callback
-    ? `${gitlabLoginUrl}&callback=${callback}`
-    : gitlabLoginUrl;
-
-  const googleLoginHref = callback
-    ? `${googleLoginUrl}&callback=${callback}`
-    : googleLoginUrl;
+  useEffect(() => {
+    if (callback) {
+      getCookie().set('callback_url', callback, {
+        expires: new Date(Date.now() + 1000 * 60),
+      });
+    }
+  }, [callback]);
 
   return (
     <Container
@@ -161,8 +159,7 @@ const Login = () => {
                   <span className="bodyLg-medium">Continue with GitHub</span>
                 }
                 prefix={<GithubLogoFill />}
-                // to={githubLoginUrl}
-                to={githubLoginHref}
+                to={githubLoginUrl}
                 disabled={!githubLoginUrl}
                 block
                 linkComponent={Link}
@@ -174,8 +171,7 @@ const Login = () => {
                   <span className="bodyLg-medium">Continue with GitLab</span>
                 }
                 prefix={<GitlabLogoFill />}
-                // to={gitlabLoginUrl}
-                to={gitlabLoginHref}
+                to={gitlabLoginUrl}
                 disabled={!gitlabLoginUrl}
                 block
                 linkComponent={Link}
@@ -187,8 +183,7 @@ const Login = () => {
                   <span className="bodyLg-medium">Continue with Google</span>
                 }
                 prefix={<CustomGoogleIcon />}
-                // to={googleLoginUrl}
-                to={googleLoginHref}
+                to={googleLoginUrl}
                 disabled={!googleLoginUrl}
                 block
                 linkComponent={Link}

diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail.tsx
@@ -58,12 +58,22 @@ const ExtraButton = ({
   );
 };
 
-const AppSelectItem = ({ label, value }: { label: string; value: string }) => {
+const AppSelectItem = ({
+  label,
+  value,
+  registry,
+  repository,
+}: {
+  label: string;
+  value: string;
+  registry: string;
+  repository: string;
+}) => {
   return (
     <div>
       <div className="flex flex-col">
         <div>{label}</div>
-        <div className="bodySm text-text-soft">{value}</div>
+        <div className="bodySm text-text-soft">{`${registry}/${repository}`}</div>
       </div>
     </div>
   );
@@ -106,6 +116,8 @@ const AppDetail = () => {
           <AppSelectItem
             label={`${i.imageName}:${i.imageTag}`}
             value={`${i.imageName}:${i.imageTag}`}
+            registry={i.meta.registry}
+            repository={i.meta.repository}
           />
         ),
       }));
@@ -336,6 +348,7 @@ const AppDetail = () => {
             error={!!errors.imageUrl}
             message={errors.imageUrl}
             loading={imageLoaded}
+            createLabel="Select"
           />
 
           {/* {values.imageMode === 'default' && (

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
@@ -0,0 +1,66 @@
+import { useParams } from '@remix-run/react';
+import { Button } from '~/components/atoms/button';
+import Popup from '~/components/molecule/popup';
+import CodeView from '~/console/components/code-view';
+import { LoadingPlaceHolder } from '~/console/components/loading';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+
+export const RegistryImageInstruction = ({
+  show,
+  onClose,
+}: {
+  show: boolean;
+  onClose: () => void;
+}) => {
+  const params = useParams();
+  ensureAccountClientSide(params);
+  const api = useConsoleApi();
+
+  const { data, isLoading, error } = useCustomSwr(
+    'registry-image-instructions',
+    async () => {
+      return api.getRegistryImageUrl({
+        image: '<image_name:image_tag>',
+        meta: {},
+      });
+    }
+  );
+
+  return (
+    <Popup.Root onOpenChange={onClose} show={show} className="!w-[800px]">
+      <Popup.Header>Instructions to add image on registry</Popup.Header>
+      <Popup.Content>
+        <form className="flex flex-col gap-2xl">
+          {error && (
+            <span className="bodyMd-medium text-text-strong">
+              Error while fetching instructions
+            </span>
+          )}
+          {isLoading ? (
+            <LoadingPlaceHolder />
+          ) : (
+            data && (
+              <div className="flex flex-col gap-sm text-start ">
+                <span className="flex flex-wrap items-center gap-md py-lg">
+                  Please follow below instruction for further steps
+                </span>
+                <CodeView
+                  preClassName="!overflow-none text-wrap break-words"
+                  copy
+                  data={data.url || ''}
+                />
+
+                {/* {data.url} */}
+              </div>
+            )
+          )}
+        </form>
+      </Popup.Content>
+      <Popup.Footer>
+        <Button variant="primary-outline" content="close" onClick={onClose} />
+      </Popup.Footer>
+    </Popup.Root>
+  );
+};
diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/images-resources.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/images-resources.tsx
@@ -82,15 +82,15 @@ const ListView = ({ items, onAction }: IResource) => {
             render: () => (
               <div className="flex flex-row">
                 <span className="w-[48px]" />
-                Image Name
+                Image Details
               </div>
             ),
             name: 'name',
             className: listClass.title,
           },
           {
-            render: () => 'Image Tag',
-            name: 'tag',
+            render: () => 'Registry',
+            name: 'registry',
             className: `${listClass.item} flex-1`,
           },
           // {
@@ -128,8 +128,8 @@ const ListView = ({ items, onAction }: IResource) => {
                   />
                 ),
               },
-              tag: {
-                render: () => <ListItemV2 data={i.imageTag} />,
+              registry: {
+                render: () => <ListItemV2 data={i.meta.registry} />,
               },
               repository: {
                 render: () => <ListItemV2 data={i.meta.repository} />,

diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/route.tsx
@@ -1,13 +1,16 @@
 import { defer } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
-import { Dockerlogo } from '~/console/components/icons';
+import { Link, useLoaderData } from '@remix-run/react';
+import { useState } from 'react';
+import { Button } from '~/components/atoms/button';
+import { Dockerlogo, Plus } from '~/console/components/icons';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { getPagination } from '~/console/server/utils/common';
 import { IRemixCtx } from '~/lib/types/common';
+import { RegistryImageInstruction } from './handle-image-discovery';
 import ImagesResource from './images-resources';
 import Tools from './tools';
 
@@ -31,43 +34,61 @@ export const loader = (ctx: IRemixCtx) => {
 
 const Images = () => {
   const { promise } = useLoaderData<typeof loader>();
+  const [visible, setVisible] = useState(false);
   return (
-    <LoadingComp
-      data={promise}
-    // skeletonData={{
-    //   imagesData: fake.ConsoleListRegistryImagesQuery.core_listRegistryImages
-    //     as any,
+    <>
+      <LoadingComp
+        data={promise}
+      // skeletonData={{
+      //   imagesData: fake.ConsoleListRegistryImagesQuery.core_listRegistryImages
+      //     as any,
 
-    // }}
-    >
-      {({ imagesData }) => {
-        const images = parseNodes(imagesData);
+      // }}
+      >
+        {({ imagesData }) => {
+          const images = parseNodes(imagesData);
 
-        return (
-          <Wrapper
-            secondaryHeader={{
-              title: 'Images',
-            }}
-            empty={{
-              image: <Dockerlogo size={48} />,
-              is: images.length === 0,
-              title: 'This is where you’ll manage your registry images.',
-              content: <p>You will get all your registry images here.</p>,
-              // action: {
-              //   content: 'Create new managed resource',
-              //   prefix: <Plus />,
-              //   to: '../new-managed-resource',
-              //   linkComponent: Link,
-              // },
-            }}
-            tools={<Tools />}
-            pagination={imagesData}
-          >
-            <ImagesResource items={images} />
-          </Wrapper>
-        );
-      }}
-    </LoadingComp>
+          return (
+            <Wrapper
+              secondaryHeader={{
+                title: 'Images',
+                action: images.length > 0 && (
+                  <Button
+                    variant="primary"
+                    content="Registry Image Instructions"
+                    prefix={<Plus />}
+                    onClick={() => {
+                      setVisible(true);
+                    }}
+                  />
+                ),
+              }}
+              empty={{
+                image: <Dockerlogo size={48} />,
+                is: images.length === 0,
+                title: 'This is where you’ll manage your registry images.',
+                content: <p>You will get all your registry images here.</p>,
+                action: {
+                  content: 'Registry Image Instructions',
+                  prefix: <Plus />,
+                  onClick: () => {
+                    setVisible(true);
+                  },
+                  linkComponent: Link,
+                },
+              }}
+              tools={<Tools />}
+              pagination={imagesData}
+            >
+              <ImagesResource items={images} />
+            </Wrapper>
+          );
+        }}
+      </LoadingComp>
+      <RegistryImageInstruction
+        {...{ show: visible, onClose: () => setVisible(false) }}
+      />
+    </>
   );
 };