Coursemology · purfectliterature · Oct 25, 2022 · Oct 21, 2022 · Oct 25, 2022 · Oct 25, 2022
diff --git a/...pp/bundles/course/admin/pages/AssessmentSettings/AssessmentCategoriesManager/Category.tsx b/...pp/bundles/course/admin/pages/AssessmentSettings/AssessmentCategoriesManager/Category.tsx
@@ -112,7 +112,7 @@ const Category = (props: CategoryProps): JSX.Element => {
 
   const renderTabs = (
     tabs: AssessmentTab[],
-    disabled: boolean,
+    disabled?: boolean,
   ): JSX.Element[] =>
     tabs.map((tab: AssessmentTab, tabIndex: number) => (
       <Tab
@@ -155,7 +155,7 @@ const Category = (props: CategoryProps): JSX.Element => {
                   <DragIndicator
                     fontSize="small"
                     color="disabled"
-                    className={`${props.disabled && 'opacity-0'}`}
+                    className={`${props.disabled && 'invisible'}`}
                   />
 
                   <div className="ml-4 flex items-center">
@@ -182,8 +182,8 @@ const Category = (props: CategoryProps): JSX.Element => {
                 {!renaming && (
                   <IconButton
                     size="small"
-                    disabled={props.disabled ?? isDragging}
-                    className="ml-4 hoverable:opacity-0 hoverable:group-hover:opacity-100"
+                    disabled={isDragging || props.disabled}
+                    className="hoverable:invisible hoverable:group-hover:visible ml-4"
                     onClick={(): void => setRenaming(true)}
                   >
                     <Create />
@@ -195,7 +195,7 @@ const Category = (props: CategoryProps): JSX.Element => {
                 {category.canDeleteCategory && !props.stationary && (
                   <IconButton
                     color="error"
-                    disabled={props.disabled ?? isDragging}
+                    disabled={isDragging || props.disabled}
                     className="mx-4 sm:mx-0"
                     onClick={handleClickDelete}
                   >
@@ -206,7 +206,7 @@ const Category = (props: CategoryProps): JSX.Element => {
                 {category.canCreateTabs && (
                   <Button
                     startIcon={<Add />}
-                    disabled={props.disabled ?? isDragging}
+                    disabled={isDragging || props.disabled}
                     onClick={handleCreateTab}
                   >
                     {t(translations.addATab)}
@@ -227,7 +227,7 @@ const Category = (props: CategoryProps): JSX.Element => {
                   ref={droppableProvided.innerRef}
                   {...droppableProvided.droppableProps}
                 >
-                  {renderTabs(category.tabs, props.disabled ?? isDragging)}
+                  {renderTabs(category.tabs, isDragging || props.disabled)}
                   {droppableProvided.placeholder}
                 </div>
               )}

diff --git a/client/app/bundles/course/admin/pages/AssessmentSettings/AssessmentCategoriesManager/Tab.tsx b/client/app/bundles/course/admin/pages/AssessmentSettings/AssessmentCategoriesManager/Tab.tsx
@@ -16,7 +16,7 @@ interface TabProps {
   tab: AssessmentTab;
   index: number;
   stationary: boolean;
-  disabled: boolean;
+  disabled?: boolean;
   onRename?: (index: number, newTitle: AssessmentTab['title']) => void;
 }
 
@@ -93,7 +93,7 @@ const Tab = (props: TabProps): JSX.Element => {
         key={tab.id}
         draggableId={`tab-${tab.id}`}
         index={index}
-        isDragDisabled={disabled || stationary}
+        isDragDisabled={stationary || disabled}
       >
         {(provided, { isDragging }): JSX.Element => (
           <Card
@@ -110,7 +110,7 @@ const Tab = (props: TabProps): JSX.Element => {
                 <DragIndicator
                   fontSize="small"
                   color="disabled"
-                  className={`${(disabled || stationary) && 'opacity-0'}`}
+                  className={`${(stationary || disabled) && 'invisible'}`}
                 />
 
                 <div className="ml-4 flex items-center">
@@ -138,8 +138,8 @@ const Tab = (props: TabProps): JSX.Element => {
               {!renaming && (
                 <IconButton
                   size="small"
-                  disabled={disabled || isDragging}
-                  className="ml-4 hoverable:opacity-0 hoverable:group-hover:opacity-100"
+                  disabled={isDragging || disabled}
+                  className="hoverable:invisible hoverable:group-hover:visible ml-4"
                   onClick={(): void => setRenaming(true)}
                 >
                   <Create />
@@ -150,8 +150,8 @@ const Tab = (props: TabProps): JSX.Element => {
             {tab.canDeleteTab && !stationary && (
               <IconButton
                 color="error"
-                disabled={disabled || isDragging}
-                className="ml-4 hoverable:ml-0 hoverable:opacity-0 hoverable:group-hover:opacity-100"
+                disabled={isDragging || disabled}
+                className="hoverable:invisible hoverable:group-hover:visible ml-4 hoverable:ml-0"
                 onClick={handleClickDelete}
               >
                 <Delete />

diff --git a/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx b/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx
@@ -114,7 +114,7 @@ const SidebarSettingsForm = (props: SidebarSettingsFormProps): JSX.Element => {
               <DragIndicator
                 fontSize="small"
                 color="disabled"
-                className={`${props.disabled && 'opacity-0'}`}
+                className={`${props.disabled && 'invisible'}`}
               />
             </TableCell>
 

diff --git a/client/app/bundles/course/admin/pages/VideosSettings/VideosTabsManager/Tab.tsx b/client/app/bundles/course/admin/pages/VideosSettings/VideosTabsManager/Tab.tsx
@@ -93,8 +93,8 @@ const Tab = (props: TabProps): JSX.Element => {
                 {!renaming && (
                   <IconButton
                     size="small"
-                    disabled={props.disabled ?? isDragging}
-                    className="ml-4 hoverable:opacity-0 hoverable:group-hover:opacity-100"
+                    disabled={isDragging || props.disabled}
+                    className="hoverable:invisible hoverable:group-hover:visible ml-4"
                     onClick={(): void => setRenaming(true)}
                   >
                     <Create />
@@ -105,8 +105,8 @@ const Tab = (props: TabProps): JSX.Element => {
               {tab.canDeleteTab && (
                 <IconButton
                   color="error"
-                  disabled={props.disabled ?? isDragging}
-                  className="ml-4 hoverable:ml-0 hoverable:opacity-0 hoverable:group-hover:opacity-100"
+                  disabled={isDragging || props.disabled}
+                  className="hoverable:invisible hoverable:group-hover:visible ml-4 hoverable:ml-0"
                   onClick={(): void => setDeleting(true)}
                 >
                   <Delete />

diff --git a/client/app/lib/components/extensions/conditions/ConditionRow.tsx b/client/app/lib/components/extensions/conditions/ConditionRow.tsx
@@ -60,7 +60,7 @@ const ConditionRow = <AnyConditionData extends ConditionData>(
           <Typography variant="body2">{props.condition.description}</Typography>
         </div>
 
-        <div className="flex items-center hoverable:opacity-0 hoverable:group-hover:opacity-100">
+        <div className="hoverable:invisible hoverable:group-hover:visible flex items-center">
           {editing ? (
             createElement(component, {
               condition: props.condition,

diff --git a/client/app/theme/index.css b/client/app/theme/index.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  /* TODO: Remove `visible` and `invisible` once `visibility` is
+           re-enabled in tailwind.config.js. */
+  .visible {
+    visibility: visible;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+}
diff --git a/client/package.json b/client/package.json
@@ -199,7 +199,7 @@
     "redux-logger": "^3.0.6",
     "sass-loader": "^13.1.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.2.1",
     "ts-jest": "^29.0.3",
     "typescript": "^4.8.4",
     "webpack": "^5.74.0",

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -9,6 +9,11 @@ module.exports = {
   },
   corePlugins: {
     preflight: false,
+
+    // TODO: Re-enable once Bootstrap components are purged
+    // Temporarily disabled because Tailwind 3.2.0 adds a new `collapse` utility
+    // that conflicts with Bootstrap's Collapse component used in our sidebar.
+    visibility: false,
   },
   plugins: [
     plugin(({ addVariant }) => {

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4842,10 +4842,10 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
-  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+fast-glob@^3.2.12, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -6824,7 +6824,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -7586,12 +7586,12 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+postcss-nested@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
+  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
   dependencies:
-    postcss-selector-parser "^6.0.6"
+    postcss-selector-parser "^6.0.10"
 
 postcss-normalize-charset@^5.1.0:
   version "5.1.0"
@@ -7679,7 +7679,7 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -7707,7 +7707,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.14, postcss@^8.4.18, postcss@^8.4.7:
+postcss@^8.4.17, postcss@^8.4.18, postcss@^8.4.7:
   version "8.4.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
   integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
@@ -9046,29 +9046,30 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^3.1.8:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
-  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
+tailwindcss@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786"
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
   dependencies:
     arg "^5.0.2"
     chokidar "^3.5.3"
     color-name "^1.1.4"
     detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.11"
+    fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
     lilconfig "^2.0.6"
+    micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.14"
+    postcss "^8.4.17"
     postcss-import "^14.1.0"
     postcss-js "^4.0.0"
     postcss-load-config "^3.1.4"
-    postcss-nested "5.0.6"
+    postcss-nested "6.0.0"
     postcss-selector-parser "^6.0.10"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"

diff --git a/spec/features/course/achievement_condition_management_spec.rb b/spec/features/course/achievement_condition_management_spec.rb
@@ -49,7 +49,7 @@
         condition_row = find('tr', text: achievement_condition.title)
         edit_button = condition_row.first('button', visible: false)
 
-        edit_button.click
+        hover_then_click edit_button
         find_field('Achievement').click
         find('li', text: achievement_to_change_to.title).click
         click_button 'Update condition'
@@ -63,7 +63,7 @@
         delete_button = condition_row.all('button', visible: false).last
 
         expect do
-          delete_button.click
+          hover_then_click delete_button
           expect_toastify('Condition was successfully deleted.')
         end.to change { achievement.conditions.count }.by(-1)
       end
@@ -88,23 +88,23 @@
         condition_row = all('tr', text: 'Assessment').last
         edit_button = condition_row.first('button', visible: false)
 
-        edit_button.click
+        hover_then_click edit_button
         assessment_field = find_field('Assessment')
         expect(assessment_field.value).to eq(valid_assessment_as_condition.title)
         assessment_field.click
         find('li', text: assessment_to_change_to.title).click
         click_button 'Update condition'
 
         expect_toastify('Your changes have been saved.')
-        condition_row.first('button', visible: false).click
+        hover_then_click condition_row.first('button', visible: false)
         expect(find_field('Assessment').value).to eq(assessment_to_change_to.title)
         click_button 'Cancel'
 
         # Delete achievement condition
         delete_button = condition_row.all('button', visible: false).last
 
         expect do
-          delete_button.click
+          hover_then_click delete_button
           expect_toastify('Condition was successfully deleted.')
         end.to change { achievement.conditions.count }.by(-1)
       end
@@ -128,21 +128,21 @@
         condition_row = all('tr', text: 'Level').last
         edit_button = condition_row.first('button', visible: false)
 
-        edit_button.click
+        hover_then_click edit_button
         expect(find_field('minimumLevel').value).to eq(minimum_level)
         fill_in 'minimumLevel', with: new_minimum_level
         click_button 'Update condition'
 
         expect_toastify('Your changes have been saved.')
-        condition_row.first('button', visible: false).click
+        hover_then_click condition_row.first('button', visible: false)
         expect(find_field('minimumLevel').value).to eq(new_minimum_level)
         click_button 'Cancel'
 
         # Delete level condition
         delete_button = condition_row.all('button', visible: false).last
 
         expect do
-          delete_button.click
+          hover_then_click delete_button
           expect_toastify('Condition was successfully deleted.')
         end.to change { achievement.conditions.count }.by(-1)
       end
@@ -167,23 +167,23 @@
         condition_row = all('tr', text: 'Survey').last
         edit_button = condition_row.first('button', visible: false)
 
-        edit_button.click
+        hover_then_click edit_button
         survey_field = find_field('Survey')
         expect(survey_field.value).to eq(valid_survey_as_condition.title)
         survey_field.click
         find('li', text: survey_to_change_to.title).click
         click_button 'Update condition'
 
         expect_toastify('Your changes have been saved.')
-        condition_row.first('button', visible: false).click
+        hover_then_click condition_row.first('button', visible: false)
         expect(find_field('Survey').value).to eq(survey_to_change_to.title)
         click_button 'Cancel'
 
         # Delete survey condition
         delete_button = condition_row.all('button', visible: false).last
 
         expect do
-          delete_button.click
+          hover_then_click delete_button
           expect_toastify('Condition was successfully deleted.')
         end.to change { achievement.conditions.count }.by(-1)
       end