All files / Components AppPluginChangelogModal.js

100% Statements 4/4
100% Branches 0/0
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62        2x           2x   2x                                                                                   2x              
import React from 'react';
import ReactMarkdown from 'react-markdown';
import PropTypes from 'prop-types';
 
const AppPluginChangelogModal = props => {
    const {
        item,
        close,
        update,
        ...attributes
    } = props;
 
    return (
        <div className="fixed z-[500] inset-0 overflow-y-auto" {...attributes}>
            <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 
                <div className="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div className="absolute inset-0 bg-gray-500/75"></div>
                </div>
 
                <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div className="inline-block align-bottom rounded text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
                    <div className="bg-gray-50 dark:bg-gray-800 p-4">
                        <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-headline">
                            {item.name} - {item.release.version}
                        </h3>
                    </div>
                    <div className="bg-white dark:bg-gray-900 p-4 text-sm text-gray-500 dark:text-gray-300">
                        <div className="prose-sm max-w-none">
                            <ReactMarkdown children={item.release.changelog} />
                        </div>
                    </div>
                    <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="button"
                            className="mt-3 w-full dark:text-white sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm bg-orange-300 dark:bg-orange-700 hover:bg-orange-400 dark:hover:bg-orange-600 font-bold py-2 px-4 inline-flex justify-center rounded-md"
                            data-slug={item.slug} onClick={update}>
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                            </svg>
                            Install Update
                        </button>
                        <button type="button"
                            className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-0 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                            onClick={close}>
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}
 
 
AppPluginChangelogModal.propTypes = {
    item: PropTypes.object,
    close: PropTypes.func,
    install: PropTypes.func
}
 
export default AppPluginChangelogModal;