feat: release query settings dialog (and ci test reports)

.github/workflows/ci.yml

@@ -37,6 +37,10 @@ jobs:
   e2e_tests:
     name: Playwright Tests
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      pages: write
 
     services:
       backend:
@@ -50,16 +54,126 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: npm
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Install Plawright deps
+      - name: Install Playwright deps
         run: npm run test:e2e:install
 
       - name: Run Playwright tests
+        id: run_tests
         run: npm run test:e2e
+        env:
+          CI: true
+          PLAYWRIGHT_VIDEO: 'on'
+
+      - name: Upload Playwright artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-artifacts
+          path: playwright-artifacts
+          retention-days: 5
+
+      - name: Setup Pages
+        if: always()
+        uses: actions/configure-pages@v3
+
+      - name: Deploy report to GitHub Pages
+        if: always()
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./playwright-artifacts/playwright-report
+          destination_dir: ${{ github.event.pull_request.number }}
+
+      - name: Get test results
+        if: always()
+        id: test-results
+        run: |
+          echo "Current directory: $(pwd)"
+          echo "Listing playwright-artifacts directory:"
+          ls -R playwright-artifacts
+
+          if [ -f "playwright-artifacts/test-results.json" ]; then            
+            echo "Parsing JSON file:"
+            total=$(jq '.stats.expected + .stats.unexpected + .stats.skipped' playwright-artifacts/test-results.json)
+            passed=$(jq '.stats.expected' playwright-artifacts/test-results.json)
+            failed=$(jq '.stats.unexpected' playwright-artifacts/test-results.json)
+            skipped=$(jq '.stats.skipped' playwright-artifacts/test-results.json)
+
+            echo "Parsed values:"
+            echo "Total: $total"
+            echo "Passed: $passed"
+            echo "Failed: $failed"
+            echo "Skipped: $skipped"
+          else
+            echo "test-results.json file not found"
+            total=0
+            passed=0
+            failed=0
+            skipped=0
+          fi
+
+          echo "total=$total" >> $GITHUB_OUTPUT
+          echo "passed=$passed" >> $GITHUB_OUTPUT
+          echo "failed=$failed" >> $GITHUB_OUTPUT
+          echo "skipped=$skipped" >> $GITHUB_OUTPUT
+
+      - name: Comment PR
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const reportUrl = `https://${context.repo.owner}.github.io/${context.repo.repo}/${context.issue.number}/`;
+            const testResults = {
+              total: ${{ steps.test-results.outputs.total || 0 }},
+              passed: ${{ steps.test-results.outputs.passed || 0 }},
+              failed: ${{ steps.test-results.outputs.failed || 0 }},
+              skipped: ${{ steps.test-results.outputs.skipped || 0 }}
+            };
+            const status = testResults.failed > 0 ? '❌ FAILED' : '✅ PASSED';
+            const statusColor = testResults.failed > 0 ? 'red' : 'green';
+
+            const comment = `## Playwright Test Results
+
+            **Status**: <span style="color: ${statusColor}; font-weight: bold;">${status}</span>
+
+            | Total | Passed | Failed | Skipped |
+            |-------|--------|--------|---------|
+            | ${testResults.total} | ${testResults.passed} | ${testResults.failed} | ${testResults.skipped} |
+
+            ### 📊 Test Report
+
+            For detailed results, please check the [Playwright Report](${reportUrl})
+
+            ### 🎥 Test Recordings
+
+            Video recordings of failed tests (if any) are available in the report.
+
+            ---
+
+            <details>
+            <summary>ℹ️ How to use this report</summary>
+
+            1. Click on the "Playwright Report" link above to view the full test results.
+            2. In the report, you can see a breakdown of all tests, including any failures.
+            3. For failed tests, you can view screenshots and video recordings to help debug the issues.
+            4. Use the filters in the report to focus on specific test statuses or suites.
+
+            </details>`;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: comment
+            });

playwright.config.ts

