[Fix] [WRS-1602] Media search improvements in Studio UI (#133)

chili-publish · Feb 26, 2024 · 2228872 · 2228872
1 parent 69a9a26
commit 2228872
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@
                 var projectId = '';
                 var baseUrl = `https://${envName}.cpstaging.online/grafx/api/v1/environment/${envName}`; // Or different baseUrl
 
-                if ((!engineRegex.test(engineVersion) && !engineCommitSha) || !authToken || !envName || !templateGuid) {
+                if ((!engineRegex.test(engineVersion) && !engineCommitSha) || !authToken || !envName || !projectId) {
                     let messageString = `Please make sure to specify the`;
                     if (!engineCommitSha) {
                         messageString += ` engineCommitSha`;
@@ -51,8 +51,8 @@
                     if (!envName) {
                         messageString += ` envName`;
                     }
-                    if (!templateGuid) {
-                        messageString += ` templateGuid`;
+                    if (!projectId) {
+                        messageString += ` projectId`;
                     }
                     alert(messageString);
                 }

diff --git a/src/components/itemBrowser/ItemBrowser.styles.tsx b/src/components/itemBrowser/ItemBrowser.styles.tsx
@@ -90,6 +90,15 @@ export const BreadCrumbsWrapper = styled.div`
     white-space: nowrap;
     display: flex;
     margin-bottom: 1rem;
+    margin-top: 0.5rem;
+    & .grafx-drop-down__control {
+        &:hover {
+            border: 1px solid transparent !important;
+        }
+        &--is-focused {
+            border: 1px solid transparent !important;
+        }
+    }
 `;
 
 export const SearchInputWrapper = styled.div<{ hasSearchQuery?: boolean; isMobile?: boolean }>`

diff --git a/src/components/itemBrowser/ItemBrowser.tsx b/src/components/itemBrowser/ItemBrowser.tsx
@@ -68,7 +68,6 @@ function ItemBrowser<
         extension: string | null;
     },
 >(props: React.PropsWithChildren<ItemBrowserProps<T>>) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { isPanelOpen, connectorId, height, queryCall, previewCall, onSelect, convertToPreviewType } = props;
     const [breadcrumbStack, setBreadcrumbStack] = useState<string[]>([]);
     const [nextPageToken, setNextPageToken] = useState<{ token: string | null; requested: boolean }>({
@@ -77,8 +76,6 @@ function ItemBrowser<
     });
     const [isLoading, setIsLoading] = useState(false);
     const [list, setList] = useState<ItemCache<T>[]>([]);
-    const [searchKeyWord, setSearchKeyWord] = useState('');
-    const [searchQuery, setSearchQuery] = useState('');
     const moreData = !!nextPageToken?.token;
 
     const {
@@ -89,6 +86,10 @@ function ItemBrowser<
         selectedItems,
         setNavigationStack,
         setSelectedItems,
+        searchKeyWord,
+        setSearchKeyWord,
+        searchQuery,
+        setSearchQuery,
     } = useVariablePanelContext();
     const isMobileSize = useMobileSize();
 
@@ -179,7 +180,7 @@ function ItemBrowser<
             ignore = true;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nextPageToken, contentType, searchQuery]);
+    }, [nextPageToken.requested, nextPageToken.token, contentType, searchQuery]);
 
     useEffect(() => {
         return () => {

diff --git a/src/contexts/VariablePanelContext.tsx b/src/contexts/VariablePanelContext.tsx
@@ -17,6 +17,10 @@ const VariablePanelContextDefaultValues: IVariablePanelContext = {
     navigationStack: [],
     setSelectedItems: () => undefined,
     setNavigationStack: () => undefined,
+    searchKeyWord: '',
+    setSearchKeyWord: () => undefined,
+    searchQuery: '',
+    setSearchQuery: () => undefined,
     imagePanelTitle: <div />,
     connectorCapabilities: {},
     getCapabilitiesForConnector: async () => undefined,
@@ -40,6 +44,8 @@ export function VariablePanelContextProvider({
     const [currentVariableConnectorId, setCurrentVariableConnectorId] = useState<string>('');
     const [selectedItems, setSelectedItems] = useState<Media[]>([]);
     const [navigationStack, setNavigationStack] = useState<string[]>([]);
+    const [searchKeyWord, setSearchKeyWord] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
 
     const [connectorCapabilities, setConnectorCapabilities] = useState<ICapabilities>({});
 
@@ -77,6 +83,8 @@ export function VariablePanelContextProvider({
                     onClick={() => {
                         setContentType(ContentType.VARIABLES_LIST);
                         setNavigationStack([]);
+                        setSearchKeyWord('');
+                        setSearchQuery('');
                     }}
                     icon={
                         <Icon
@@ -111,6 +119,10 @@ export function VariablePanelContextProvider({
             navigationStack,
             setSelectedItems,
             setNavigationStack,
+            searchKeyWord,
+            setSearchKeyWord,
+            searchQuery,
+            setSearchQuery,
             imagePanelTitle,
             connectorCapabilities,
             connectors,
@@ -123,6 +135,8 @@ export function VariablePanelContextProvider({
             handleUpdateImage,
             selectedItems,
             navigationStack,
+            searchKeyWord,
+            searchQuery,
             imagePanelTitle,
             connectorCapabilities,
             connectors,

diff --git a/src/contexts/VariablePanelContext.types.tsx b/src/contexts/VariablePanelContext.types.tsx
@@ -30,4 +30,8 @@ export interface IVariablePanelContext {
     connectors?: IConnectors;
     connectorCapabilities: ICapabilities;
     getCapabilitiesForConnector: (connectorId: string) => Promise<void>;
+    searchKeyWord: string;
+    setSearchKeyWord: Dispatch<SetStateAction<string>>;
+    searchQuery: string;
+    setSearchQuery: Dispatch<SetStateAction<string>>;
 }