fix(sqllab): Updated blank states for query results and query history (#19111)

* Empty states updated on result tab and query history tab

* Testing on query history blank state

* Testing on result tab with empty state

* Forgot to remove a comment

* Corrected empty state image size and centered with drag bar

* Centered blank states vertically

superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import QueryHistory from 'src/SqlLab/components/QueryHistory';
+
+const NOOP = () => {};
+const mockedProps = {
+  queries: [],
+  actions: {
+    queryEditorSetSql: NOOP,
+    cloneQueryToNewTab: NOOP,
+    fetchQueryResults: NOOP,
+    clearQueryResults: NOOP,
+    removeQuery: NOOP,
+  },
+  displayLimit: 1000,
+};
+
+const setup = (overrides = {}) => (
+  <QueryHistory {...mockedProps} {...overrides} />
+);
+
+describe('QueryHistory', () => {
+  it('Renders an empty state for query history', () => {
+    render(setup());
+
+    const emptyStateText = screen.getByText(
+      /run a query to display query history/i,
+    );
+
+    expect(emptyStateText).toBeVisible();
+  });
+});

superset-frontend/src/SqlLab/components/QueryHistory/index.tsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import Alert from 'src/components/Alert';
-import { t } from '@superset-ui/core';
+import { EmptyStateMedium } from 'src/components/EmptyState';
+import { t, styled } from '@superset-ui/core';
 import { Query } from 'src/SqlLab/types';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 
@@ -34,6 +34,17 @@ interface QueryHistoryProps {
   displayLimit: number;
 }
 
+const StyledEmptyStateWrapper = styled.div`
+  height: 100%;
+  .ant-empty-image img {
+    margin-right: 28px;
+  }
+
+  p {
+    margin-right: 28px;
+  }
+`;
+
 const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
   queries.length > 0 ? (
     <QueryTable
@@ -52,7 +63,12 @@ const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
       displayLimit={displayLimit}
     />
   ) : (
-    <Alert type="info" message={t('No query history yet...')} />
+    <StyledEmptyStateWrapper>
+      <EmptyStateMedium
+        title={t('Run a query to display query history')}
+        image="document.svg"
+      />
+    </StyledEmptyStateWrapper>
   );
 
 export default QueryHistory;