@@ -6,6 +6,12 @@ const baseUrl = process.env.PLAYWRIGHT_BASE_URL;
 const config: PlaywrightTestConfig = {
     testDir: 'tests/suites',
     timeout: 2 * 60 * 1000,
+    outputDir: './playwright-artifacts/test-results',
+    reporter: [
+        ['html', {outputFolder: './playwright-artifacts/playwright-report'}],
+        ['json', {outputFile: './playwright-artifacts/test-results.json'}],
+    ],
+
     // If there is no url provided, playwright starts webServer with the app in dev mode
     webServer: baseUrl
         ? undefined
@@ -16,6 +22,9 @@ const config: PlaywrightTestConfig = {
     use: {
         baseURL: baseUrl || 'http://localhost:3000/',
         testIdAttribute: 'data-qa',
+        trace: 'on-first-retry',
+        video: 'retain-on-failure',
+        screenshot: 'only-on-failure',
     },
     projects: [
         {

src/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -5,7 +5,6 @@ import {Icon, Tooltip} from '@gravity-ui/uikit';
 import {isAxiosError} from 'axios';
 
 import i18n from '../../containers/Tenant/Query/i18n';
-import {QUERY_SETTINGS, useSetting} from '../../lib';
 import {cn} from '../../utils/cn';
 import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
 import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
@@ -20,10 +19,9 @@ interface QueryExecutionStatusProps {
 }
 
 const QuerySettingsIndicator = () => {
-    const [useQuerySettings] = useSetting<boolean>(QUERY_SETTINGS);
     const {isIndicatorShown, changedLastExecutionSettingsDescriptions} = useChangedQuerySettings();
 
-    if (!isIndicatorShown || !useQuerySettings) {
+    if (!isIndicatorShown) {
         return null;
     }
 

src/containers/Tenant/Query/ExecuteResult/ExecuteResult.tsx

@@ -11,14 +11,13 @@ import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {YDBGraph} from '../../../../components/Graph/Graph';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 import {QueryResultTable} from '../../../../components/QueryResultTable/QueryResultTable';
-import {QUERY_SETTINGS} from '../../../../lib';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import type {ColumnType, KeyValueRow} from '../../../../types/api/query';
 import type {ValueOf} from '../../../../types/common';
 import type {IQueryResult} from '../../../../types/store/query';
 import {getArray} from '../../../../utils';
 import {cn} from '../../../../utils/cn';
-import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
+import {useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {SimplifiedPlan} from '../ExplainResult/components/SimplifiedPlan/SimplifiedPlan';
@@ -63,7 +62,6 @@ export function ExecuteResult({
     const [selectedResultSet, setSelectedResultSet] = React.useState(0);
     const [activeSection, setActiveSection] = React.useState<SectionID>(resultOptionsIds.result);
     const dispatch = useTypedDispatch();
-    const [useQuerySettings] = useSetting<boolean>(QUERY_SETTINGS);
 
     const stats = data?.stats;
     const resultsSetsCount = data?.resultSets?.length;
@@ -237,7 +235,7 @@ export function ExecuteResult({
                     />
                 </div>
             </div>
-            {useQuerySettings && <QuerySettingsBanner />}
+            <QuerySettingsBanner />
             <Fullscreen>{renderResultSection()}</Fullscreen>
         </React.Fragment>
     );

src/containers/Tenant/Query/ExplainResult/ExplainResult.tsx

@@ -7,12 +7,11 @@ import EnableFullscreenButton from '../../../../components/EnableFullscreenButto
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
-import {QUERY_SETTINGS} from '../../../../lib';
 import type {PreparedExplainResponse} from '../../../../store/reducers/explainQuery/types';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 import type {ValueOf} from '../../../../types/common';
 import {cn} from '../../../../utils/cn';
-import {useSetting, useTypedDispatch} from '../../../../utils/hooks';
+import {useTypedDispatch} from '../../../../utils/hooks';
 import {parseQueryErrorToString} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import {QuerySettingsBanner} from '../QuerySettingsBanner/QuerySettingsBanner';
@@ -82,8 +81,6 @@ export function ExplainResult({
     );
     const [isPending, startTransition] = React.useTransition();
 
-    const [useQuerySettings] = useSetting<boolean>(QUERY_SETTINGS);
-
     React.useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
@@ -167,7 +164,7 @@ export function ExplainResult({
                     </React.Fragment>
                 )}
             </div>
-            {useQuerySettings && <QuerySettingsBanner />}
+            <QuerySettingsBanner />
             <LoaderWrapper loading={loading || isPending}>
                 <Fullscreen className={b('result')}>{renderContent()}</Fullscreen>
             </LoaderWrapper>

src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -7,12 +7,7 @@ import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants'
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import type {QueryInHistory} from '../../../../types/store/executeQuery';
 import {cn} from '../../../../utils/cn';
-import {
-    useQueryExecutionSettings,
-    useTypedDispatch,
-    useTypedSelector,
-} from '../../../../utils/hooks';
-import {QUERY_MODES, QUERY_SYNTAX} from '../../../../utils/query';
+import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import i18n from '../i18n';
 
@@ -29,19 +24,10 @@ interface QueriesHistoryProps {
 function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const dispatch = useTypedDispatch();
 
-    const [settings, setQuerySettings] = useQueryExecutionSettings();
-
     const queriesHistory = useTypedSelector(selectQueriesHistory);
     const reversedHistory = [...queriesHistory].reverse();
 
     const onQueryClick = (query: QueryInHistory) => {
-        if (query.syntax === QUERY_SYNTAX.pg && settings.queryMode !== QUERY_MODES.pg) {
-            setQuerySettings({...settings, queryMode: QUERY_MODES.pg});
-        } else if (query.syntax !== QUERY_SYNTAX.pg && settings.queryMode === QUERY_MODES.pg) {
-            // Set query mode for queries with yql syntax
-            setQuerySettings({...settings, queryMode: QUERY_MODES.script});
-        }
-
         changeUserInput({input: query.queryText});
         dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
@@ -60,15 +46,6 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
             sortable: false,
             width: 600,
         },
-        {
-            name: 'syntax',
-            header: 'Syntax',
-            render: ({row}) => {
-                return row.syntax === QUERY_SYNTAX.pg ? 'PostgreSQL' : 'YQL';
-            },
-            sortable: false,
-            width: 200,
-        },
     ];
 
     return (