Merge pull request #359 from acelaya-forks/feature/message-improvements

Feature/message improvements

CHANGELOG.md

@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 * [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
 * [#352](https://github.com/shlinkio/shlink-web-client/issues/352) Moved from Scrutinizer to Codecov as the code coverage backend.
+* [#217](https://github.com/shlinkio/shlink-web-client/issues/217) Improved how messages are displayed, by centralizing it in the `Message` and `Result` components..
 
 ### Deprecated
 * *Nothing*

src/servers/CreateServer.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
-import classNames from 'classnames';
+import { Result } from '../utils/Result';
 import NoMenuLayout from '../common/NoMenuLayout';
 import { StateFlagTimeout } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
@@ -15,19 +15,11 @@ interface CreateServerProps extends RouterProps {
   createServer: (server: ServerWithId) => void;
 }
 
-const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
+const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
-  <div className="row">
+  <Result type={type}>
-    <div className="col-md-10 offset-md-1">
+    {type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
-      <div
+    {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
-        className={classNames('p-2 mt-3 text-white text-center', {
+  </Result>
-          'bg-main': type === 'success',
-          'bg-danger': type === 'error',
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  </div>
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
@@ -49,8 +41,12 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
         <button className="btn btn-outline-primary">Create server</button>
       </ServerForm>
 
-      {serversImported && <Result type="success">Servers properly imported. You can now select one from the list :)</Result>}
+      {(serversImported || errorImporting) && (
-      {errorImporting && <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>}
+        <div className="mt-4">
+          {serversImported && <ImportResult type="success" />}
+          {errorImporting && <ImportResult type="error" />}
+        </div>
+      )}
     </NoMenuLayout>
   );
 };

src/servers/helpers/ServerError.tsx

@@ -17,17 +17,15 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
 ) => (
   <NoMenuLayout>
     <div className="server-error__container flex-column">
-      <div className="row w-100 mb-3 mb-md-5">
+      <Message className="w-100 mb-3 mb-md-5" type="error" fullWidth>
-        <Message type="error" fullWidth noMargin>
+        {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
-          {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
+        {isServerWithId(selectedServer) && (
-          {isServerWithId(selectedServer) && (
+          <>
-            <>
+            <p>Oops! Could not connect to this Shlink server.</p>
-              <p>Oops! Could not connect to this Shlink server.</p>
+            Make sure you have internet connection, and the server is properly configured and on-line.
-              Make sure you have internet connection, and the server is properly configured and on-line.
+          </>
-            </>
+        )}
-          )}
+      </Message>
-        </Message>
-      </div>
 
       <ServersListGroup servers={Object.values(servers)}>
         These are the Shlink servers currently configured. Choose one of

src/servers/helpers/withSelectedServer.tsx

@@ -20,7 +20,7 @@ export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServ
     if (!selectedServer) {
       return (
         <NoMenuLayout>
-          <Message loading noMargin />
+          <Message loading />
         </NoMenuLayout>
       );
     }

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -4,9 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
 import { useEffect } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Card, CardBody, Tooltip } from 'reactstrap';
+import { Tooltip } from 'reactstrap';
 import { ShortUrlCreation } from '../reducers/shortUrlCreation';
 import { StateFlagTimeout } from '../../utils/helpers/hooks';
+import { Result } from '../../utils/Result';
 import './CreateShortUrlResult.scss';
 
 export interface CreateShortUrlResultProps extends ShortUrlCreation {
@@ -25,9 +26,10 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
 
   if (error) {
     return (
-      <Card body color="danger" inverse className="bg-danger mt-3">
+      <Result type="error" className="mt-3">
+        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
         An error occurred while creating the URL :(
-      </Card>
+      </Result>
     );
   }
 
@@ -38,26 +40,24 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
   const { shortUrl } = result;
 
   return (
-    <Card inverse className="bg-main mt-3">
+    <Result type="success" className="mt-3">
-      <CardBody>
+      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
-        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
+      <b>Great!</b> The short URL is <b>{shortUrl}</b>
-        <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
-        <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
+      <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
-          <button
+        <button
-            className="btn btn-light btn-sm create-short-url-result__copy-btn"
+          className="btn btn-light btn-sm create-short-url-result__copy-btn"
-            id="copyBtn"
+          id="copyBtn"
-            type="button"
+          type="button"
-          >
+        >
-            <FontAwesomeIcon icon={copyIcon} /> Copy
+          <FontAwesomeIcon icon={copyIcon} /> Copy
-          </button>
+        </button>
-        </CopyToClipboard>
+      </CopyToClipboard>
 
-        <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
+      <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
-          Copied!
+        Copied!
-        </Tooltip>
+      </Tooltip>
-      </CardBody>
+    </Result>
-    </Card>
   );
 };
 

src/short-urls/helpers/DeleteShortUrlModal.tsx

@@ -4,6 +4,7 @@ import { identity, pipe } from 'ramda';
 import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
 import { ShortUrlModalProps } from '../data';
 import { handleEventPreventingDefault, OptionalString } from '../../utils/utils';
+import { Result } from '../../utils/Result';
 
 const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION';
 
@@ -42,25 +43,26 @@ const DeleteShortUrlModal = (
         <ModalBody>
           <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
           <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
+          <p>Write <b>{shortUrl.shortCode}</b> to confirm deletion.</p>
 
           <input
             type="text"
             className="form-control"
-            placeholder="Insert the short code of the URL"
+            placeholder={`Insert the short code (${shortUrl.shortCode})`}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />
 
           {hasThresholdError && (
-            <div className="p-2 mt-2 bg-warning text-center">
+            <Result type="warning" small className="mt-2">
               {errorData?.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
               {!errorData?.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
-            </div>
+            </Result>
           )}
           {hasErrorOtherThanThreshold && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small className="mt-2">
               Something went wrong while deleting the URL :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditMetaModal.tsx

@@ -10,6 +10,7 @@ import DateInput from '../../utils/DateInput';
 import { formatIsoDate } from '../../utils/helpers/date';
 import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
 import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
+import { Result } from '../../utils/Result';
 
 interface EditMetaModalConnectProps extends ShortUrlModalProps {
   shortUrlMeta: ShortUrlMetaEdition;
@@ -78,9 +79,9 @@ const EditMetaModal = (
             />
           </FormGroup>
           {error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small className="mt-2">
               Something went wrong while saving the metadata :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -4,6 +4,7 @@ import { ExternalLink } from 'react-external-link';
 import { ShortUrlEdition } from '../reducers/shortUrlEdition';
 import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
 import { ShortUrlModalProps } from '../data';
+import { Result } from '../../utils/Result';
 
 interface EditShortUrlModalProps extends ShortUrlModalProps {
   shortUrlEdition: ShortUrlEdition;
@@ -34,9 +35,9 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
             />
           </FormGroup>
           {error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small className="mt-2">
               Something went wrong while saving the long URL :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/short-urls/helpers/EditTagsModal.tsx

@@ -5,6 +5,7 @@ import { ShortUrlTags } from '../reducers/shortUrlTags';
 import { ShortUrlModalProps } from '../data';
 import { OptionalString } from '../../utils/utils';
 import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
+import { Result } from '../../utils/Result';
 
 interface EditTagsModalProps extends ShortUrlModalProps {
   shortUrlTags: ShortUrlTags;
@@ -32,9 +33,9 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
       <ModalBody>
         <TagsSelector tags={selectedTags} onChange={setSelectedTags} />
         {shortUrlTags.error && (
-          <div className="p-2 mt-2 bg-danger text-white text-center">
+          <Result type="error" small className="mt-2">
             Something went wrong while saving the tags :(
-          </div>
+          </Result>
         )}
       </ModalBody>
       <ModalFooter>

src/tags/TagsList.tsx

@@ -4,6 +4,7 @@ import Message from '../utils/Message';
 import SearchField from '../utils/SearchField';
 import { SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { Result } from '../utils/Result';
 import { TagsList as TagsListState } from './reducers/tagsList';
 import { TagCardProps } from './TagCard';
 
@@ -28,15 +29,11 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
 
   const renderContent = () => {
     if (tagsList.loading) {
-      return <Message noMargin loading />;
+      return <Message loading />;
     }
 
     if (tagsList.error) {
-      return (
+      return <Result type="error">Error loading tags :(</Result>;
-        <div className="col-12">
-          <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
-        </div>
-      );
     }
 
     const tagsCount = tagsList.filteredTags.length;
@@ -48,7 +45,7 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
     const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
 
     return (
-      <>
+      <div className="row">
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
             {group.map((tag) => (
@@ -63,16 +60,14 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
             ))}
           </div>
         ))}
-      </>
+      </div>
     );
   };
 
   return (
     <>
       {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
-      <div className="row">
+      {renderContent()}
-        {renderContent()}
-      </div>
     </>
   );
 }, () => 'https://shlink.io/new-visit');

src/tags/helpers/DeleteTagConfirmModal.tsx

@@ -1,6 +1,7 @@
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { TagDeletion } from '../reducers/tagDelete';
 import { TagModalProps } from '../data';
+import { Result } from '../../utils/Result';
 
 interface DeleteTagConfirmModalProps extends TagModalProps {
   deleteTag: (tag: string) => Promise<void>;
@@ -25,9 +26,9 @@ const DeleteTagConfirmModal = (
       <ModalBody>
         Are you sure you want to delete tag <b>{tag}</b>?
         {tagDelete.error && (
-          <div className="p-2 mt-2 bg-danger text-white text-center">
+          <Result type="error" small className="mt-2">
             Something went wrong while deleting the tag :(
-          </div>
+          </Result>
         )}
       </ModalBody>
       <ModalFooter>

src/tags/helpers/EditTagModal.tsx

@@ -9,6 +9,7 @@ import ColorGenerator from '../../utils/services/ColorGenerator';
 import { TagModalProps } from '../data';
 import { TagEdition } from '../reducers/tagEdit';
 import './EditTagModal.scss';
+import { Result } from '../../utils/Result';
 
 interface EditTagModalProps extends TagModalProps {
   tagEdit: TagEdition;
@@ -55,9 +56,9 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
           </div>
 
           {tagEdit.error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
+            <Result type="error" small className="mt-2">
               Something went wrong while editing the tag :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/utils/Message.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Card } from 'reactstrap';
+import { Card, Row } from 'reactstrap';
 import classNames from 'classnames';
 import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -23,32 +23,31 @@ const getTextClassForType = (type: MessageType) => {
   return map[type];
 };
 
-interface MessageProps {
+export interface MessageProps {
-  noMargin?: boolean;
+  className?: string;
   loading?: boolean;
   fullWidth?: boolean;
   type?: MessageType;
 }
 
-const Message: FC<MessageProps> = (
+const Message: FC<MessageProps> = ({ className, children, loading = false, type = 'default', fullWidth = false }) => {
-  { children, loading = false, noMargin = false, type = 'default', fullWidth = false },
-) => {
-  const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
   const classes = classNames({
     'col-md-12': fullWidth,
     'col-md-10 offset-md-1': !fullWidth,
   });
 
   return (
-    <div className={classes}>
+    <Row noGutters className={className}>
-      <Card className={cardClasses} body>
+      <div className={classes}>
-        <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
+        <Card className={getClassForType(type)} body>
-          {loading && <FontAwesomeIcon icon={preloader} spin />}
+          <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
-          {loading && <span className="ml-2">{children ?? 'Loading...'}</span>}
+            {loading && <FontAwesomeIcon icon={preloader} spin />}
-          {!loading && children}
+            {loading && <span className="ml-2">{children ?? 'Loading...'}</span>}
-        </h3>
+            {!loading && children}
-      </Card>
+          </h3>
-    </div>
+        </Card>
+      </div>
+    </Row>
   );
 };
 

src/utils/Result.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Row } from 'reactstrap';
+import classNames from 'classnames';
+import { SimpleCard } from './SimpleCard';
+
+export type ResultType = 'success' | 'error' | 'warning';
+
+export interface ResultProps {
+  type: ResultType;
+  className?: string;
+  small?: boolean;
+}
+
+export const Result: FC<ResultProps> = ({ children, type, className, small = false }) => (
+  <Row className={className}>
+    <div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
+      <SimpleCard
+        className={classNames('text-center', {
+          'bg-main': type === 'success',
+          'bg-danger': type === 'error',
+          'bg-warning': type === 'warning',
+          'text-white': type !== 'warning',
+        })}
+        bodyClassName={classNames({ 'p-2': small })}
+      >
+        {children}
+      </SimpleCard>
+    </div>
+  </Row>
+);

src/utils/SimpleCard.tsx

@@ -4,11 +4,12 @@ import { ReactNode } from 'react';
 
 interface SimpleCardProps extends Omit<CardProps, 'title'> {
   title?: ReactNode;
+  bodyClassName?: string;
 }
 
-export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (
+export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
   <Card {...rest}>
     {title && <CardHeader>{title}</CardHeader>}
-    <CardBody>{children}</CardBody>
+    <CardBody className={bodyClassName}>{children}</CardBody>
   </Card>
 );

src/visits/VisitsStats.tsx

@@ -11,6 +11,7 @@ import Message from '../utils/Message';
 import { formatIsoDate } from '../utils/helpers/date';
 import { ShlinkVisitsParams } from '../utils/services/types';
 import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types';
+import { Result } from '../utils/Result';
 import SortableBarGraph from './helpers/SortableBarGraph';
 import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
@@ -28,10 +29,16 @@ export interface VisitsStatsProps {
   domain?: string;
 }
 
+interface VisitsNavLinkProps {
+  title: string;
+  subPath: string;
+  icon: IconDefinition;
+}
+
 type HighlightableProps = 'referer' | 'country' | 'city';
 type Section = 'byTime' | 'byContext' | 'byLocation' | 'list';
 
-const sections: Record<Section, { title: string; subPath: string; icon: IconDefinition }> = {
+const sections: Record<Section, VisitsNavLinkProps> = {
   byTime: { title: 'By time', subPath: '', icon: faCalendarAlt },
   byContext: { title: 'By context', subPath: '/by-context', icon: faChartPie },
   byLocation: { title: 'By location', subPath: '/by-location', icon: faMapMarkedAlt },
@@ -53,6 +60,19 @@ const highlightedVisitsToStats = (
 let selectedBar: string | undefined;
 const initialInterval: DateInterval = 'last30Days';
 
+const VisitsNavLink: FC<VisitsNavLinkProps> = ({ subPath, title, icon, children }) => (
+  <NavLink
+    tag={RouterNavLink}
+    className="visits-stats__nav-link"
+    to={children}
+    isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
+    replace
+  >
+    <FontAwesomeIcon icon={icon} />
+    <span className="ml-2 d-none d-sm-inline">{title}</span>
+  </NavLink>
+);
+
 const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, cancelGetVisits, baseUrl, domain }) => {
   const [ dateRange, setDateRange ] = useState<DateRange>(intervalToDateRange(initialInterval));
   const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
@@ -111,11 +131,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
     }
 
     if (error) {
-      return (
+      return <Result type="error">An error occurred while loading visits :(</Result>;
-        <Card className="mt-4" body inverse color="danger">
-          An error occurred while loading visits :(
-        </Card>
-      );
     }
 
     if (isEmpty(visits)) {
@@ -124,23 +140,10 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
 
     return (
       <>
-        <Card className="visits-stats__nav p-0 mt-4 overflow-hidden" body>
+        <Card className="visits-stats__nav p-0 overflow-hidden" body>
           <Nav pills justified>
-            {Object.entries(sections).map(
+            {Object.entries(sections).map(([ section, props ]) =>
-              ([ section, { title, icon, subPath }]) => (
+              <VisitsNavLink key={section} {...props}>{buildSectionUrl(props.subPath)}</VisitsNavLink>)}
-                <NavLink
-                  key={section}
-                  tag={RouterNavLink}
-                  className="visits-stats__nav-link"
-                  to={buildSectionUrl(subPath)}
-                  isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
-                  replace
-                >
-                  <FontAwesomeIcon icon={icon} />
-                  <span className="ml-2 d-none d-sm-inline">{title}</span>
-                </NavLink>
-              ),
-            )}
           </Nav>
         </Card>
         <div className="row">
@@ -259,7 +262,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
         </div>
       </section>
 
-      <section>
+      <section className="mt-4">
         {renderVisitsContent()}
       </section>
     </>

test/servers/CreateServer.test.tsx

@@ -30,12 +30,12 @@ describe('<CreateServer />', () => {
     const wrapper = createWrapper();
 
     expect(wrapper.find(ServerForm)).toHaveLength(1);
-    expect(wrapper.find('Result')).toHaveLength(0);
+    expect(wrapper.find('ImportResult')).toHaveLength(0);
   });
 
   it('shows success message when imported is true', () => {
     const wrapper = createWrapper(true);
-    const result = wrapper.find('Result');
+    const result = wrapper.find('ImportResult');
 
     expect(result).toHaveLength(1);
     expect(result.prop('type')).toEqual('success');
@@ -43,7 +43,7 @@ describe('<CreateServer />', () => {
 
   it('shows error message when import failed', () => {
     const wrapper = createWrapper(false, true);
-    const result = wrapper.find('Result');
+    const result = wrapper.find('ImportResult');
 
     expect(result).toHaveLength(1);
     expect(result.prop('type')).toEqual('error');

test/short-urls/helpers/CreateShortUrlResult.test.tsx

@@ -5,6 +5,7 @@ import { Mock } from 'ts-mockery';
 import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
+import { Result } from '../../../src/utils/Result';
 
 describe('<CreateShortUrlResult />', () => {
   let wrapper: ShallowWrapper;
@@ -24,7 +25,7 @@ describe('<CreateShortUrlResult />', () => {
 
   it('renders an error when error is true', () => {
     const wrapper = createWrapper(Mock.all<ShortUrl>(), true);
-    const errorCard = wrapper.find('.bg-danger');
+    const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
 
     expect(errorCard).toHaveLength(1);
     expect(errorCard.html()).toContain('An error occurred while creating the URL :(');

test/short-urls/helpers/DeleteShortUrlModal.test.tsx

@@ -5,6 +5,7 @@ import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlM
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion';
 import { ProblemDetailsError } from '../../../src/utils/services/types';
+import { Result } from '../../../src/utils/Result';
 
 describe('<DeleteShortUrlModal />', () => {
   let wrapper: ShallowWrapper;
@@ -48,7 +49,7 @@ describe('<DeleteShortUrlModal />', () => {
       shortCode: 'abc123',
       errorData: Mock.of<ProblemDetailsError>(errorData),
     });
-    const warning = wrapper.find('.bg-warning');
+    const warning = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'warning');
 
     expect(warning).toHaveLength(1);
     expect(warning.html()).toContain(expectedMessage);
@@ -61,7 +62,7 @@ describe('<DeleteShortUrlModal />', () => {
       shortCode: 'abc123',
       errorData: Mock.of<ProblemDetailsError>({ type: 'OTHER_ERROR' }),
     });
-    const error = wrapper.find('.bg-danger');
+    const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
 
     expect(error).toHaveLength(1);
     expect(error.html()).toContain('Something went wrong while deleting the URL :(');

test/short-urls/helpers/EditMetaModal.test.tsx

@@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery';
 import EditMetaModal from '../../../src/short-urls/helpers/EditMetaModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlMetaEdition } from '../../../src/short-urls/reducers/shortUrlMeta';
+import { Result } from '../../../src/utils/Result';
 
 describe('<EditMetaModal />', () => {
   let wrapper: ShallowWrapper;
@@ -30,7 +31,7 @@ describe('<EditMetaModal />', () => {
 
   it('properly renders form with components', () => {
     const wrapper = createWrapper({ saving: false, error: false });
-    const error = wrapper.find('.bg-danger');
+    const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
     const form = wrapper.find('form');
     const formGroup = form.find(FormGroup);
 
@@ -52,7 +53,7 @@ describe('<EditMetaModal />', () => {
 
   it('renders error message on error', () => {
     const wrapper = createWrapper({ saving: false, error: true });
-    const error = wrapper.find('.bg-danger');
+    const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
 
     expect(error).toHaveLength(1);
   });

test/short-urls/helpers/EditShortUrlModal.test.tsx

@@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery';
 import EditShortUrlModal from '../../../src/short-urls/helpers/EditShortUrlModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlEdition } from '../../../src/short-urls/reducers/shortUrlEdition';
+import { Result } from '../../../src/utils/Result';
 
 describe('<EditShortUrlModal />', () => {
   let wrapper: ShallowWrapper;
@@ -31,7 +32,7 @@ describe('<EditShortUrlModal />', () => {
     [ true, 1 ],
   ])('properly renders form with expected components', (error, expectedErrorLength) => {
     const wrapper = createWrapper({}, { saving: false, error });
-    const errorElement = wrapper.find('.bg-danger');
+    const errorElement = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
     const form = wrapper.find('form');
     const formGroup = form.find(FormGroup);
 

test/tags/TagsList.test.tsx

@@ -7,6 +7,7 @@ import SearchField from '../../src/utils/SearchField';
 import { rangeOf } from '../../src/utils/utils';
 import { TagsList } from '../../src/tags/reducers/tagsList';
 import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
+import { Result } from '../../src/utils/Result';
 
 describe('<TagsList />', () => {
   let wrapper: ShallowWrapper;
@@ -41,7 +42,7 @@ describe('<TagsList />', () => {
 
   it('shows an error when tags failed to be loaded', () => {
     const wrapper = createWrapper({ error: true });
-    const errorMsg = wrapper.find('.bg-danger');
+    const errorMsg = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
 
     expect(errorMsg).toHaveLength(1);
     expect(errorMsg.html()).toContain('Error loading tags :(');

test/utils/Message.test.tsx

@@ -0,0 +1,64 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { PropsWithChildren } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'reactstrap';
+import Message, { MessageProps } from '../../src/utils/Message';
+
+describe('<Message />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: PropsWithChildren<MessageProps> = {}) => {
+    wrapper = shallow(<Message {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ true, 1, 0 ],
+    [ false, 0, 1 ],
+    [ undefined, 0, 1 ],
+  ])('renders expected classes based on width', (fullWidth, expectedFull, expectedNonFull) => {
+    const wrapper = createWrapper({ fullWidth });
+
+    expect(wrapper.find('.col-md-12')).toHaveLength(expectedFull);
+    expect(wrapper.find('.col-md-10')).toHaveLength(expectedNonFull);
+  });
+
+  it.each([
+    [ true, 'These are the children contents' ],
+    [ false, 'These are the children contents' ],
+    [ true, undefined ],
+    [ false, undefined ],
+  ])('renders expected content', (loading, children) => {
+    const wrapper = createWrapper({ loading, children });
+
+    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(loading ? 1 : 0);
+
+    if (loading) {
+      expect(wrapper.find('span').text()).toContain(children ? children : 'Loading...');
+    } else {
+      expect(wrapper.find('span')).toHaveLength(0);
+      expect(wrapper.find('h3').text()).toContain(children ? children : '');
+    }
+  });
+
+  it.each([
+    [ 'error', 'border-danger', 'text-danger' ],
+    [ 'default', '', 'text-muted' ],
+    [ undefined, '', 'text-muted' ],
+  ])('renders proper classes based on message type', (type, expectedCardClass, expectedH3Class) => {
+    const wrapper = createWrapper({ type: type as 'default' | 'error' | undefined });
+    const card = wrapper.find(Card);
+    const h3 = wrapper.find('h3');
+
+    expect(card.prop('className')).toEqual(expectedCardClass);
+    expect(h3.prop('className')).toEqual(`text-center mb-0 ${expectedH3Class}`);
+  });
+
+  it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
+    const wrapper = createWrapper({ className });
+
+    expect(wrapper.prop('className')).toEqual(className);
+  });
+});

test/utils/Result.test.tsx

@@ -0,0 +1,46 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Result, ResultProps, ResultType } from '../../src/utils/Result';
+import { SimpleCard } from '../../src/utils/SimpleCard';
+
+describe('<Result />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: ResultProps) => {
+    wrapper = shallow(<Result {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ 'success' as ResultType, 'bg-main text-white' ],
+    [ 'error' as ResultType, 'bg-danger text-white' ],
+    [ 'warning' as ResultType, 'bg-warning' ],
+  ])('renders expected classes based on type', (type, expectedClasses) => {
+    const wrapper = createWrapper({ type });
+    const innerCard = wrapper.find(SimpleCard);
+
+    expect(innerCard.prop('className')).toEqual(`text-center ${expectedClasses}`);
+  });
+
+  it.each([
+    [ undefined ],
+    [ 'foo' ],
+    [ 'bar' ],
+  ])('renders provided classes in root element', (className) => {
+    const wrapper = createWrapper({ type: 'success', className });
+
+    expect(wrapper.prop('className')).toEqual(className);
+  });
+
+  it.each([{ small: true }, { small: false }])('renders small results properly', ({ small }) => {
+    const wrapper = createWrapper({ type: 'success', small });
+    const bigElement = wrapper.find('.col-md-10');
+    const smallElement = wrapper.find('.col-12');
+    const innerCard = wrapper.find(SimpleCard);
+
+    expect(bigElement).toHaveLength(small ? 0 : 1);
+    expect(smallElement).toHaveLength(small ? 1 : 0);
+    expect(innerCard.prop('bodyClassName')).toEqual(small ? 'p-2' : '');
+  });
+});

test/visits/VisitsStats.test.tsx

@@ -1,5 +1,5 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Card, NavLink, Progress } from 'reactstrap';
+import { Progress } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import VisitStats from '../../src/visits/VisitsStats';
 import Message from '../../src/utils/Message';
@@ -8,6 +8,7 @@ import SortableBarGraph from '../../src/visits/helpers/SortableBarGraph';
 import { Visit, VisitsInfo } from '../../src/visits/types';
 import LineChartCard from '../../src/visits/helpers/LineChartCard';
 import VisitsTable from '../../src/visits/VisitsTable';
+import { Result } from '../../src/utils/Result';
 
 describe('<VisitStats />', () => {
   const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
@@ -53,7 +54,7 @@ describe('<VisitStats />', () => {
 
   it('renders an error message when visits could not be loaded', () => {
     const wrapper = createComponent({ loading: false, error: true, visits: [] });
-    const errorMessage = wrapper.find(Card);
+    const errorMessage = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
 
     expect(errorMessage).toHaveLength(1);
     expect(errorMessage.html()).toContain('An error occurred while loading visits :(');
@@ -80,10 +81,6 @@ describe('<VisitStats />', () => {
 
   it('holds the map button content generator on cities graph extraHeaderContent', () => {
     const wrapper = createComponent({ loading: false, error: false, visits });
-    const locationNav = wrapper.find(NavLink).at(2);
-
-    locationNav.simulate('click');
-
     const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]');
     const extraHeaderContent = citiesGraph.prop('extraHeaderContent');