chore!(core): remove deprecated jQuery and jQuery UI

"jQuery is deprecated and will be removed with Nextcloud 19"
Well... At least it is removed now 😉

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

build/frontend-legacy/package-lock.json

@@ -51,7 +51,6 @@
     "@vueuse/components": "^11.3.0",
     "@vueuse/core": "^11.3.0",
     "@vueuse/integrations": "^11.3.0",
-    "backbone": "^1.6.1",
     "blurhash": "^2.0.5",
     "browserslist-useragent-regexp": "^4.1.3",
     "camelcase": "^9.0.0",
@@ -67,9 +66,6 @@
     "focus-trap": "^7.6.5",
     "handlebars": "^4.7.8",
     "is-svg": "^6.1.0",
-    "jquery": "~3.7",
-    "jquery-ui": "1.14.1",
-    "jquery-ui-dist": "^1.13.3",
     "libphonenumber-js": "^1.12.34",
     "lodash": "^4.17.21",
     "marked": "^17.0.1",
@@ -81,9 +77,6 @@
     "pinia": "^2.3.1",
     "query-string": "^9.3.1",
     "regenerator-runtime": "^0.14.1",
-    "select2": "3.5.1",
-    "snap.js": "^2.0.9",
-    "strengthify": "github:nextcloud/strengthify#0.5.9",
     "throttle-debounce": "^5.0.2",
     "underscore": "1.13.7",
     "url-search-params-polyfill": "^8.2.5",

build/frontend-legacy/package.json

