fix(elements-core): display end of url server vars correctly (stoplig…

…htio#2432)
dgitsystems · Oct 19, 2023 · ac55f02 · ac55f02
1 parent 9ee311b
commit ac55f02
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 62 deletions.
diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.13.7",
+  "version": "7.13.8",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

diff --git a/packages/elements-core/src/__fixtures__/operations/put-todos.ts b/packages/elements-core/src/__fixtures__/operations/put-todos.ts
@@ -282,7 +282,7 @@ export const httpOperation: IHttpOperation = {
     {
       id: '?http-server-todos-pr.stoplight.io?',
       description: 'PR',
-      url: '{proto}://x-{pr}.todos-pr.stoplight.io',
+      url: '{proto}://x-{pr}.todos-pr.stoplight.io:{port}',
       variables: {
         proto: {
           default: 'http',
@@ -291,6 +291,10 @@ export const httpOperation: IHttpOperation = {
         pr: {
           default: '1000',
         },
+        port: {
+          default: '80',
+          enum: ['443', '80'],
+        },
       },
     },
   ],

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.spec.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.spec.tsx
@@ -1,6 +1,7 @@
 import { HttpParamStyles, IHttpOperation } from '@stoplight/types';
 import { screen } from '@testing-library/dom';
 import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -57,6 +58,21 @@ describe('HttpOperation', () => {
 
       unmount();
     });
+
+    it('should correctly display with server variables at beginning, middle, and end', () => {
+      const { unmount } = render(<HttpOperation data={{ ...httpOperation, deprecated: false }} />);
+
+      const serversButton = screen.getByRole('button', { name: /server/i });
+      userEvent.click(serversButton);
+
+      const enableItem = screen.getByRole('menuitemradio', { name: /pr/i });
+      userEvent.click(enableItem);
+
+      expect(serversButton).toHaveTextContent('PR');
+
+      expect(screen.queryByText(/{proto}:\/\/x-{pr}.todos-pr.stoplight.io:{port}/)).toBeInTheDocument();
+      unmount();
+    });
   });
 
   describe('Security', () => {

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx
@@ -9,7 +9,6 @@ import { HttpMethodColors } from '../../../constants';
 import { MockingContext } from '../../../containers/MockingProvider';
 import { useResolvedObject } from '../../../context/InlineRefResolver';
 import { useOptionsCtx } from '../../../context/Options';
-import { useChosenServerUrl } from '../../../hooks/useChosenServerUrl';
 import { useIsCompact } from '../../../hooks/useIsCompact';
 import { MarkdownViewer } from '../../MarkdownViewer';
 import { chosenServerAtom, TryItWithRequestSamples } from '../../TryIt';
@@ -126,20 +125,14 @@ function MethodPath({ method, path }: MethodPathProps) {
 function MethodPathInner({ method, path, chosenServerUrl }: MethodPathProps & { chosenServerUrl: string }) {
   const isDark = useThemeIsDark();
   const fullUrl = `${chosenServerUrl}${path}`;
-  const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
 
   const pathElem = (
     <Flex overflowX="hidden" fontSize="lg" userSelect="all">
       <Box dir="rtl" color="muted" textOverflow="truncate" overflowX="hidden">
-        {leading}
-
-        {trailing !== null && (
-          <Box as="span" dir="ltr" style={{ unicodeBidi: 'bidi-override' }}>
-            {trailing}
-          </Box>
-        )}
+        <Box as="span" dir="ltr" style={{ unicodeBidi: 'bidi-override' }}>
+          {chosenServerUrl}
+        </Box>
       </Box>
-
       <Box fontWeight="semibold" flex={1}>
         {path}
       </Box>

diff --git a/packages/elements-core/src/hooks/__tests__/useChosenServerUrl.ts.spec.ts b/packages/elements-core/src/hooks/__tests__/useChosenServerUrl.ts.spec.ts
diff --git a/packages/elements-core/src/hooks/useChosenServerUrl.ts b/packages/elements-core/src/hooks/useChosenServerUrl.ts
diff --git a/packages/elements-dev-portal/package.json b/packages/elements-dev-portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "1.16.8",
+  "version": "1.16.9",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -64,7 +64,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.13.7",
+    "@stoplight/elements-core": "~7.13.8",
     "@stoplight/markdown-viewer": "^5.5.0",
     "@stoplight/mosaic": "^1.44.3",
     "@stoplight/path": "^1.3.2",

diff --git a/packages/elements-dev-portal/src/version.ts b/packages/elements-dev-portal/src/version.ts
@@ -1,2 +1,2 @@
 // auto-updated during build
-export const appVersion = '1.16.4';
+export const appVersion = '1.16.9';
diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "7.13.7",
+  "version": "7.13.8",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -62,7 +62,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.13.7",
+    "@stoplight/elements-core": "~7.13.8",
     "@stoplight/http-spec": "^6.0.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.44.3",