ui/src/app/help/help.component.html

<!--
~ 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.
~
-->

<sp-basic-view>
    <div fxLayout="row" nav>
        <div fxFlex="100">
            <div fxFlex="100" fxLayout="row">
                <div fxFlex fxLayoutAlign="start center" [attr.id]="'helpTabs'">
                    <mat-tab-group
                        [selectedIndex]="selectedIndex"
                        (selectedIndexChange)="selectedIndexChange($event)"
                        color="accent"
                    >
                        <mat-tab [label]="'Info' | translate"></mat-tab>
                        @if (showDocumentationTab) {
                            <mat-tab
                                [label]="'Documentation' | translate"
                            ></mat-tab>
                        }
                        <mat-tab [label]="'Shortcuts' | translate"></mat-tab>
                    </mat-tab-group>
                </div>
            </div>
        </div>
    </div>

    <div
        class="fixed-height page-container-padding-inner"
        fxLayout="column"
        fxFlex="100"
    >
        @if (selectedIndex === 0) {
            <div class="fixed-height" fxLayout="column" fxFlex="100">
                <sp-info-tab></sp-info-tab>
            </div>
        }
        @if (showDocumentationTab && selectedIndex === 1) {
            <div class="fixed-height" fxLayout="column" fxFlex="100">
                <sp-documentation-tab
                    [documentationLink]="documentationLink"
                ></sp-documentation-tab>
            </div>
        }
        @if (selectedIndex === shortcutsTabIndex) {
            <div class="fixed-height" fxLayout="column" fxFlex="100">
                <sp-shortcuts-tab></sp-shortcuts-tab>
            </div>
        }
    </div>
</sp-basic-view>