Skip to content

made the slug easier to read #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

made the slug easier to read #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 35 additions & 17 deletions admin/src/components/PermalinkInput/AncestorsPath.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,42 @@
import React, { Fragment } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';

import { Delimiter, PathLabel } from './styled';
import { More } from '@strapi/icons';
import { Delimiter, ExpandButton, HideButton, PathLabel } from './styled';

const AncestorsPath = ({ hasError, path }) => {
return (
<PathLabel hasError={hasError}>
{path.split('/').map((part, i) => (
<Fragment
key={
/* eslint-disable-next-line react/no-array-index-key */
`${part}-${i}`
}
>
{part}
<Delimiter hasError={hasError}>/</Delimiter>
</Fragment>
))}
</PathLabel>
);
const [expanded, setExpanded] = useState(false);

if (expanded) {
return (
<HideButton onClick={() => setExpanded(false)} label="Show ancestor path">
<PathLabel hasError={hasError}>
{path.split(/(?:\/|~)+/).map((part, i) => (
<Fragment
key={
/* eslint-disable-next-line react/no-array-index-key */
`${part}-${i}`
}
>
{part}
<Delimiter hasError={hasError}>/</Delimiter>
</Fragment>
))}
</PathLabel>
</HideButton>
);
} else {
return (
<ExpandButton
hasError={hasError}
variant="secondary"
label="Show ancestor path"
onClick={() => setExpanded(true)}
>
<More />
</ExpandButton>
);
}
};

AncestorsPath.defaultProps = {
Expand Down
165 changes: 81 additions & 84 deletions admin/src/components/PermalinkInput/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ import {
} from '../../utils';

import AncestorsPath from './AncestorsPath';
import { EndActionWrapper, FieldActionWrapper, LoadingWrapper, TextValidation } from './styled';
import {
EndActionWrapper,
FieldActionWrapper,
LoadingWrapper,
RelativeInputWrapper,
TextValidation,
} from './styled';

/**
* @TODO - Refactor this component to NOT rely on disabling the eslint rule for
Expand Down Expand Up @@ -67,6 +73,7 @@ const PermalinkInput = forwardRef((props, ref) => {
!isCreatingEntry && !hasDifferentRelationUID && targetRelationValue?.id === modifiedData.id;

const initialValue = initialData[name];
const locale = initialData.locale;
const initialRelationValue = getRelationValue(initialData, targetFieldConfig.targetRelation);
const initialAncestorsPath = getPermalinkAncestors(initialValue);
const initialSlug = getPermalinkSlug(initialValue);
Expand Down Expand Up @@ -140,10 +147,14 @@ const PermalinkInput = forwardRef((props, ref) => {

if (!newSlug) {
setIsLoading(false);

return;
}

const params = `${contentTypeUID}/${encodeURIComponent(newSlug)}`;
const params = `${contentTypeUID}/${encodeURIComponent(newSlug)}${
locale ? `/${locale}` : ''
}`;

const endpoint = getApiUrl(`${pluginId}/check-availability/${params}`);

const { data } = await fetchClient.get(endpoint);
Expand Down Expand Up @@ -220,6 +231,7 @@ const PermalinkInput = forwardRef((props, ref) => {
if (!targetRelationValue) {
removeAncestorsPath();
setIsLoading(false);

return;
}

Expand Down Expand Up @@ -322,6 +334,7 @@ const PermalinkInput = forwardRef((props, ref) => {
setIsOrphan(false);
setAncestorsPath(null);
setFieldError(null);

return;
}

Expand Down Expand Up @@ -451,24 +464,6 @@ const PermalinkInput = forwardRef((props, ref) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isCreatingEntry, isCustomized, debouncedTargetValue]);

/*
This use effect clashes with the check connection use effect,
effectively overwriting the ancestors path when changing locales.
I am leaving this here for now as I dont know what other potential
side effects this has, but it is not needed for the ancestors path
to be correctly set.
*/

// useEffect(() => {
// // This is required for scenarios like switching between locales to ensure
// // the field value updates with the locale change.
// const newAncestorsPath = getPermalinkAncestors(initialValue);
// const newSlug = getPermalinkSlug(initialValue);

// setFieldState(newAncestorsPath, newSlug, true);
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [initialData.id]);

