cosmos-explorer/src/Explorer/Tree/DatabaseTreeNode.html

<div class="pointerCursor">
  <div
    role="treeitem"
    tabindex="0"
    data-test="databaseMenu"
    class="databaseMenu treeHovermargin highlight"
    data-bind="
        click: $data.expandCollapseDatabase,
        event: {
            keydown: onKeyDown,
            keypress: onKeyPress,
            contextmenu: $data.contextMenu.show
        },
        clickBubble: false,
        contextmenuBubble: false,
        css:{
            contextmenushowing: $data.contextMenu.visible,
            highlight: true,
            databaseNodeSelected: isDatabaseNodeSelected()
        },
        attr:{
            'aria-expanded': $data.isDatabaseExpanded,
            'aria-selected': isDatabaseNodeSelected()
        }"
  >
    <span
      class="databaseId databaseCollChildTextOverflow"
      data-bind="
            attr: {
                title: $data.id()
            }"
    >
      <img
        class="imgiconwidth collectionsTreeCollapseExpand"
        src="/Triangle-right.svg"
        alt="Show database properties"
        data-bind="visible: !$data.isDatabaseExpanded()"
      />
      <img
        class="imgiconwidth collectionsTreeCollapseExpand"
        src="/Triangle-down.svg"
        alt="Hide database properties"
        data-bind="visible: $data.isDatabaseExpanded()"
      />
      <img src="/Azure-Cosmos-DB.svg" alt="Database" />
      <!--ko text: $data.id--><!--/ko-->
    </span>
    <span
      class="menuEllipsis"
      data-test="databaseEllipsisMenu"
      name="context menu"
      role="button"
      data-bind="
                    click: $data.contextMenu.show,
                    clickBubble: false
                "
      >&hellip;</span
    >
  </div>

  <div class="databaseList" data-test="databaseList" data-bind="visible: $data.isDatabaseExpanded">
    <!-- Scale & Setings Node - Start -->
    <div data-bind="visible: $data.isDatabaseShared">
      <div
        role="treeitem"
        class="databaseCollChildTextOverflow treeHovermargin highlight"
        tabindex="0"
        data-bind="
                click: $data.onSettingsClick,
                event: {
                    keydown: onSettingsKeyDown,
                    keypress: onSettingsKeyPress
                },
                css: {
                    highlight: true,
                    collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 11
                },
                attr:{
                    'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 11
                }"
      >
        <span class="databaseDocuments"> Scale </span>
      </div>
    </div>
    <!-- Scale & Setings Node - End -->
    <div data-bind="foreach: $data.collections">
      <collection-node params="{data: $data}"></collection-node>
      <collection-node-context-menu params="{data: $data}"></collection-node-context-menu>
    </div>
  </div>

  <!-- Database Context Menu - Start -->
  <div data-bind="event: { keydown: onMenuKeyDown }">
    <div
      class="context-menu-background"
      data-bind="
            visible: $data.contextMenu.visible,
            click: $data.contextMenu.hide"
    ></div>

    <div
      class="context-menu"
      data-test="databaseContextMenu"
      data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
    >
      <command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
    </div>
  </div>
  <!-- Database Context Menu - End -->
</div>