@quillsql/react 1.7.3 → 1.7.5

package/src/ReportBuilder.tsx

@@ -59,7 +59,7 @@ interface ReportBuilderProps {
   ModalComponent?: (props: ModalComponentProps) => JSX.Element;
   ModalTriggerComponent?: (props: ModalTriggerComponentProps) => JSX.Element;
   TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
-  tagStyle: React.CSSProperties;
+  tagStyle?: React.CSSProperties;
 }
 
 function QuillModal({ children, isOpen, onClose, title, theme }) {
@@ -161,15 +161,21 @@ export default function ReportBuilder({
   }, []);
 
   const runQuery = async query => {
-    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
-      client;
+    const {
+      publicKey,
+      customerId,
+      environment,
+      queryEndpoint,
+      queryHeaders,
+      withCredentials,
+    } = client;
 
     let response;
     if (queryEndpoint) {
       response = await axios.post(
         queryEndpoint,
         { metadata: { query, task: 'query' } },
-        { headers: queryHeaders }
+        { headers: queryHeaders, withCredentials }
       );
     } else {
       response = await axios.post(

package/src/SQLEditor.tsx

@@ -255,8 +255,14 @@ export default function QueryEditor({
   };
 
   const handleRunQuery = async () => {
-    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
-      client;
+    const {
+      publicKey,
+      customerId,
+      environment,
+      queryEndpoint,
+      queryHeaders,
+      withCredentials,
+    } = client;
     try {
       let response;
       setSqlQueryLoading(true);
@@ -264,7 +270,7 @@ export default function QueryEditor({
         response = await axios.post(
           queryEndpoint,
           { metadata: { query, task: 'query' } },
-          { headers: queryHeaders }
+          { headers: queryHeaders, withCredentials }
         );
       } else {
         response = await axios.post(

package/src/Table.tsx

@@ -7,7 +7,6 @@ import { ClientContext, DashboardContext, ThemeContext } from './Context';
 import { valueFormatter } from './Chart';
 // import { SpecialTable } from './SQLEditor';
 import { QuillTheme } from './QuillProvider';
-import { TailSpin } from 'react-loader-spinner';
 
 interface TableColumn {
   label: string;
@@ -201,7 +200,54 @@ export function SpecialTable({
         >
           {LoadingComponent && <LoadingComponent />}
           {!LoadingComponent && (
-            <TailSpin height={36} width={36} color="#364153" />
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient
+                  id="circleGradient"
+                  gradientUnits="objectBoundingBox"
+                >
+                  <stop offset="0%" stop-color="#F9F9FA" />
+                  <stop offset="5%" stop-color="#F9F9FA" />
+                  <stop offset="100%" stop-color="#D1D1D1" />
+                </linearGradient>
+                <mask id="mask">
+                  <circle cx="12" cy="12" r="12" fill="white" />
+                  <path
+                    id="sector"
+                    fill="black"
+                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                  >
+                    <animate
+                      attributeName="d"
+                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                      dur="2s"
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                </mask>
+              </defs>
+              <g transform="rotate(0 15 15)">
+                <animateTransform
+                  attributeName="transform"
+                  attributeType="XML"
+                  type="rotate"
+                  from="0 12 12"
+                  to="360 12 12"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="12"
+                  fill="none"
+                  stroke="url(#circleGradient)"
+                  stroke-width="8"
+                  mask="url(#mask)"
+                />
+              </g>
+            </svg>
           )}
         </div>
       </div>

package/src/hooks/useQuill.ts

@@ -74,13 +74,14 @@ export const useQuill = (
           environment,
           queryEndpoint,
           queryHeaders,
+          withCredentials,
         } = client;
         try {
           if (queryEndpoint) {
             const resp = await axios.post(
               queryEndpoint,
               { metadata: { id: chartId, task: 'item' } },
-              { headers: queryHeaders }
+              { headers: queryHeaders, withCredentials }
             );
             setLoading(false);
             setData({