useEffect(() => {
// Remove ancestors path if we have selected the current entity as the parent.
if (selectedSelfRelation) {
Expand Down Expand Up @@ -503,71 +498,73 @@ const PermalinkInput = forwardRef((props, ref) => {
}, [initialRelationValue, targetRelationValue]);

return (
<TextInput
ref={ref}
disabled={disabled}
error={fieldError ?? formattedError}
hint={hint}
label={label}
labelAction={labelAction}
name={name}
onChange={handleChange}
placeholder={formattedPlaceholder}
value={slug ? getPermalink(null, slug, lowercase) : ''}
required={required}
startAction={
ancestorsPath ? (
<AncestorsPath path={ancestorsPath} hasError={!!fieldError || !!error} />
) : null
}
endAction={
<EndActionWrapper>
{!regenerateLabel && availability && availability?.isAvailable && (
<TextValidation alignItems="center" justifyContent="flex-end">
<CheckCircle />
<Typography textColor="success600" variant="pi">
{formatMessage({
id: 'content-manager.components.uid.available',
defaultMessage: 'Available',
})}
</Typography>
</TextValidation>
)}
{!regenerateLabel && availability && !availability?.isAvailable && (
<TextValidation alignItems="center" justifyContent="flex-end" notAvailable>
<ExclamationMarkCircle />
<Typography textColor="danger600" variant="pi">
{formatMessage({
id: 'content-manager.components.uid.unavailable',
defaultMessage: 'Unavailable',
})}
</Typography>
</TextValidation>
)}
{regenerateLabel && (
<TextValidation alignItems="center" justifyContent="flex-end">
<Typography textColor="primary600" variant="pi">
{regenerateLabel}
</Typography>
</TextValidation>
)}
<FieldActionWrapper
label="regenerate"
onClick={handleRefresh}
onMouseEnter={handleGenerateMouseEnter}
onMouseLeave={handleGenerateMouseLeave}
>
{isLoading ? (
<LoadingWrapper>
<Loader />
</LoadingWrapper>
) : (
<Refresh />
<RelativeInputWrapper>
<TextInput
ref={ref}
disabled={disabled}
error={fieldError ?? formattedError}
hint={hint}
label={label}
labelAction={labelAction}
name={name}
onChange={handleChange}
placeholder={formattedPlaceholder}
value={slug ? getPermalink(null, slug, lowercase) : ''}
required={required}
startAction={
ancestorsPath ? (
<AncestorsPath path={ancestorsPath} hasError={!!fieldError || !!error} />
) : null
}
endAction={
<EndActionWrapper>
{!regenerateLabel && availability && availability?.isAvailable && (
<TextValidation alignItems="center" justifyContent="flex-end">
<CheckCircle />
<Typography textColor="success600" variant="pi">
{formatMessage({
id: 'content-manager.components.uid.available',
defaultMessage: 'Available',
})}
</Typography>
</TextValidation>
)}
</FieldActionWrapper>
</EndActionWrapper>
}
/>
{!regenerateLabel && availability && !availability?.isAvailable && (
<TextValidation alignItems="center" justifyContent="flex-end" notAvailable>
<ExclamationMarkCircle />
<Typography textColor="danger600" variant="pi">
{formatMessage({
id: 'content-manager.components.uid.unavailable',
defaultMessage: 'Unavailable',
})}
</Typography>
</TextValidation>
)}
{regenerateLabel && (
<TextValidation alignItems="center" justifyContent="flex-end">
<Typography textColor="primary600" variant="pi">
{regenerateLabel}
</Typography>
</TextValidation>
)}
<FieldActionWrapper
label="regenerate"
onClick={handleRefresh}
onMouseEnter={handleGenerateMouseEnter}
onMouseLeave={handleGenerateMouseLeave}
>
{isLoading ? (
<LoadingWrapper>
<Loader />
</LoadingWrapper>
) : (
<Refresh />
)}
</FieldActionWrapper>
</EndActionWrapper>
}
/>
</RelativeInputWrapper>
);
});

Expand Down
32 changes: 29 additions & 3 deletions admin/src/components/PermalinkInput/styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import styled, { keyframes } from 'styled-components';
import { Box } from '@strapi/design-system/Box';
import { FieldAction } from '@strapi/design-system/Field';
import { Flex } from '@strapi/design-system/Flex';
import { Button, IconButton } from '@strapi/design-system';

const rotation = keyframes`
from {
Expand All @@ -16,14 +17,34 @@ export const LoadingWrapper = styled(Flex)`
animation: ${rotation} 2s infinite linear;
`;

export const ExpandButton = styled(IconButton)`
height: 1rem;
width: 1.5rem;
border: none;
background: ${({ theme, hasError }) => theme.colors[hasError ? 'danger100' : 'primary100']};
color: ${({ theme, hasError }) => theme.colors[hasError ? 'danger700' : 'primary700']};
`;

export const HideButton = styled(Button)`
padding: 0;
height: fit-content;
background-color: transparent;
color: transparent;
border: none;

:hover {
border: none;
}
`;

export const PathLabel = styled.span`
margin-right: -4px;
padding: 1px 4px 2px 4px;
background: ${({ theme, hasError }) => theme.colors[hasError ? 'danger100' : 'primary100']};
border-radius: ${({ theme }) => theme.borderRadius};
color: ${({ theme, hasError }) => theme.colors[hasError ? 'danger700' : 'primary700']};
font-weight: ${({ theme }) => theme.fontWeights.normal};
font-size: ${({ theme }) => theme.fontSizes[2]};
font-weight: ${({ theme }) => theme.fontWeights.regular};
line-height: normal;
white-space: nowrap;
display: inline-flex;
Expand All @@ -40,10 +61,14 @@ export const Delimiter = styled.span`
}
`;

export const EndActionWrapper = styled(Box)`
export const RelativeInputWrapper = styled.div`
display: flex;
flex-direction: column;
position: relative;
`;

export const EndActionWrapper = styled(Box)``;

export const FieldActionWrapper = styled(FieldAction)`
svg {
height: 1rem;
Expand All @@ -62,7 +87,8 @@ export const FieldActionWrapper = styled(FieldAction)`

export const TextValidation = styled(Flex)`
position: absolute;
right: ${({ theme }) => theme.spaces[6]};
right: 0;
top: 0;
width: 100px;
pointer-events: none;

Expand Down
2 changes: 1 addition & 1 deletion admin/src/utils/get-permalink-ancestors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const getPermalinkAncestors = (path) => {
return null;
}

const parts = path.split('/').filter((i) => i);
const parts = path.split(/(?:\/|~)+/).filter((i) => i);
const len = parts.length - 1;

if (!len) {
Expand Down