How to use the protractor.ExpectedConditions.elementToBeClickable function in protractor

uiElementName: string,
  newValue: string,
) {
  /* Note on the use of the SendKeys Protractor function: There is a widely reported
     bug in SendKeys where the function randomly drops characters. Most of the
     workarounds for this bug involve sending individual characters one-by-one,
     separated by calls to browser.sleep() or calls to Browser.executeScript
     to bypass the Protractor API. In our testing, we found neither of these approaches
     to be acceptable as we do not want to introduce sleep statements and calls to
     Browser.executeScript failed to retain values in text fields when buttons are
     subsequently pressed. We also found that the element.clear() function failed to
     clear text from text fields and that clearing text fields by sending a control/a
     sequence encountered the bug where characters are dropped by SendKeys. After
     experimentation, we found what *seems* to avoid most instances of characters being
     dropped by adding both "before" and "after" text in SendKeys calls. */
  await browser.wait(until.elementToBeClickable(uiElement));
  await uiElement.click();
  await uiElement.sendKeys('text was', Key.chord(Key.CONTROL, 'a'), newValue);

  uiElement.getAttribute('value').then(async function(insertedValue) {
    if (insertedValue !== newValue) {
      console.info('sendKeys failed for ', uiElementName, ' - retry', insertedValue, newValue);
      await uiElement.sendKeys('text was', Key.chord(Key.CONTROL, 'a'), newValue);

      // eslint-disable-next-line promise/no-nesting
      uiElement.getAttribute('value').then(async function(insertedValue2) {
        if (insertedValue2 !== newValue) {
          console.info(
            'sendKeys failed for ',
            uiElementName,
            ' - second retry',
            insertedValue2,

await builder.waitNextBuildFinished(lastbuild);
        // Build #2
        await builder.goForce();
        await force.clickStartButton();
        await builder.go();
        await builder.waitNextBuildFinished(+lastbuild + 1);
        await builder.goBuild(+lastbuild + 2);
        const lastBuildURL = await browser.getCurrentUrl();
        let previousButton = builder.getPreviousButton();
        await browser.wait(EC.elementToBeClickable(previousButton),
                           5000,
                           "previous button not clickable");
        await previousButton.click()
        expect(await browser.getCurrentUrl()).not.toMatch(lastBuildURL);
        let nextButton = builder.getNextButton();
        await browser.wait(EC.elementToBeClickable(nextButton),
                           5000,
                           "next button not clickable");
        await nextButton.click();
        expect(await browser.getCurrentUrl()).toMatch(lastBuildURL);
    });
});

export const deleteVariable = async () => {
  await isLoaded();
  await browser.wait(until.elementToBeClickable(saveBtn), BROWSER_TIMEOUT);
  await deleteBtn.click();
  await browser.wait(until.elementToBeClickable(saveBtn), BROWSER_TIMEOUT);
  await saveBtn.click();
};

clickKebabAction(name, deleteHumanizedKind(kind)).then(async () => {
    switch (kind) {
      case 'Namespace':
        await browser.wait(until.presenceOf($('input[placeholder="Enter name"]')));
        await $('input[placeholder="Enter name"]').sendKeys(name);
        break;
      default:
        await browser.wait(until.presenceOf($('#confirm-action')));
        break;
    }

    await $('#confirm-action').click();

    const kebabIsDisabled = until.not(
      until.elementToBeClickable(rowForName(name).$('.co-kebab__button')),
    );
    const listIsEmpty = until.textToBePresentInElement($('.cos-status-box > .text-center'), 'No ');
    const rowIsGone = until.not(until.presenceOf(rowForName(name).$('.co-kebab')));
    return browser.wait(until.or(kebabIsDisabled, until.or(listIsEmpty, rowIsGone)));
  });

async goBuild() {
        const buildList = element.all(By.css('text.id')).last();
        await browser.wait(EC.elementToBeClickable(buildList),
                           5000,
                           "build list not clickable");
        await buildList.click();
    }

it('validate create mapping step', async function () {
      await stepsPage.setStepName("SimpleJSONMapping");
      await stepsPage.setStepDescription("Mapping SimpleJSON docs");
      await stepsPage.clickSourceTypeRadioButton("collection");
      await browser.wait(EC.elementToBeClickable(stepsPage.stepSourceCollectionDropDown));
      await stepsPage.clickStepSourceCollectionDropDown();
      await browser.wait(EC.elementToBeClickable(stepsPage.stepSourceCollectionOptions("SimpleJSONIngest")));
      await stepsPage.clickStepSourceCollectionOption("SimpleJSONIngest");
      await stepsPage.clickStepTargetEntityDropDown();
      await browser.wait(EC.elementToBeClickable(stepsPage.stepTargetEntityOptions("SimpleJSON")));
      await browser.sleep(5000);
      await stepsPage.clickStepTargetEntityOption("SimpleJSON");
      await stepsPage.clickStepCancelSave("save");
      await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));
      await browser.sleep(3000);
    });

async clickMergeCollectionCancelSaveButton(option: string) {
    let button = this.mergeCollectionCancelSaveButton(option);
    await browser.wait(EC.elementToBeClickable(button));
    return await button.click();
  }

await ingestStepPage.clickDelimitedTextSeparatorDropDown();
          await ingestStepPage.clickSourceFileTypeOption(step.separator);
          await browser.sleep(1000);
        }
      }
      await ingestStepPage.targetFileTypeDropDown.click();
      await ingestStepPage.clickSourceFileTypeOption(step.targetFileType);
    } else {
      await browser.wait(EC.visibilityOf(stepsPage.stepTypeOptions(step.stepType)));
      await stepsPage.clickStepTypeOption(step.stepType);
      await browser.wait(EC.visibilityOf(stepsPage.stepName));
      await stepsPage.setStepName(step.stepName);
      await stepsPage.setStepDescription(step.stepDesc);
      await stepsPage.clickSourceTypeRadioButton("collection");
      await browser.sleep(2000);
      await browser.wait(EC.elementToBeClickable(stepsPage.stepSourceCollectionDropDown));
      await stepsPage.clickStepSourceCollectionDropDown();
      await browser.sleep(2000);
      await browser.wait(EC.elementToBeClickable(stepsPage.stepSourceCollectionOptions(step.sourceCollection)));
      await stepsPage.clickStepSourceCollectionOption(step.sourceCollection);
      await stepsPage.clickStepTargetEntityDropDown();
      await browser.sleep(2000);
      await browser.wait(EC.elementToBeClickable(stepsPage.stepTargetEntityOptions(step.targetEntity)));
      await stepsPage.clickStepTargetEntityOption(step.targetEntity);
      await stepsPage.clickStepCancelSave("save");
      await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));
      await browser.sleep(5000);
      await browser.wait(EC.elementToBeClickable(stepsPage.stepSelectContainer(step.stepName)), 5000);
      await browser.executeScript("arguments[0].click();", stepsPage.stepSelectContainer(step.stepName));
      //await stepsPage.stepSelectContainer(step.stepName).click();
      await expect(stepsPage.stepDetailsName.getText()).toEqual(step.stepName);
    }