@@ -197,12 +197,6 @@ const config = {
 		new NodePolyfillPlugin({
 			additionalAliases: ['process'],
 		}),
-		new webpack.ProvidePlugin({
-			// Provide jQuery to jquery plugins as some are loaded before $ is exposed globally.
-			// We need to provide the path to node_moduels as otherwise npm link will fail due
-			// to tribute.js checking for jQuery in @nextcloud/vue
-			jQuery: require.resolve('jquery'),
-		}),
 
 		new WorkboxPlugin.GenerateSW({
 			swDest: 'preview-service-worker.js',

build/frontend-legacy/webpack.common.cjs

@@ -122,84 +122,6 @@
 		flex-shrink: 1;
 		// Add some spacing so the last entry looks ok
 		margin-inline-end: calc(3 * var(--default-grid-baseline));
-
-		// legacy JQuery header menus
-		// TODO: we already migrated our own code and deprecated it - can be removed together with global jQuery
-		> div,
-		> form {
-			height: 100%;
-			position: relative;
-			> .menutoggle {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: var(--header-height);
-				height: var(--header-menu-item-height);
-				cursor: pointer;
-				opacity: 0.85;
-				padding: 0;
-				margin: 2px 0;
-
-				&:focus {
-					opacity: 1;
-				}
-
-				&:focus-visible {
-					outline: none;
-				}
-			}
-
-			> .menu {
-				background-color: var(--color-main-background);
-				filter: drop-shadow(0 1px 5px var(--color-box-shadow));
-				border-radius: var(--border-radius-large);
-				box-sizing: border-box;
-				z-index: 2000;
-				position: absolute;
-				max-width: 350px;
-				@include header-menu-height();
-				inset-inline-end: 8px; // relative to parent
-				top: var(--header-height);
-				margin: 0;
-				overflow-y: auto;
-
-				&:not(.popovermenu) {
-					display: none;
-				}
-
-				/* Dropdown arrow */
-				&:after {
-					border: 10px solid transparent;
-					border-bottom-color: var(--color-main-background);
-					bottom: 100%;
-					content: ' ';
-					height: 0;
-					width: 0;
-					position: absolute;
-					pointer-events: none;
-					inset-inline-end: 10px;
-				}
-
-				& > div,
-				& > ul {
-					-webkit-overflow-scrolling: touch;
-					@include header-menu-height();
-				}
-			}
-
-			.emptycontent {
-				h2 {
-					font-weight: normal;
-					font-size: 16px;
-				}
-				[class^='icon-'],
-				[class*='icon-'] {
-					background-size: 48px;
-					height: 48px;
-					width: 48px;
-				}
-			}
-		}
 	}
 
 	// Public layout related headers

core/css/header.scss

@@ -445,232 +445,6 @@ code {
 	}
 }
 
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.ui-icon-circle-triangle-e {
-	background-image: url('../img/actions/play-next.svg?v=1');
-}
-
-.ui-icon-circle-triangle-w {
-	background-image: url('../img/actions/play-previous.svg?v=1');
-}
-
-/* ---- jQuery UI datepicker ---- */
-.ui-widget.ui-datepicker {
-	margin-top: 10px;
-	padding: 4px 8px;
-	width: auto;
-	border-radius: var(--border-radius);
-	border: none;
-	z-index: 1600 !important; // above sidebar
-
-	.ui-state-default,
-	.ui-widget-content .ui-state-default,
-	.ui-widget-header .ui-state-default {
-		border: 1px solid transparent;
-		background: inherit;
-	}
-	.ui-widget-header {
-		padding: 7px;
-		font-size: 13px;
-		border:	none;
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-
-		.ui-datepicker-title {
-			line-height: 1;
-			font-weight: normal;
-		}
-		.ui-icon {
-			opacity: .5;
-
-			&.ui-icon-circle-triangle-e,
-			&.ui-icon-circle-triangle-w {
-				background-position: center center;
-				background-repeat: no-repeat;
-			}
-		}
-		.ui-state-hover .ui-icon {
-			opacity: 1;
-		}
-	}
-	.ui-datepicker-calendar {
-		th {
-			font-weight: normal;
-			color: var(--color-text-maxcontrast);
-			opacity: .8;
-			width: 26px;
-			padding: 2px;
-		}
-		tr:hover {
-			background-color: inherit;
-		}
-		td {
-			&.ui-datepicker-today a:not(.ui-state-hover) {
-				background-color: var(--color-background-darker);
-			}
-
-			&.ui-datepicker-current-day a.ui-state-active,
-			.ui-state-hover,
-			.ui-state-focus {
-				background-color: var(--color-primary-element);
-				color: var(--color-primary-element-text);
-				font-weight: bold;
-			}
-
-			&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
-			.ui-priority-secondary:not(.ui-state-hover) {
-				color: var(--color-text-maxcontrast);
-				opacity: .8;
-			}
-		}
-	}
-}
-
-body[dir='ltr'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
-	&.ui-icon-circle-triangle-e {
-		background: url("../img/actions/arrow-right.svg");
-	}
-	&.ui-icon-circle-triangle-w {
-		background: url("../img/actions/arrow-left.svg");
-	}
-}
-
-body[dir='rtl'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
-	&.ui-icon-circle-triangle-e {
-		background: url("../img/actions/arrow-left.svg");
-	}
-	&.ui-icon-circle-triangle-w {
-		background: url("../img/actions/arrow-right.svg");
-	}
-}
-
-.ui-datepicker-prev, .ui-datepicker-next {
-	border: var(--color-border-dark);
-	background: var(--color-main-background);
-}
-
-
-/* ---- jQuery UI timepicker ---- */
-.ui-widget.ui-timepicker {
-	margin-top: 10px !important;
-	width: auto !important;
-	border-radius: var(--border-radius);
-	z-index: 1600 !important;
-
-	.ui-widget-content {
-		border: none !important;
-	}
-
-	.ui-state-default,
-	.ui-widget-content .ui-state-default,
-	.ui-widget-header .ui-state-default {
-		border: 1px solid transparent;
-		background: inherit;
-	}
-	.ui-widget-header {
-		padding: 7px;
-		font-size: 13px;
-		border:	none;
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-
-		.ui-timepicker-title {
-			line-height: 1;
-			font-weight: normal;
-		}
-	}
-	/* AM/PM fix */
-	table.ui-timepicker tr .ui-timepicker-hour-cell:first-child {
-		margin-inline-start: 30px;
-	}
-	.ui-timepicker-table {
-		th {
-			font-weight: normal;
-			color: var(--color-text-maxcontrast);
-			opacity: .8;
-			&.periods {
-				padding: 0;
-				width: 30px;
-				line-height: 30px;
-			}
-		}
-		tr:hover {
-			background-color: inherit;
-		}
-		td {
-			&.ui-timepicker-hour-cell a.ui-state-active,
-			&.ui-timepicker-minute-cell a.ui-state-active,
-			.ui-state-hover,
-			.ui-state-focus {
-				background-color: var(--color-primary-element);
-				color: var(--color-primary-element-text);
-				font-weight: bold;
-			}
-
-			&.ui-timepicker-minutes:not(.ui-state-hover) {
-				color: var(--color-text-maxcontrast);
-			}
-
-			&.ui-timepicker-hours {
-				border-inline-end: 1px solid var(--color-border);
-			}
-		}
-	}
-}
-
-/* ---- jQuery UI datepicker & timepicker global rules ---- */
-.ui-widget.ui-datepicker .ui-datepicker-calendar,
-.ui-widget.ui-timepicker table.ui-timepicker {
-	tr {
-		display: flex;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		td {
-			flex: 1 1 auto;
-			margin: 0;
-			padding: 2px;
-			height: 26px;
-			width: 26px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			> * {
-				border-radius: 50%;
-				text-align: center;
-				font-weight: normal;
-				color: var(--color-main-text);
-				display: block;
-				line-height: 18px;
-				width: 18px;
-				height: 18px;
-				padding: 3px;
-				font-size: .9em;
-			}
-		}
-	}
-}
-
-/* ---- DIALOGS ---- */
-.ui-dialog {
-	position: fixed !important;
-}
-
-span.ui-icon {
-	float: left;
-	margin-block: 3px 30px;
-	margin-inline: 0 7px;
-}
-
-/* ---- TOOLTIPS ---- */
-
-.extra-data {
-	padding-inline-end: 5px !important;
-}
-
 /* ---- TAGS ---- */
 
 #tagsdialog {

core/css/styles.scss

@@ -8,7 +8,8 @@ import ContactsMenu from '../views/ContactsMenu.vue'
 import ContactsMenuService from '../services/ContactsMenuService.ts'
 
 /**
- * @todo move to contacts menu code https://github.com/orgs/nextcloud/projects/31#card-21213129
+ * Set up the contacts menu component ("ContactsMenu")
+ * This is the menu where users can access their contacts or other users on this instance.
  */
 export function setUp() {
 	const mountPoint = document.getElementById('contactsmenu')

core/src/components/ContactsMenu.js

@@ -8,7 +8,8 @@ import Vue from 'vue'
 import AppMenu from './AppMenu.vue'
 
 /**
- *
+ * Set up the main menu component ("AppMenu")
+ * This is the top left menu where users can navigate between different apps.
  */
 export function setUp() {
 	Vue.mixin({

core/src/components/MainMenu.js

@@ -7,7 +7,8 @@ import Vue from 'vue'
 import AccountMenu from '../views/AccountMenu.vue'
 
 /**
- *
+ * Set up the user menu component ("AccountMenu")
+ * This is the top right menu where users can access their settings, profile, logout, etc.
  */
 export function setUp() {
 	const mountPoint = document.getElementById('user-menu')