cosmos-explorer/src/Explorer/Panes/RenewAdHocAccessPane.html

<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
  <div
    class="contextual-pane-out"
    data-bind="
                    click: cancel,
                    clickBubble: false"
  ></div>
  <div class="contextual-pane" id="renewadhocaccesspane">
    <!-- Renew ad-hoc access form - Start -->
    <div class="contextual-pane-in">
      <form class="paneContentContainer" data-bind="submit: submit">
        <!-- Renew ad-hoc access header - Start -->
        <div class="firstdivbg headerline">
          <span role="heading" aria-level="2" data-bind="text: title"></span>
          <div
            class="closeImg"
            role="button"
            aria-label="Close pane"
            tabindex="0"
            data-bind="
                                    click: cancel"
          >
            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
          </div>
        </div>
        <!-- Renew ad-hoc access header - End -->

        <!-- Renew ad-hoc access errors - Start -->
        <div
          class="warningErrorContainer"
          aria-live="assertive"
          data-bind="visible: formErrors() && formErrors() !== ''"
        >
          <div class="warningErrorContent">
            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error"/></span>
            <span class="warningErrorDetailsLinkContainer">
              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
              <a
                class="errorLink"
                role="link"
                data-bind="
                            visible: formErrorsDetails() && formErrorsDetails() !== '',
                            click: showErrorDetails"
                >More details</a
              >
            </span>
          </div>
        </div>
        <!-- Renew ad-hoc access errors - End -->

        <!-- Renew ad-hoc access inputs - Start -->
        <div class="paneMainContent">
          <div class="renewUploadItemsHeader">Provide a valid account connection string</div>
          <input
            class="accessKeyInput"
            type="text"
            placeholder="Enter a connection string"
            required
            data-bind="value: accessKey"
          />
          <div
            class="renewAccessExpandCollapse"
            data-bind="click: onShowHelperImageClick, event: { keypress: onShowHelperImageKeyPress }"
          >
            <img src="/Triangle-right.svg" alt="Show renew access image" data-bind="visible: !isHelperImageVisible()" />
            <img src="/Triangle-down.svg" alt="Hide renew access image" data-bind="visible: isHelperImageVisible()" />
            <span class="AccountNavigationText">Where do I find the Connection String?</span>
          </div>
          <div class="renewAccessImg" data-bind="visible: isHelperImageVisible()">
            <span class="AccountNavigationText"
              >To get the connection string, navigate to your Azure Cosmos DB account in Azure Portal, select Keys and
              copy the connection string.</span
            >
            <img src="/ConnectionString_Artwork.png" />
          </div>
        </div>
        <div class="paneFooter">
          <div class="leftpanel-okbut"><input type="submit" value="Connect" class="btncreatecoll1" /></div>
        </div>
        <!-- Renew ad-hoc access - End -->
      </form>
    </div>
    <!-- Renew ad-hoc access form  - Start -->
    <!-- Loader - Start -->
    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
    </div>
    <!-- Loader - End -->
  </div>
</div>