Remove pencil icons (#4018)

* Remove pencil icons.

* Removed used vars

* Updated playwright

client-src/elements/chromedash-feature-page.js

@@ -4,7 +4,7 @@ import {FeatureNotFoundError} from '../js-src/cs-client.js';
 import './chromedash-feature-detail';
 import {DETAILS_STYLES} from './chromedash-feature-detail';
 import './chromedash-feature-highlights.js';
-import {renderHTMLIf, showToastMessage} from './utils.js';
+import {showToastMessage} from './utils.js';
 
 const INACTIVE_STATES = ['No longer pursuing', 'Deprecated', 'Removed'];
 
@@ -14,10 +14,6 @@ export class ChromedashFeaturePage extends LitElement {
       ...SHARED_STYLES,
       ...DETAILS_STYLES,
       css`
-        .deprecated-ui {
-          color: var(--gray-2);
-        }
-
         #feature {
           background: var(--card-background);
           border-radius: var(--default-border-radius);
@@ -299,8 +295,6 @@ export class ChromedashFeaturePage extends LitElement {
   }
 
   renderSubHeader() {
-    const canEdit = this.userCanEdit();
-
     return html`
       <div id="subheader" style="display:block">
         <div class="tooltips" style="float:right">
@@ -363,26 +357,6 @@ export class ChromedashFeaturePage extends LitElement {
               <iron-icon icon="chromestatus:link"></iron-icon>
             </a>
           </span>
-          ${renderHTMLIf(
-            canEdit && !this.feature.is_enterprise_feature,
-            html`
-              <span
-                class="tooltip"
-                title="Deprecated. Please use 'Edit fields' buttons instead."
-              >
-                <a
-                  href="/guide/edit/${this.featureId}"
-                  class="editfeature"
-                  data-tooltip
-                >
-                  <iron-icon
-                    class="deprecated-ui"
-                    icon="chromestatus:create"
-                  ></iron-icon>
-                </a>
-              </span>
-            `
-          )}
         </div>
         <h2 id="breadcrumbs">
           <a href="${this.contextLink}">

client-src/elements/chromedash-feature-page_test.js

@@ -13,23 +13,6 @@ describe('chromedash-feature-page', () => {
     email: 'example@google.com',
     approvable_gate_types: [],
   };
-  const editor = {
-    can_create_feature: false,
-    can_edit_all: false,
-    editable_features: [123456],
-    is_admin: false,
-    email: 'editor@example.com',
-    approvable_gate_types: [],
-  };
-  const visitor = {
-    can_create_feature: false,
-    can_edit_all: false,
-    editable_features: [],
-    is_admin: false,
-    email: 'example@example.com',
-    approvable_gate_types: [],
-  };
-  const anon = null;
   const gatesPromise = Promise.resolve([]);
   const commentsPromise = Promise.resolve([]);
   const processPromise = Promise.resolve({
@@ -236,10 +219,6 @@ describe('chromedash-feature-page', () => {
     assert.include(subheaderDiv.innerHTML, 'href="fake crbug link"');
     // star icon is rendered and the feature is starred
     assert.include(subheaderDiv.innerHTML, 'icon="chromestatus:star"');
-    // edit icon is rendered (the test user can edit)
-    assert.include(subheaderDiv.innerHTML, 'icon="chromestatus:create"');
-    // approval icon is not rendered (the test user cannot approve)
-    assert.notInclude(subheaderDiv.innerHTML, 'icon="chromestatus:approval"');
 
     const breadcrumbsH2 = component.shadowRoot.querySelector('h2#breadcrumbs');
     assert.exists(breadcrumbsH2);
@@ -335,58 +314,4 @@ describe('chromedash-feature-page', () => {
     // But it does still include webdev views.
     assert.include(consensusSection.innerHTML, 'fake webdev view text');
   });
-
-  it('does offer editing to a listed editor', async () => {
-    const featureId = 123456;
-    const contextLink = '/features';
-    window.csClient.getFeature.withArgs(featureId).returns(validFeaturePromise);
-
-    const component = await fixture(
-      html`<chromedash-feature-page
-        .user=${editor}
-        .featureId=${featureId}
-        .contextLink=${contextLink}
-      >
-      </chromedash-feature-page>`
-    );
-    const subheaderDiv = component.shadowRoot.querySelector('div#subheader');
-    // Edit icon is offered because user's editable_features has this one.
-    assert.include(subheaderDiv.innerHTML, 'icon="chromestatus:create"');
-  });
-
-  it('does not offer editing to anon users', async () => {
-    const featureId = 123456;
-    const contextLink = '/features';
-    window.csClient.getFeature.withArgs(featureId).returns(validFeaturePromise);
-
-    const component = await fixture(
-      html`<chromedash-feature-page
-        .user=${anon}
-        .featureId=${featureId}
-        .contextLink=${contextLink}
-      >
-      </chromedash-feature-page>`
-    );
-    const subheaderDiv = component.shadowRoot.querySelector('div#subheader');
-    // Edit icon is not offered because anon cannot edit.
-    assert.notInclude(subheaderDiv.innerHTML, 'icon="chromestatus:create"');
-  });
-
-  it('does not offer editing to signed in visitors', async () => {
-    const featureId = 123456;
-    const contextLink = '/features';
-    window.csClient.getFeature.withArgs(featureId).returns(validFeaturePromise);
-
-    const component = await fixture(
-      html`<chromedash-feature-page
-        .user=${visitor}
-        .featureId=${featureId}
-        .contextLink=${contextLink}
-      >
-      </chromedash-feature-page>`
-    );
-    const subheaderDiv = component.shadowRoot.querySelector('div#subheader');
-    // Edit icon is not offered because the visitor cannot edit.
-    assert.notInclude(subheaderDiv.innerHTML, 'icon="chromestatus:create"');
-  });
 });

client-src/elements/chromedash-feature-row.js

@@ -38,9 +38,6 @@ class ChromedashFeatureRow extends LitElement {
           display: table-row;
           background: var(--table-row-background);
         }
-        sl-icon-button.deprecated-ui::part(base) {
-          color: var(--gray-2);
-        }
         td {
           padding: var(--content-padding-half);
           border-bottom: var(--table-divider);
@@ -103,17 +100,6 @@ class ChromedashFeatureRow extends LitElement {
     });
   }
 
-  renderEditIcon(feature) {
-    return html`
-      <sl-icon-button
-        class="deprecated-ui"
-        href="/guide/edit/${feature.id}"
-        title="Deprecated. Please click the feature name and use 'Edit fields' buttons."
-        name="pencil-fill"
-      ></sl-icon-button>
-    `;
-  }
-
   renderStarIcon(feature) {
     return html`
       <sl-icon-button
@@ -130,10 +116,7 @@ class ChromedashFeatureRow extends LitElement {
 
   renderIcons(feature) {
     if (this.signedIn) {
-      return html`
-        ${this.canEdit ? this.renderEditIcon(feature) : nothing}
-        ${this.renderStarIcon(feature)}
-      `;
+      return html` ${this.renderStarIcon(feature)} `;
     } else {
       return nothing;
     }

client-src/elements/chromedash-feature.js

@@ -214,22 +214,6 @@ class ChromedashFeature extends LitElement {
       <hgroup @click="${this._togglePanelExpansion}">
         <h2>
           <a href="/feature/${this.feature.id}">${this.feature.name}</a>
-          ${this.canEdit
-            ? html`
-                <span
-                  class="tooltip"
-                  title="Deprecated. Please click the feature name and use 'Edit fields' buttons."
-                >
-                  <a
-                    href="/guide/edit/${this.feature.id}"
-                    data-tooltip
-                    class="deprecated-ui"
-                  >
-                    <iron-icon icon="chromestatus:create"></iron-icon>
-                  </a>
-                </span>
-              `
-            : nothing}
         </h2>
         <div class="iconrow">
           <span

client-src/elements/chromedash-guide-verify-accuracy-page.js

@@ -121,7 +121,7 @@ export class ChromedashGuideVerifyAccuracyPage extends LitElement {
   }
 
   handleCancelClick() {
-    window.location.href = `/guide/edit/${this.featureId}`;
+    window.location.href = `/feature/${this.featureId}`;
   }
 
   renderSkeletons() {
@@ -147,7 +147,7 @@ export class ChromedashGuideVerifyAccuracyPage extends LitElement {
     return html`
       <div id="subheader">
         <h2 id="breadcrumbs">
-          <a href="/guide/edit/${this.featureId}">
+          <a href="/feature/${this.featureId}">
             <iron-icon icon="chromestatus:arrow-back"></iron-icon>
             Verify feature data for ${this.feature.name}
           </a>

client-src/elements/chromedash-guide-verify-accuracy-page_test.js

@@ -124,7 +124,7 @@ describe('chromedash-guide-verify-accuracy-page', () => {
     const subheaderDiv = component.shadowRoot.querySelector('div#subheader');
     assert.exists(subheaderDiv);
     // subheader title is correct and clickable
-    assert.include(subheaderDiv.innerHTML, 'href="/guide/edit/123456"');
+    assert.include(subheaderDiv.innerHTML, 'href="/feature/123456"');
     assert.include(subheaderDiv.innerHTML, 'Verify feature data for');
 
     // feature form, hidden token field, and submit/cancel buttons exist

packages/playwright/tests/chromedash-guide-edit-page_pwtest.js

@@ -1,41 +0,0 @@
-// @ts-check
-import { test, expect } from '@playwright/test';
-import { editFeature, captureConsoleMessages, login, logout, createNewFeature } from './test_utils';
-
-
-test.beforeEach(async ({ page }, testInfo) => {
-    captureConsoleMessages(page);
-    testInfo.setTimeout(90000);
-
-    // Login before running each test.
-    await login(page);
-});
-
-test.afterEach(async ({ page }) => {
-    // Logout after running each test.
-    await logout(page);
-});
-
-
-test('edit feature', async ({ page }) => {
-    await createNewFeature(page);
-    await editFeature(page);
-
-    // Screenshot editor page
-    await expect(page).toHaveScreenshot('new-feature-edit.png');
-
-    // The following causes flakey errors.
-    // // Register to accept the confirm dialog before clicking to delete.
-    // page.once('dialog', dialog => dialog.accept());
-
-    //   // Delete the new feature.
-    // const deleteButton = page.locator('a[id$="delete-feature"]');
-    // await deleteButton.click();
-    // await delay(500);
-
-    // Screenshot the feature list after deletion.
-    // Not yet, since deletion only marks the feature as deleted,
-    // and the resulting page is always different.
-    // await expect(page).toHaveScreenshot('new-feature-deleted.png');
-    // await delay(500);
-});

packages/playwright/tests/chromedash-guide-editall-page_pwtest.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
-import { captureConsoleMessages, delay, login, logout, createNewFeature, deleteFeature } from './test_utils';
+import { captureConsoleMessages, delay, login, logout, createNewFeature } from './test_utils';
 
 
 /**

packages/playwright/tests/chromedash-guide-new-page_pwtest.js

@@ -110,6 +110,4 @@ test('create new feature', async ({ page }) => {
     mask: [page.locator('section[id="history"]')]
   });
   await delay(500);
-
-  // await deleteFeature(page);
 });

packages/playwright/tests/test_utils.js

@@ -342,32 +342,3 @@ export async function createNewFeature(page) {
   await page.waitForURL('**/feature/*');
   await delay(500);
 }
-
-
-/**
- * Starting from the feature page, edit the feature
- * @param {import('@playwright/test').Page} page
- */
-export async function editFeature(page) {
-  // Edit the feature.
-  const editButton = page.locator('a.editfeature');
-  await delay(500);
-  await editButton.click();
-  await delay(500);
-
-  await page.waitForURL('**/guide/edit/*');
-  await delay(500);
-}
-
-
-/**
- * Starting from the feature page, delete the feature
- * @param {import('@playwright/test').Page} page
- */
-export async function deleteFeature(page) {
-  await editFeature(page);
-
-  const deleteButton = page.locator('#delete-feature');
-  await deleteButton.click();
-  await delay(500);
-}