Merge pull request #4431 from mzedel/men-7209

MEN-7209 - support releases with routing characters
mendersoftware · Jun 10, 2024 · ba14c8b · ba14c8b
2 parents 8b9658d + 39a6971
commit ba14c8b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/src/js/components/releases/dialogs/__snapshots__/artifactinformationform.test.js.snap b/src/js/components/releases/dialogs/__snapshots__/artifactinformationform.test.js.snap
@@ -935,10 +935,9 @@ label+.emotion-16 {
       class="MuiFormControl-root emotion-4"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-5"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard flexbox center-aligned emotion-5"
         data-shrink="false"
         for="release-name"
-        style="align-items: center; display: flex;"
       >
         Release name
         <div

diff --git a/src/js/components/releases/dialogs/artifactinformationform.js b/src/js/components/releases/dialogs/artifactinformationform.js
@@ -97,7 +97,7 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove,
       />
       <h4>Artifact information</h4>
       <FormControl>
-        <InputLabel htmlFor="release-name" style={{ alignItems: 'center', display: 'flex' }}>
+        <InputLabel htmlFor="release-name" className="flexbox center-aligned" onClick={e => e.preventDefault()}>
           Release name
           <InfoHintContainer>
             <MenderHelpTooltip id={HELPTOOLTIPS.releaseName.id} />

diff --git a/src/js/components/releases/releasedetails.js b/src/js/components/releases/releasedetails.js
@@ -52,6 +52,7 @@ import { removeArtifact, removeRelease, selectRelease, setReleaseTags, updateRel
 import { DEPLOYMENT_ROUTES } from '../../constants/deploymentConstants';
 import { FileSize, customSort, formatTime, toggle } from '../../helpers';
 import { getReleaseListState, getReleaseTags, getSelectedRelease, getUserCapabilities } from '../../selectors';
+import { generateReleasesPath } from '../../utils/locationutils';
 import useWindowSize from '../../utils/resizehook';
 import ChipSelect from '../common/chipselect';
 import { ConfirmationButtons, EditButton } from '../common/confirm';
@@ -396,8 +397,8 @@ export const ReleaseDetails = () => {
   const onRemoveArtifact = artifact => dispatch(removeArtifact(artifact.id)).finally(() => setShowRemoveArtifactDialog(false));
 
   const copyLinkToClipboard = () => {
-    const location = window.location.href.substring(0, window.location.href.indexOf('/releases') + '/releases'.length);
-    copy(`${location}/${releaseName}`);
+    const location = window.location.href.substring(0, window.location.href.indexOf('/releases'));
+    copy(`${location}${generateReleasesPath({ pageState: { selectedRelease: releaseName } })}`);
     dispatch(setSnackbar('Link copied to clipboard'));
   };
 

diff --git a/src/js/utils/locationutils.js b/src/js/utils/locationutils.js
@@ -396,14 +396,15 @@ export const formatReleases = ({ pageState: { searchTerm, selectedTags = [], tab
     )
     .join('&');
 
-export const generateReleasesPath = ({ pageState: { selectedRelease } }) => `${releasesRoot}${selectedRelease ? `/${selectedRelease}` : ''}`;
+export const generateReleasesPath = ({ pageState: { selectedRelease } }) =>
+  `${releasesRoot}${selectedRelease ? `/${encodeURIComponent(selectedRelease)}` : ''}`;
 
 export const parseReleasesQuery = (queryParams, extraProps) => {
   const name = queryParams.has('name') ? queryParams.get('name') : '';
   const tab = queryParams.has('tab') ? queryParams.get('tab') : undefined;
   const tags = queryParams.has('tag') ? queryParams.getAll('tag') : [];
   const type = queryParams.has('type') ? queryParams.get('type') : '';
-  let selectedRelease = extraProps.location.pathname.substring(releasesRoot.length + 1);
+  let selectedRelease = decodeURIComponent(extraProps.location.pathname.substring(releasesRoot.length + 1));
   if (!selectedRelease && extraProps.pageState.id?.length) {
     selectedRelease = extraProps.pageState.id[0];
   }