async createFlow(flow) {
    await appPage.clickFlowTab();
    await browser.sleep(3000);
    await browser.wait(EC.visibilityOf(manageFlowPage.newFlowButton));
    await browser.wait(EC.elementToBeClickable(manageFlowPage.newFlowButton), 5000);
    await manageFlowPage.clickNewFlowButton();
    await browser.sleep(2000);
    await browser.wait(EC.visibilityOf(manageFlowPage.flowDialogBoxHeader('New Flow')));
    await browser.wait(EC.elementToBeClickable(manageFlowPage.flowForm('name')), 5000);
    await manageFlowPage.setFlowForm("name", flow.flowName);
    if (flow.flowDesc != null) {
      await browser.wait(EC.elementToBeClickable(manageFlowPage.flowForm('desc')), 5000);
      await manageFlowPage.setFlowForm("desc", flow.flowDesc);
    }
    if (flow.batchSize != null || flow.threadCount != null || (flow.options != null && flow.options.size > 0)) {
      await browser.wait(EC.elementToBeClickable(manageFlowPage.advSettingsExpandCollapse), 5000);
      await manageFlowPage.clickAdvSettingsExpandCollapse();
    }
    if (flow.batchSize != null) {
      await manageFlowPage.setFlowForm("batch-size", flow.batchSize);
    }
    if (flow.threadCount != null) {
      await manageFlowPage.setFlowForm("thread-count", flow.threadCount);
    }
    if (flow.options != null) {
      for (let n of flow.options) {
        await manageFlowPage.addOptions.click();
        await manageFlowPage.setFlowOptions(n, "key", flow.options.n[0]);
        await manageFlowPage.setFlowOptions(n, "value", flow.options.n[1]);
      }
    }
    await browser.wait(EC.elementToBeClickable(manageFlowPage.flowCancelSaveButton('save')));

async checkBuildResult() {
        const firstLinkInPopup = element.all(By.css('.modal-dialog a')).first();
        await browser.wait(EC.elementToBeClickable(firstLinkInPopup),
                           5000,
                           "first link in popup not clickable");
        await firstLinkInPopup.click();
        const currentUrl = await browser.getCurrentUrl();
        expect(currentUrl).toContain("builders/");
        expect(currentUrl).toContain("builds/");
    }