Added disabled badge for not enabled fields (#116)

* Added disabled badge for not enabled fields

* E2E fixed

* Comments resolved

* Updated the E2E test case with multiple chips

Author: sachin-bruno

packages/oc-docs/e2e/components/overview/collection-configuration.component.ts

@@ -1,16 +1,25 @@
-import type { Locator } from '@playwright/test';
-import { BaseComponent } from '../base.component';
-import { SecretValueComponent } from '../secret-value.component';
+import type { Locator } from "@playwright/test";
+import { BaseComponent } from "../base.component";
+import { SecretValueComponent } from "../secret-value.component";
 
 export class ConfigurationSection extends BaseComponent {
-  readonly root = this.page.getByTestId('collection-config');
+  readonly root = this.page.getByTestId("collection-config");
 
-  readonly copyButton = this.root.getByTestId('collection-config-tests-copy');
+  readonly copyButton = this.root.getByTestId("collection-config-tests-copy");
 
-  readonly secret = new SecretValueComponent(this.page, 'collection-config-auth-secret');
+  readonly secret = new SecretValueComponent(
+    this.page,
+    "collection-config-auth-secret",
+  );
+
+  readonly disabledRows = this.root
+    .getByTestId("property-value-line")
+    .filter({ has: this.page.getByTestId("disabled-badge") });
 
   subHeading(name: string): Locator {
-    return this.root.getByTestId('collection-config-subheading').filter({ hasText: name });
+    return this.root
+      .getByTestId("collection-config-subheading")
+      .filter({ hasText: name });
   }
 
   async copyToClipboard(): Promise<void> {

packages/oc-docs/e2e/tests/overview/overview.spec.ts

@@ -1,4 +1,11 @@
 import { test, expect } from '../../playwright';
+import type { Locator } from '@playwright/test';
+
+const boundingBoxOf = async (locator: Locator) => {
+  const box = await locator.boundingBox();
+  if (box === null) throw new Error('expected the element to have a bounding box');
+  return box;
+};
 
 test.describe('Collection Overview', () => {
   test.beforeEach(async ({ overviewPage }) => {
@@ -79,4 +86,38 @@ test.describe('Collection Overview', () => {
       });
     });
   });
+
+  test('mobile: every Disabled chip stays pinned at the row end without overflowing', async ({ overviewPage, page }) => {
+    await page.setViewportSize({ width: 360, height: 800 });
+    const { configuration } = overviewPage;
+
+    const rows = configuration.disabledRows;
+    const count = await rows.count();
+    expect(count).toBeGreaterThan(0);
+
+    const card = await boundingBoxOf(configuration.root);
+
+    for (let i = 0; i < count; i += 1) {
+      const row = rows.nth(i);
+      const value = row.getByTestId('property-value');
+      const chip = await boundingBoxOf(row.getByTestId('disabled-badge'));
+      const valueBox = await boundingBoxOf(value);
+
+      await test.step(`row ${i}: the chip sits at the end — to the right of the value`, () => {
+        expect(chip.x).toBeGreaterThanOrEqual(valueBox.x + valueBox.width);
+      });
+
+      await test.step(`row ${i}: the chip stays within the config card, never clipped or overflowing`, () => {
+        expect(chip.x + chip.width).toBeLessThanOrEqual(card.x + card.width);
+      });
+
+      await test.step(`row ${i}: the value keeps its truncation styling, so a long value ellipsizes rather than pushing the chip off`, async () => {
+        const style = await value.evaluate((el) => {
+          const cs = getComputedStyle(el);
+          return { overflow: cs.overflow, textOverflow: cs.textOverflow, whiteSpace: cs.whiteSpace };
+        });
+        expect(style).toEqual({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
+      });
+    }
+  });
 });

packages/oc-docs/src/components/DisabledBadge/DisabledBadge.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { useRenderToDom } from '../../hooks/useRenderToDom';
+import { query } from '../../test-utils/dom';
+import { DisabledBadge } from './DisabledBadge';
+
+describe('DisabledBadge', () => {
+  it('renders a "Disabled" chip', () => {
+    const root = useRenderToDom(<DisabledBadge />);
+    expect(query(root, '.disabled-badge').text.trim()).toBe('Disabled');
+  });
+});

packages/oc-docs/src/components/DisabledBadge/DisabledBadge.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+export const DisabledBadge: React.FC = () => (
+  <StyledWrapper className="disabled-badge" data-testid="disabled-badge">Disabled</StyledWrapper>
+);
+
+export default DisabledBadge;

packages/oc-docs/src/components/DisabledBadge/StyledWrapper.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+export const StyledWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--text-muted);
+  background: var(--badge-bg);
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+`;

packages/oc-docs/src/components/ExecutionContext/AssertList/AssertList.spec.tsx

@@ -25,8 +25,8 @@ describe('AssertList', () => {
     expect(root.querySelector('.assert-expr')?.text.trim()).toBe('res.body.token is defined');
   });
 
-  it('marks a disabled assertion with the is-disabled class', () => {
+  it('marks a disabled assertion with the Disabled chip', () => {
     const root = useRenderToDom(<AssertList assertions={[disabled]} />);
-    expect(root.querySelector('.assert-item.is-disabled')).not.toBeNull();
+    expect(root.querySelector('.disabled-badge')).not.toBeNull();
   });
 });

packages/oc-docs/src/components/ExecutionContext/AssertList/AssertList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ScopeTag } from '../ScopeTag/ScopeTag';
+import { DisabledBadge } from '../../DisabledBadge/DisabledBadge';
 import { VariableText } from '../../VariableText/VariableText';
 import { TruncatedText } from '../../TruncatedText/TruncatedText';
 import { Description } from '../../Description/Description';
@@ -25,14 +26,15 @@ export const AssertList: React.FC<AssertListProps> = ({ assertions }) => {
       {assertions.map((assert, index) => {
         const text = assertionText(assert);
         return (
-          <div key={`${assert.expression}-${index}`} className={`assert-item ${assert.disabled ? 'is-disabled' : ''}`}>
+          <div key={`${assert.expression}-${index}`} className="assert-item">
             <div className="assert-row">
               <ScopeTag scope={assert.level} />
               <code className="assert-expr">
                 <TruncatedText text={text}>
                   <VariableText value={text} />
                 </TruncatedText>
               </code>
+              {assert.disabled ? <DisabledBadge /> : null}
             </div>
             <Description text={assert.description} />
           </div>

packages/oc-docs/src/components/ExecutionContext/AssertList/StyledWrapper.ts

@@ -7,9 +7,6 @@ export const StyledWrapper = styled.div`
   .assert-item:not(:first-child) {
     border-top: 0.0625rem solid var(--oc-border-border0);
   }
-  .assert-item.is-disabled {
-    opacity: 0.55;
-  }
   .assert-row {
     display: flex;
     align-items: center;

packages/oc-docs/src/components/ExecutionContext/VariablesPanel/VariablesPanel.spec.tsx

@@ -44,12 +44,12 @@ describe('VariablesPanel', () => {
     expect(html).toContain('JWT access token');
   });
 
-  it('marks a disabled variable so it can be visually dimmed', () => {
+  it('marks a disabled variable with the Disabled chip', () => {
     const html = renderToStaticMarkup(
       <VariablesPanel preVars={[{ name: 'legacy', value: 'v1', disabled: true }]} postVars={[]} />
     );
     expect(html).toContain('legacy');
-    expect(html).toContain('property-row--disabled'); // PropertyTable's disabled-row class
+    expect(html).toContain('disabled-badge');
   });
 
   describe('stacked variant (overview)', () => {

packages/oc-docs/src/components/FolderConfiguration/FolderConfiguration.spec.tsx

@@ -62,7 +62,7 @@ describe('FolderConfiguration', () => {
     expect(root.querySelector('[data-testid="folder-config-tests"]')).toBeTruthy();
   });
 
-  it('renders disabled headers (dimmed) and their descriptions', () => {
+  it('renders disabled headers with a Disabled chip and their descriptions', () => {
     const config: FolderConfig = {
       ...baseConfig,
       headers: [{ name: 'X-Debug', value: 'on', disabled: true, description: 'toggles debug logging' }]
@@ -72,7 +72,7 @@ describe('FolderConfiguration', () => {
     const headers = root.querySelector('[data-testid="folder-config-headers"]');
     expect(headers).toBeTruthy();
     expect(headers?.querySelector('.property-key')?.text.trim()).toBe('X-Debug');
-    expect(headers?.querySelector('.property-row--disabled')).toBeTruthy();
+    expect(headers?.querySelector('.disabled-badge')).toBeTruthy();
     expect(headers?.text).toContain('toggles debug logging');
   });