feat: Show bigquery datasource table and query on UI (feast-dev#3600)

Signed-off-by: Hai Nguyen <quanghai.ng1512@gmail.com>

Author: sudohainguyen

ui/package.json

@@ -43,6 +43,7 @@
     "prop-types": "^15.8.1",
     "protobufjs": "^7.1.1",
     "query-string": "^7.1.1",
+    "react-code-blocks": "^0.0.9-0",
     "react-query": "^3.34.12",
     "react-router-dom": "6",
     "react-scripts": "^5.0.0",

ui/src/pages/data-sources/BatchSourcePropertiesView.tsx

@@ -6,6 +6,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from "@elastic/eui";
+import { CopyBlock, atomOneDark } from "react-code-blocks";
 import { feast } from "../../protos";
 import { toDate } from "../../utils/timestamp";
 
@@ -61,6 +62,24 @@ const BatchSourcePropertiesView = (props: BatchSourcePropertiesViewProps) => {
                 </EuiDescriptionListDescription>
               </React.Fragment>
             )}
+            {batchSource.bigqueryOptions && (
+              <React.Fragment>
+                <EuiDescriptionListTitle>Source {batchSource.bigqueryOptions.table ? "Table" : "Query"}</EuiDescriptionListTitle>
+                {batchSource.bigqueryOptions.table ? (
+                    <EuiDescriptionListDescription>
+                        {batchSource.bigqueryOptions.table}
+                    </EuiDescriptionListDescription>
+                ) : <CopyBlock
+                        text={batchSource.bigqueryOptions.query}
+                        language="sql"
+                        showLineNumbers={false}
+                        theme={atomOneDark}
+                        wrapLines
+                    />
+                }
+
+              </React.Fragment>
+            )}
             {batchSource.meta?.latestEventTimestamp && (
               <React.Fragment>
                 <EuiDescriptionListTitle>Latest Event</EuiDescriptionListTitle>