Created new Result component to display operation result messages consistently

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 }) => (
-  <div className="row">
-    <div className="col-md-10 offset-md-1">
-      <div
-        className={classNames('p-2 mt-3 text-white text-center', {
-          'bg-main': type === 'success',
-          'bg-danger': type === 'error',
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  </div>
+const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
+  <Result type={type} textCentered>
+    {type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
+    {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
+  </Result>
 );
 
 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>}
-      {errorImporting && <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>}
+      {(serversImported || errorImporting) && (
+        <div className="mt-4">
+          {serversImported && <ImportResult type="success" />}
+          {errorImporting && <ImportResult type="error" />}
+        </div>
+      )}
     </NoMenuLayout>
   );
 };

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -4,10 +4,11 @@ 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 './CreateShortUrlResult.scss';
+import { Result } from '../../utils/Result';
 
 export interface CreateShortUrlResultProps extends ShortUrlCreation {
   resetCreateShortUrl: () => void;
@@ -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">
-      <CardBody>
-        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
-        <b>Great!</b> The short URL is <b>{shortUrl}</b>
+    <Result type="success" className="mt-3">
+      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
+      <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
-        <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
-          <button
-            className="btn btn-light btn-sm create-short-url-result__copy-btn"
-            id="copyBtn"
-            type="button"
-          >
-            <FontAwesomeIcon icon={copyIcon} /> Copy
-          </button>
-        </CopyToClipboard>
+      <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
+        <button
+          className="btn btn-light btn-sm create-short-url-result__copy-btn"
+          id="copyBtn"
+          type="button"
+        >
+          <FontAwesomeIcon icon={copyIcon} /> Copy
+        </button>
+      </CopyToClipboard>
 
-        <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
-          Copied!
-        </Tooltip>
-      </CardBody>
-    </Card>
+      <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
+        Copied!
+      </Tooltip>
+    </Result>
   );
 };
 

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" textCentered 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" textCentered 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 textCentered 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 textCentered 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 textCentered 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';
 
@@ -32,7 +33,7 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
     }
 
     if (tagsList.error) {
-      return <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>;
+      return <Result type="error">Error loading tags :(</Result>;
     }
 
     const tagsCount = tagsList.filteredTags.length;

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 textCentered 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 textCentered className="mt-2">
               Something went wrong while editing the tag :(
-            </div>
+            </Result>
           )}
         </ModalBody>
         <ModalFooter>

src/utils/Result.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Row } from 'reactstrap';
+import classNames from 'classnames';
+import { SimpleCard } from './SimpleCard';
+
+interface ResultProps {
+  type: 'success' | 'error' | 'warning';
+  className?: string;
+  textCentered?: boolean;
+  small?: boolean;
+}
+
+export const Result: FC<ResultProps> = ({ children, type, className, textCentered = false, small = false }) => (
+  <Row className={className}>
+    <div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
+      <SimpleCard
+        className={classNames({
+          'bg-main': type === 'success',
+          'bg-danger': type === 'error',
+          'bg-warning': type === 'warning',
+          'text-white': type !== 'warning',
+          'text-center': textCentered,
+        })}
+        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';
@@ -130,11 +131,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
     }
 
     if (error) {
-      return (
-        <Card body inverse color="danger">
-          An error occurred while loading visits :(
-        </Card>
-      );
+      return <Result type="error">An error occurred while loading visits :(</Result>;
     }
 
     if (isEmpty(visits)) {

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/visits/VisitsStats.test.tsx

@@ -1,5 +1,5 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Card, 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 :(');