Server Content Tab Fixes & Improvements (#3230)

* fix cancel button on edit modal

* make hardcoded mod text dynamic for plugins

* fix files path when clicking an external plugin

* fix plugins path for file uploads

* improve friendly mod name logic

* fix toggling plugins

* update pyroServers content definitions

* install then remove for changing version

Reinstall isn't currently implemented properly

* make the edit dialog pretty

* make new admonition component

* fix warning admonition colour

* new edit version modal

* cleanup

* make latest version default

* final touches

* lint

packages/ui/src/components/base/Admonition.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    :class="[
+      'flex rounded-2xl border-2 border-solid p-4 gap-4 font-semibold text-contrast',
+      typeClasses[type],
+    ]"
+  >
+    <component
+      :is="icons[type]"
+      :class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
+    />
+    <div class="flex flex-col gap-2">
+      <div class="font-semibold">
+        <slot name="header">{{ header }}</slot>
+      </div>
+      <div class="font-normal">
+        <slot>{{ body }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
+
+defineProps({
+  type: {
+    type: String as () => 'info' | 'warning' | 'critical',
+    default: 'info',
+  },
+  header: {
+    type: String,
+    default: '',
+  },
+  body: {
+    type: String,
+    default: '',
+  },
+})
+
+const typeClasses = {
+  info: 'border-blue bg-bg-blue',
+  warning: 'border-orange bg-bg-orange',
+  critical: 'border-brand-red bg-bg-red',
+}
+
+const iconClasses = {
+  info: 'text-blue',
+  warning: 'text-orange',
+  critical: 'text-brand-red',
+}
+
+const icons = {
+  info: InfoIcon,
+  warning: IssuesIcon,
+  critical: XCircleIcon,
+}
+</script>

packages/ui/src/components/base/ManySelect.vue

@@ -1,12 +1,14 @@
 <template>
   <ButtonStyled>
     <PopoutMenu
-      v-if="options.length > 1"
+      v-if="options.length > 1 || showAlways"
       v-bind="$attrs"
       :disabled="disabled"
       :position="position"
       :direction="direction"
       :dropdown-id="dropdownId"
+      :dropdown-class="dropdownClass"
+      :tooltip="tooltip"
       @open="
         () => {
           searchQuery = ''
@@ -87,6 +89,9 @@ const props = withDefaults(
     displayName?: (option: Option) => string
     search?: boolean
     dropdownId?: string
+    dropdownClass?: string
+    showAlways?: boolean
+    tooltip?: string
   }>(),
   {
     disabled: false,
@@ -94,7 +99,10 @@ const props = withDefaults(
     direction: 'auto',
     displayName: (option: Option) => option as string,
     search: false,
-    dropdownId: null,
+    dropdownId: '',
+    dropdownClass: '',
+    showAlways: false,
+    tooltip: '',
   },
 )
 

packages/ui/src/components/base/PopoutMenu.vue

@@ -4,6 +4,7 @@
     no-auto-focus
     :aria-id="dropdownId || null"
     placement="bottom-end"
+    :class="dropdownClass"
     @apply-hide="focusTrigger"
     @apply-show="focusMenuChild"
   >
@@ -34,6 +35,11 @@ defineProps({
     default: null,
     required: false,
   },
+  dropdownClass: {
+    type: String,
+    default: null,
+    required: false,
+  },
   tooltip: {
     type: String,
     default: null,

packages/ui/src/components/billing/PurchaseModal.vue

@@ -137,32 +137,19 @@
               <input v-model="customServerConfig.storageGbFormatted" disabled class="input" />
             </div>
           </div>
-          <div
-            v-else
-            class="flex justify-between rounded-2xl border-2 border-solid border-blue bg-bg-blue p-4 font-semibold text-contrast"
+          <Admonition
+            v-else-if="customOutOfStock && customMatchingProduct"
+            type="info"
+            header="This plan is currently out of stock"
           >
-            <div class="flex w-full justify-between gap-2">
-              <div class="flex flex-row gap-4">
-                <InfoIcon class="hidden flex-none h-8 w-8 text-blue sm:block" />
-
-                <div v-if="customOutOfStock && customMatchingProduct" class="flex flex-col gap-2">
-                  <div class="font-semibold">This plan is currently out of stock</div>
-                  <div class="font-normal">
-                    We are currently
-                    <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
-                    for your selected RAM amount. Please try again later, or try a different amount.
-                  </div>
-                </div>
-                <div v-else class="flex flex-col gap-2">
-                  <div class="font-semibold">We can't seem to find your selected plan</div>
-                  <div class="font-normal">
-                    We are currently unable to find a server for your selected RAM amount. Please
-                    try again later, or try a different amount.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+            We are currently
+            <a :href="outOfStockUrl" class="underline" target="_blank">out of capacity</a>
+            for your selected RAM amount. Please try again later, or try a different amount.
+          </Admonition>
+          <Admonition v-else type="info" header="We can't seem to find your selected plan">
+            We are currently unable to find a server for your selected RAM amount. Please try again
+            later, or try a different amount.
+          </Admonition>
 
           <div class="flex items-center gap-2">
             <InfoIcon class="hidden sm:block" />
@@ -500,6 +487,7 @@ import { useVIntl, defineMessages } from '@vintl/vintl'
 import { Multiselect } from 'vue-multiselect'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
+import Admonition from '../base/Admonition.vue'
 
 const { locale, formatMessage } = useVIntl()
 

packages/ui/src/components/index.ts

@@ -1,5 +1,6 @@
 // Base content
 export { default as Accordion } from './base/Accordion.vue'
+export { default as Admonition } from './base/Admonition.vue'
 export { default as AutoLink } from './base/AutoLink.vue'
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'