[sql] Fix query encoding in panel actions (#425)

The query parameter was not encoded in the panel actions, so that the
a users query broke, when he selected a query in the action and was
redirected to the raw view of his data.

This is now fixed by using "encodeURIComponent" for the query parameter
in the actions of an sql panel.

Author: ricoberger

plugins/plugin-sql/src/components/panel/SQLActions.tsx

@@ -31,7 +31,11 @@ export const SQLActions: React.FunctionComponent<ISQLActionsProps> = ({
           dropdownItems={queries.map((query, index) => (
             <DropdownItem
               key={index}
-              component={<Link to={`${pluginBasePath(instance)}?query=${query.query}`}>{query.name}</Link>}
+              component={
+                <Link to={`${pluginBasePath(instance)}?query=${encodeURIComponent(query.query || '')}`}>
+                  {query.name}
+                </Link>
+              }
             />
           ))}
         />

plugins/plugin-sql/src/components/panel/SQLChartActions.tsx

@@ -28,7 +28,10 @@ export const SQLChartActions: React.FunctionComponent<ISQLChartActionsProps> = (
           isPlain={true}
           position="right"
           dropdownItems={[
-            <DropdownItem key={0} component={<Link to={`${pluginBasePath(instance)}?query=${query}`}>Explore</Link>} />,
+            <DropdownItem
+              key={0}
+              component={<Link to={`${pluginBasePath(instance)}?query=${encodeURIComponent(query)}`}>Explore</Link>}
+            />,
           ]}
         />
       )}