finalize v3.3.0-beta

CHANGELOG.md

@@ -4,6 +4,17 @@ This file is a running track of new features and fixes to each version of the pa
 
 This project follows [Semantic Versioning](http://semver.org) guidelines.
 
+## v3.3.0-beta
+
+### Fixed
+
+-   Lack of cancel button when deleting an API key
+
+### Added
+
+-   Ability for administrators to impersonate the client view for a server and also visit the server's configuration in the admin area.
+-   Warnings when creating a new node to disable privilege separation and grant root permissions.
+
 ## v3.2.0-beta
 
 ### Fixed

resources/scripts/components/admin/nodes/CreateNodeModal.tsx

@@ -7,6 +7,7 @@ import FlashMessageRender from '@/components/elements/FlashMessageRenderer'
 import SelectFormik from '@/components/elements/forms/SelectFormik'
 import TextInputFormik from '@/components/elements/forms/TextInputFormik'
 import Select from '@/components/elements/inputs/Select'
+import MessageBox from '@/components/elements/MessageBox'
 import Modal from '@/components/elements/Modal'
 import useFlash from '@/util/useFlash'
 import { debounce } from 'debounce'
@@ -125,7 +126,10 @@ const CreateNodeModal = ({ open, onClose }: Props) => {
                         <FlashMessageRender className='mb-5' byKey={'admin:nodes.create'} />
                         <TextInputFormik name='name' label='Display Name' />
                         <LocationsSelectFormik />
-                        <TextInputFormik name='cluster' label='Cluster' />
+                        <TextInputFormik name='cluster' label='Node Name In Proxmox' />
+                        <MessageBox className='mt-3' title='Warning' type='warning'>
+                            Please disable privilege separation and grant root privileges
+                        </MessageBox>
                         <div className='grid gap-3 grid-cols-2'>
                             <TextInputFormik name='tokenId' label='Token ID' />
                             <TextInputFormik name='secret' label='Secret' />

resources/scripts/components/admin/nodes/settings/GeneralContainer.tsx

@@ -104,6 +104,7 @@ const GeneralContainer = () => {
                                 <FlashMessageRender byKey='admin:node:settings:general' />
                                 <TextInputFormik name='name' label='Display Name' />
                                 <LocationsSelectFormik />
+                                <TextInputFormik name='cluster' label='Node Name In Proxmox' />
                                 <TextInputFormik name='fqdn' label='FQDN' />
                                 <TextInputFormik name='port' label='Port' />
                                 <div className='grid gap-3 grid-cols-2'>

resources/scripts/components/admin/servers/overview/ServerOverviewContainer.tsx

@@ -1,7 +1,20 @@
 import ServerContentBlock from '@/components/admin/servers/ServerContentBlock'
+import Button from '@/components/elements/Button'
+import { AdminServerContext } from '@/state/admin/server'
+import { Link } from 'react-router-dom'
 
 const ServerOverviewContainer = () => {
-    return <ServerContentBlock title={'Overview'}></ServerContentBlock>
+    const server = AdminServerContext.useStoreState(state => state.server.data!)
+
+    return (
+        <ServerContentBlock title={'Overview'}>
+            <Link to={`/servers/${server.id}`}>
+                <Button className='inline-flex items-center' as={'a'}>
+                    Enter Server Console
+                </Button>
+            </Link>
+        </ServerContentBlock>
+    )
 }
 
 export default ServerOverviewContainer

resources/scripts/components/admin/tokens/TokensContainer.tsx

@@ -85,6 +85,7 @@ const TokensContainer = () => {
                         </Modal.Description>
                     </Modal.Body>
                     <Modal.Actions>
+                        <Modal.Action onClick={() => setOpen(false)}>Cancel</Modal.Action>
                         <Modal.Action onClick={handleDelete}>Delete</Modal.Action>
                     </Modal.Actions>
                 </Modal>

resources/scripts/components/elements/Button.tsx

@@ -1,14 +1,15 @@
 import LoadingDots from '@/components/elements/LoadingDots'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { ComponentProps } from 'react'
+import { ComponentProps, ElementType } from 'react'
 import tw from 'twin.macro'
 
 export interface ButtonProps extends ComponentProps<'button'> {
   variant?: 'outline' | 'filled'
   color?: 'success' | 'danger' | 'accent'
   size?: 'sm'
   loading?: boolean
+  as?: ElementType<any>
 }
 
 const getBorderStyles = (variant: ButtonProps['variant'], color: ButtonProps['color']) => {
@@ -67,7 +68,8 @@ const StyledButton = styled.button<ButtonProps>`
 
 const Button = ({ loading, disabled, ...props}: ButtonProps) => {
   return <StyledButton disabled={loading || disabled} {...props}>
-    {loading ? <div className='w-full h-full grid place-items-center'><LoadingDots size={5} /></div> : props.children}
+    {loading ? <div className='w-full h-full grid place-items-center'><LoadingDots size={5} /></div> : null}
+    <span className={loading ? 'invisible' : undefined}>{props.children}</span>
   </StyledButton>
 }
 

resources/scripts/components/elements/MessageBox.tsx

@@ -1,12 +1,14 @@
 import tw, { TwStyle } from 'twin.macro'
 import styled from '@emotion/styled'
+import { classNames } from '@/util/helpers'
 
 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error'
 
 interface Props {
     title?: string
     children: string
     type?: FlashMessageType
+    className?: string
 }
 
 const styling = (type?: FlashMessageType): TwStyle | string => {
@@ -44,8 +46,8 @@ const Container = styled.div<{ $type?: FlashMessageType }>`
     ${props => styling(props.$type)};
 `
 
-const MessageBox = ({ title, children, type }: Props) => (
-    <Container className='lg:inline-flex' $type={type} role={'alert'}>
+const MessageBox = ({ title, children, type, className }: Props) => (
+    <Container className={classNames('lg:inline-flex', className)} $type={type} role={'alert'}>
         {title && (
             <span
                 className={`title flex rounded uppercase px-2 py-1 text-xs font-bold mr-3 leading-none ${getBackground(

resources/scripts/components/elements/Modal.tsx

@@ -47,7 +47,7 @@ Modal.Title = styled.h3`
 `
 
 Modal.Body = styled.div`
-${tw`max-h-[50vh] overflow-y-auto p-6 bg-accent-100`}
+${tw`max-h-[60vh] overflow-y-auto p-6 bg-accent-100`}
 `
 
 Modal.Description = ({ children, bottomMargin }) => {

resources/scripts/components/servers/overview/ServerAdminBlock.tsx

@@ -0,0 +1,27 @@
+import Button from '@/components/elements/Button'
+import Card from '@/components/elements/Card'
+import { ServerContext } from '@/state/server'
+import { Link } from 'react-router-dom'
+
+const ServerAdminBlock = () => {
+    const serverId = ServerContext.useStoreState(state => state.server.data!.id)
+
+    return (
+        <Card className='flex flex-col col-span-10 md:col-span-5 relative'>
+            <h5 className='h5'>Configure This Server</h5>
+            <p className='description-small mt-1'>
+                You are an administrator! You can click below to visit this server's build configuration and swiftly
+                make edits.
+            </p>
+            <div className='flex mt-auto justify-end'>
+                <Link to={`/admin/servers/${serverId}`}>
+                    <Button className='inline-flex items-center' as={'a'}>
+                        Configure Server
+                    </Button>
+                </Link>
+            </div>
+        </Card>
+    )
+}
+
+export default ServerAdminBlock

resources/scripts/components/servers/overview/ServerOverviewContainer.tsx

@@ -1,15 +1,19 @@
+import ServerAdminBlock from '@/components/servers/overview/ServerAdminBlock'
 import ServerDetailsBlock from '@/components/servers/overview/ServerDetailsBlock'
 import ServerPowerBlock from '@/components/servers/overview/ServerPowerBlock'
 import ServerTerminalBlock from '@/components/servers/overview/ServerTerminalBlock'
 import ServerContentBlock from '@/components/servers/ServerContentBlock'
+import { useStoreState } from '@/state'
 
 const ServerOverviewContainer = () => {
+  const rootAdmin = useStoreState(state => state.user.data!.rootAdmin)
   return (
     <ServerContentBlock title='Overview'>
       <ServerPowerBlock />
       <div className='grid grid-cols-10 gap-6'>
         <ServerDetailsBlock />
         <ServerTerminalBlock />
+        {rootAdmin && <ServerAdminBlock />}
       </div>
     </ServerContentBlock>
   )