Merge pull request #2428 from opengovern/ui-changes

UI changes
opengovern · Jan 13, 2025 · b3d37d8 · b3d37d8
2 parents d9be66a + ce36343
commit b3d37d8
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 73 deletions.
diff --git a/services/web-ui/src/components/Cards/BookmarkCard/index.tsx b/services/web-ui/src/components/Cards/BookmarkCard/index.tsx
@@ -1,13 +1,13 @@
-
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronRightIcon, PlayCircleIcon } from '@heroicons/react/24/outline'
+import { PlayIcon } from '@heroicons/react/24/solid'
 import {
-  ComponentType,
-  FunctionComponent,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+    ComponentType,
+    FunctionComponent,
+    ReactNode,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
 
 interface CardProps {
     title: string
@@ -19,69 +19,71 @@ interface CardProps {
 }
 
 const UseCaseCard: FunctionComponent<CardProps> = ({
-  title,
-  
-  tag,
-  onClick,
-  option
-  ,description,
-  logos
+    title,
+
+    tag,
+    onClick,
+    option,
+    description,
+    logos,
 }) => {
-  const truncate = (text: string | undefined, number: number) => {
-    if (text) {
-      return text.length > number ? text.substring(0, number) + "..." : text;
+    const truncate = (text: string | undefined, number: number) => {
+        if (text) {
+            return text.length > number
+                ? text.substring(0, number) + '...'
+                : text
+        }
     }
-  };
 
-  return (
-      <>
-          <div
-              onClick={() => {
-                  onClick?.()
-              }}
-              className="card cursor-pointer rounded-lg border shadow-2xl dark:border-none dark:bg-white h-full flex flex-col justify-between  w-full gap-4 "
-          >
-              <div className="flex flex-row justify-between rounded-xl  items-center px-4 py-2">
-                  <div className="flex flex-row gap-2">
-                     {logos?.map((logo) => {
-                        return (
-                            <div className=" bg-gray-300 dark:bg-slate-400 rounded p-2 flex items-center justify-center">
-                                <img
-                                    src={logo}
-                                    className=" h-5 w-5"
-                                    onError={(e) => {
-                                        e.currentTarget.onerror = null
-                                        e.currentTarget.src =
-                                            'https://raw.githubusercontent.com/opengovern/website/main/connectors/icons/default.svg'
-                                    }}
-                                />
-                            </div>
-                        )
-                     })}
-                  </div>
-                  <div>
-                      {/* <span className="rounded-3xl text-black dark:text-white bg-gray-300 dark:bg-slate-400 px-3 py-1 text-center">
-              {tag}
-            </span> */}
-                  </div>
-              </div>
-              <div className=" text-start flex flex-col gap-1 text-black text-wrap px-4  ">
-                  <span className=" text-xl font-bold">{title}</span>
-                  <span className="text-sm text-gray-500">
-                    {description}
-                  </span>
-              </div>
+    return (
+        <>
+            <div
+                onClick={() => {
+                    onClick?.()
+                }}
+                className="card cursor-pointer rounded-lg border-2 shadow-2xl dark:border-none dark:bg-white h-full flex flex-col justify-start  py-4 w-full gap-2 "
+            >
+                <div className="flex flex-row justify-between rounded-xl  items-center px-4 ">
+                    <div className="flex flex-row gap-2">
+                        {logos?.map((logo) => {
+                            return (
+                                <div className=" bg-gray-300 dark:bg-slate-400 rounded p-2 flex items-center justify-center">
+                                    <img
+                                        src={logo}
+                                        className=" h-5 w-5"
+                                        onError={(e) => {
+                                            e.currentTarget.onerror = null
+                                            e.currentTarget.src =
+                                                'https://raw.githubusercontent.com/opengovern/website/main/connectors/icons/default.svg'
+                                        }}
+                                    />
+                                </div>
+                            )
+                        })}
+                    </div>
+                    <div className="flex flex-row justify-center    rounded-xl p-2 items-center">
+                        <div className="flex w-full text-white flex-row justify-center items-center ">
+                            {/* <span>Run it</span> */}
+                            <PlayIcon className="w-5" color="black" />
+                        </div>
+                    </div>
+                </div>
+                <div className=" text-start flex flex-col gap-1 text-black text-wrap px-4 h-full  ">
+                    <span className=" text-base  text-ellipsis overflow-hidden w-full  text-nowrap">
+                        {title}
+                    </span>
+                    <span className="text-sm text-gray-500">{description}</span>
+                </div>
 
-              <div className="flex flex-row justify-center w-full bg-openg-950 dark:bg-blue-900 rounded-b-lg px-4 py-2 items-center">
-                  {/* <span className="dark:text-white">google sheet + some text </span> */}
+                {/* <div className="flex flex-row justify-center w-full bg-openg-950 dark:bg-blue-900 rounded-b-lg px-4 py-2 items-center">
                   <div className="flex w-full text-white flex-row justify-center items-center gap-2">
                       <span>Run it</span>
                       <ChevronRightIcon className="w-5" color="white" />
                   </div>
-              </div>
-          </div>
-      </>
-  )
-};
+              </div> */}
+            </div>
+        </>
+    )
+}
 
-export default UseCaseCard;
+export default UseCaseCard
diff --git a/services/web-ui/src/pages/Search/Bookmarks/index.tsx b/services/web-ui/src/pages/Search/Bookmarks/index.tsx
@@ -467,9 +467,9 @@ axios
                                 className='h-full'
                                     style={{
                                         "width": `calc(calc(100% - ${
-                                            rows.length >= 3 ? '2' : '1'
+                                            rows.length >= 4 ? '3' : (rows.length-1)
                                         }rem) / ${
-                                            rows.length >= 3 ? '3' : rows.length
+                                            rows.length >= 4 ? '4' : rows.length
                                         })`,
                                     }}
                                 >

diff --git a/services/web-ui/src/pages/Search/Query/index.tsx b/services/web-ui/src/pages/Search/Query/index.tsx
@@ -695,18 +695,23 @@ export default function Query() {
                             value={code}
                             languageLabel="SQL"
                             onChange={({ detail }) => {
-                                setSavedQuery('')
-                                setCode(detail.value)
-                                if (tab !== '3') {
-                                    setTab('3')
+                                if (isLoading) {
+                                    return
+                                } else {
+                                    setSavedQuery('')
+                                    setCode(detail.value)
+                                    if (tab !== '3') {
+                                        setTab('3')
+                                    }
                                 }
                             }}
                             preferences={preferences}
                             onPreferencesChange={(e) =>
                                 // @ts-ignore
                                 setPreferences(e.detail)
                             }
-                            loading={isLoading}
+                            loading={false}
+
                             themes={{
                                 light: ['xcode', 'cloud_editor', 'sqlserver'],
                                 dark: ['cloud_editor_dark', 'twilight'],