dashboard.component.html

<app-placeholder-table-view *ngIf="loading"></app-placeholder-table-view>

<app-banner *ngIf="isServerError" type="error" data-testid="connection-server-error-banner">
    <div *ngIf="serverError.details; else stringError" class="mat-body-1">
        <strong>{{serverError.abstract}}</strong>
        <p class="mat-body-1 error-details">{{serverError.details}}</p>
    </div>
    <ng-template #stringError>
        <p class="mat-body-1">{{serverError.abstract}}</p>
    </ng-template>
    <div class="error-actions">
            <a mat-stroked-button *ngIf="canEditConnection()"
                routerLink="/edit-db/{{connectionID}}">
                Check database credentials
            </a>
            <button type="button" *ngIf="isSaas" mat-flat-button color="warn" (click)="openIntercome()">Chat with support</button>
            <a *ngIf="!isSaas" mat-flat-button color="warn"
                href="https://github.com/rocket-admin/rocketadmin/issues" target="_blank">
                Report a bug
            </a>
    </div>
</app-banner>

<app-banner *ngIf="noTablesError" type="info" data-testid="no-tables-error-banner">
    <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
    <p class="mat-body-1">
        Rocketadmin don't have access to connection tables or there aren't any.
        Please grant us access to required tables or create new table.
        You can create a table with SQL editor
    </p>
</app-banner>

<ng-container *ngIf="!loading && !isServerError && !noTablesError">

    <!-- toggle button for mobile version -->
    <div class="sidenav-content__toggle-button" [ngClass]="{'sidenav-content__toggle-button_shown-mobile': !shownTableTitles}">
        <button mat-button type="button" class="toggle-button" (click)="toggleSideBar(); posthog.capture('Dashboard: toggle sidebar')"
            angulartics2On="click"
            angularticsAction="Dashboard: toggle sidebar"
            [angularticsProperties]="{'collapsed': !shownTableTitles}">
            <mat-icon>chevron_right</mat-icon>
        </button>
    </div>


    <mat-sidenav-container class="table-list-sidenav-container">
        <mat-sidenav #sideList mode="side" [(opened)]="shownTableTitles"
            class="table-list-sidenav"
            [ngClass]="{'side-bar_collapsed': !shownTableTitles}">
            <button mat-button type="button" *ngIf="shownTableTitles; else collapsedButton"
                class="toggle-button"
                (click)="toggleSideBar(); posthog.capture('Dashboard: toggle sidebar')"
                angulartics2On="click"
                angularticsAction="Dashboard: toggle sidebar"
                [angularticsProperties]="{'collapsed': !shownTableTitles}">
                Collapse
                <mat-icon>chevron_left</mat-icon>
            </button>

            <ng-template #collapsedButton>
                <button mat-icon-button type="button"
                    class="toggle-button"
                    (click)="toggleSideBar(); posthog.capture('Dashboard: toggle sidebar')"
                    angulartics2On="click"
                    angularticsAction="Dashboard: toggle sidebar"
                    [angularticsProperties]="{'collapsed': !shownTableTitles}">
                    <mat-icon>chevron_right</mat-icon>
                </button>
            </ng-template>
            <app-db-tables-list
                [collapsed]="!shownTableTitles"
                [connectionTitle]="connectionTitle"
                [tableFolders]="tableFolders"
                [connectionID]="connectionID"
                [selectedTable]="selectedTableName"
                [uiSettings]="uiSettings"
                (expandSidebar)="toggleSideBar()">
            </app-db-tables-list>
        </mat-sidenav>
        <mat-sidenav-content class="table-preview">
            <div class="table-preview-content">
                <div class="alerts">
                    <app-alert></app-alert>
                    <div *ngIf="dataSource.alert_settingsInfo && canEditConnection()" class="ai-config-alert">
                        <mat-icon class="ai-config-alert__icon">auto_awesome</mat-icon>
                        <div class="ai-config-alert__message mat-body-1">
                            <strong class="ai-config-alert__title">New: AI Configuration</strong>
                            <p class="ai-config-alert__text">Automatically configure all your tables with AI. You can adjust changes in Settings and UI widgets.</p>
                        </div>
                        <div class="ai-config-alert__actions">
                            <a mat-button [routerLink]="'/auto-configure/' + connectionID">Configure all</a>
                        </div>
                    </div>
                    <app-alert *ngIf="dataSource.alert_primaryKeysInfo" [alert]="dataSource.alert_primaryKeysInfo"></app-alert>
                    <app-alert *ngIf="dataSource.alert_widgetsWarning" [alert]="dataSource.alert_widgetsWarning"></app-alert>
                </div>

                <app-content-loader *ngIf="dataSource === null"></app-content-loader>
                <app-db-table-view *ngIf="dataSource"
                    [displayName]="selectedTableDisplayName"
                    [activeFilters]="filters"
                    [filterComparators]="comparators"
                    [name]="selectedTableName"
                    [table]="dataSource"
                    [selection]="selection"
                    [connectionID]="connectionID"
                    [isTestConnection]="currentConnectionIsTest"
                    [tableFolders]="tableFolders"
                    (openFilters)="openTableFilters($event)"
                    (removeFilter)="removeFilter($event)"
                    (resetAllFilters)="clearAllFilters()"
                    (search)="search($event)"
                    (activateActions)="activateActions($event)"
                    (applyFilter)="applyFilter($event)">
                </app-db-table-view>
            </div>
            <app-db-table-row-view *ngIf="selectedRow"
                [activeFilters]="filters"
            ></app-db-table-row-view>
            <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                [displayName]="selectedTableDisplayName"
                [tableColumns]="dataSource?.dataColumns || []"
                [sidebarExpanded]="shownTableTitles"
            ></app-db-table-ai-panel>
        </mat-sidenav-content>
    </mat-sidenav-container>
</ng-container>