Merge branch 'master' into 110172/fix-show-restart-hackmd

packages/app/src/components/Admin/App/AppSettingsPageContents.tsx

@@ -73,7 +73,7 @@ const AppSettingsPageContents = (props: Props) => {
           && (
             <div className="row">
               <div className="col-lg-12">
-                <h2 className="admin-setting-header">{t('V5 Page Migration')}</h2>
+                <h2 className="admin-setting-header" data-testid="v5-page-migration">{t('V5 Page Migration')}</h2>
                 <V5PageMigration />
               </div>
             </div>

packages/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -73,6 +73,7 @@ export const TrashPageAlert = (): JSX.Element => {
           className="btn btn-info rounded-pill btn-sm ml-auto mr-2"
           onClick={openPutbackPageModalHandler}
           data-toggle="modal"
+          data-testid="put-back-button"
         >
           <i className="icon-action-undo" aria-hidden="true"></i> { t('Put Back') }
         </button>
@@ -94,7 +95,7 @@ export const TrashPageAlert = (): JSX.Element => {
 
   return (
     <>
-      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
+      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row" data-testid="trash-page-alert">
         <div className="flex-grow-1">
           This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
           <br />

packages/app/src/components/PageDeleteModal.tsx

@@ -272,6 +272,7 @@ const PageDeleteModal: FC = () => {
           className={`btn btn-${deleteIconAndKey[deleteMode].color}`}
           disabled={!isDeletable}
           onClick={deleteButtonHandler}
+          data-testid="delete-page-button"
         >
           <i className={`mr-1 icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
           { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }

packages/app/src/components/PutbackPageModal.jsx

@@ -103,7 +103,7 @@ const PutBackPageModal = () => {
     return (
       <>
         <ApiErrorMessageList errs={errs} targetPath={targetPath} />
-        <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler}>
+        <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
           <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('Put Back') }
         </button>
       </>
@@ -116,7 +116,7 @@ const PutBackPageModal = () => {
   }, [closePutBackPageModal]);
 
   return (
-    <Modal isOpen={isOpened} toggle={closeModalHandler}>
+    <Modal isOpen={isOpened} toggle={closeModalHandler} data-testid="put-back-page-modal">
       <ModalHeader tag="h4" toggle={closeModalHandler} className="bg-info text-light">
         <HeaderContent/>
       </ModalHeader>

packages/app/src/styles/bootstrap/_variables.scss

@@ -36,6 +36,12 @@ $red: #ff0a54 !default;
 
 $enable-shadows: true;
 
+// Links
+//
+// Style anchor elements.
+
+$link-hover-decoration: none !default;
+
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,

packages/app/src/styles/theme/_apply-colors.scss

@@ -553,11 +553,11 @@ body.editing-sidebar {
 }
 
 .grid-preview-col-1 {
-  background: $info;
+  background: var(--info);
 }
 
 .grid-preview-col-2 {
-  background: $success;
+  background: var(--success);
 }
 
 .grid-preview-col-3 {

packages/app/src/styles/theme/_reboot-bootstrap-border-colors.scss

@@ -25,5 +25,5 @@
 }
 
 .border-info {
-  border-color: $info !important;
+  border-color: ver(--info) !important;
 }

packages/app/src/styles/theme/_reboot-toastr-colors.scss

@@ -1,15 +1,15 @@
 .toast-success {
-  background-color: $success;
+  background-color: var(--success);
 }
 
 .toast-error {
-  background-color: $danger;
+  background-color: var(--danger);
 }
 
 .toast-info {
-  background-color: $info;
+  background-color: var(--info);
 }
 
 .toast-warning {
-  background-color: $warning;
+  background-color: var(--warning);
 }

packages/app/test/cypress/integration/20-basic-features/20-basic-features--use-tools.spec.ts

@@ -132,16 +132,28 @@ context('Modal for page operation', () => {
     cy.screenshot(`${ssPrefix}create-template-for-descendants-error`);
   });
 
-  it('PageDeleteModal is shown successfully', () => {
+  it('Page Deletion and PutBack is executed successfully', () => {
     cy.visit('/Sandbox/Bootstrap4');
     cy.waitUntilSkeletonDisappear();
 
-     cy.get('#grw-subnav-container').within(() => {
-       cy.getByTestid('open-page-item-control-btn').click({force: true});
-       cy.getByTestid('open-page-delete-modal-btn').click({force: true});
+    cy.get('#grw-subnav-container').within(() => {
+      cy.getByTestid('open-page-item-control-btn').click({force: true});
+      cy.getByTestid('open-page-delete-modal-btn').click({force: true});
     });
 
-     cy.getByTestid('page-delete-modal').should('be.visible').screenshot(`${ssPrefix}-delete-bootstrap4`);
+    cy.getByTestid('page-delete-modal').should('be.visible').within(() => {
+      cy.screenshot(`${ssPrefix}-delete-modal`);
+      cy.getByTestid('delete-page-button').click();
+    });
+    cy.getByTestid('trash-page-alert').should('be.visible');
+    cy.screenshot(`${ssPrefix}-bootstrap4-is-in-garbage-box`);
+
+    cy.getByTestid('put-back-button').click();
+    cy.getByTestid('put-back-page-modal').should('be.visible').within(() => {
+      cy.screenshot(`${ssPrefix}-put-back-modal`);
+      cy.getByTestid('put-back-execution-button').should('be.visible').click();
+    });
+    cy.screenshot(`${ssPrefix}-put-backed-bootstrap4-page`);
   });
 
   it('PageDuplicateModal is shown successfully', () => {

packages/app/test/cypress/integration/40-admin/40-admin--access-to-admin-page.spec.ts

@@ -32,6 +32,8 @@ context('Access to Admin page', () => {
   it('/admin/app is successfully loaded', () => {
     cy.visit('/admin/app');
     cy.getByTestid('admin-app-settings').should('be.visible');
+    cy.getByTestid('v5-page-migration').should('be.visible');
+    cy.get('#cbFileUpload').should('be.checked')
     cy.screenshot(`${ssPrefix}-admin-app`);
   });
 

packages/preset-themes/src/styles/bootstrap/_variables.scss

@@ -50,6 +50,12 @@ $grid-breakpoints: (
   xxl: 1480px,
 );
 
+// Links
+//
+// Style anchor elements.
+
+$link-hover-decoration: none !default;
+
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.

packages/preset-themes/src/styles/default.scss

@@ -7,10 +7,10 @@
 
 // colors for overriding bootstrap $theme-colors
 // $secondary: #;
-// $info: #;
-// $success: #;
-// $warning: #;
-// $danger: #;
+// --info: #;
+// --success: #;
+// --warning: #;
+// --danger: #;
 // $light: #;
 // $dark: #;
 

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -551,14 +551,6 @@ body.editing-sidebar {
   background: var.$growi-blue;
 }
 
-.grid-preview-col-1 {
-  background: $info;
-}
-
-.grid-preview-col-2 {
-  background: $success;
-}
-
 .grid-preview-col-3 {
   background: var.$growi-green;
 }

packages/preset-themes/src/styles/theme/_reboot-bootstrap-border-colors.scss

@@ -23,7 +23,3 @@
 .border-left {
   border-left: $border-width solid $border-color !important;
 }
-
-.border-info {
-  border-color: $info !important;
-}

packages/preset-themes/src/styles/theme/_reboot-toastr-colors.scss

@@ -1,15 +0,0 @@
-.toast-success {
-  background-color: $success;
-}
-
-.toast-error {
-  background-color: $danger;
-}
-
-.toast-info {
-  background-color: $info;
-}
-
-.toast-warning {
-  background-color: $warning;
-}