feat: static team settings page

public/i18n/en/common.json

@@ -7,7 +7,7 @@
   "Cluster": "Cluster",
   "Cluster_plural": "Clusters",
   "Clusters": "Clusters",
-  "DELETE_RESOURCE": "Delete {{resourceName}} {{resourceType}}",
+  "DELETE_RESOURCE": "Delete {{resourceName}} {{resourceType}}?",
   "DELETE_RESOURCE_CONFIRMATION": "Type the name of the {{resourceType}} (\"{{resourceName}}\") to confirm.",
   "DRONE_MESSAGE": "Drone <1>build {{id}}</1> <strong>{{status}}</strong> for commit <6>{{sha}}</6> at {{datetime}}.",
   "Dashboard": "Dashboard",

src/App.tsx

@@ -22,8 +22,8 @@ import Service from 'pages/Service'
 import Services from 'pages/Services'
 import Setting from 'pages/Setting'
 import SettingsOverview from 'pages/SettingsOverview'
-import Team from 'pages/Team'
-import Teams from 'pages/Teams'
+import Team from 'pages/teams/create-edit'
+import Teams from 'pages/teams/overview'
 import Policies from 'pages/Policies'
 import SessionProvider from 'providers/Session'
 import ThemeProvider from 'theme'

src/components/AdvancedSettings.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { styled } from '@mui/material/styles'
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
+import { KeyboardArrowRight } from '@mui/icons-material'
+import { Typography } from './Typography'
+
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  marginTop: 0,
+  color: theme.palette.cl.text.title,
+}))
+
+const StyledDescription = styled(Typography)(({ theme }) => ({
+  color: theme.palette.cl.text.subTitle,
+}))
+
+const StyledAccordion = styled(Accordion)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  boxShadow: 'none !important',
+  margin: '0px !important',
+  '&:before': {
+    display: 'none', // Remove the default border above the accordion
+  },
+}))
+
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  boxShadow: 'none',
+  marginTop: '0px',
+  padding: 0,
+  '&:before': {
+    display: 'none', // Remove the default border above the accordion
+  },
+}))
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+  padding: '0',
+  '.MuiAccordionSummary-content': {
+    margin: '0', // Remove margin between text and icon
+  },
+  marginTop: '0px !important',
+  display: 'inline-flex',
+}))
+
+interface Props {
+  description?: string
+  title?: string
+  children?: React.ReactNode
+  noPaddingTop?: boolean
+}
+
+export default function AdvancedSettings(props: Props) {
+  const { title = 'Advanced Settings', description, children, noPaddingTop } = props
+  const [expanded, setExpanded] = useState(true)
+
+  const handleAccordionChange = () => {
+    setExpanded((prev) => !prev)
+  }
+
+  return (
+    <StyledAccordion disableGutters expanded={expanded} onChange={handleAccordionChange}>
+      <StyledAccordionSummary
+        expandIcon={<KeyboardArrowRight />}
+        sx={{
+          '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+            transform: 'rotate(90deg)',
+          },
+        }}
+      >
+        <div>
+          {title && <StyledTitle variant='subtitle1'>{title}</StyledTitle>}
+          {description && <StyledDescription>{description}</StyledDescription>}
+        </div>
+      </StyledAccordionSummary>
+      <StyledAccordionDetails>{children}</StyledAccordionDetails>
+    </StyledAccordion>
+  )
+}

src/components/ControlledBox.tsx

@@ -0,0 +1,16 @@
+import Box, { BoxProps } from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+interface ControlledBoxProps extends BoxProps {
+  disabled?: boolean
+}
+
+const ControlledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'disabled',
+})<ControlledBoxProps>(({ disabled }) => ({
+  opacity: disabled ? 0.5 : 1,
+  pointerEvents: disabled ? 'none' : 'auto',
+  cursor: disabled ? 'default' : 'text',
+}))
+
+export default ControlledBox

src/components/Dashboard.tsx

@@ -1,12 +1,12 @@
 import { Box, Card, Grid, Typography, useTheme } from '@mui/material'
 import { useSession } from 'providers/Session'
 import * as React from 'react'
-import { GetTeamApiResponse } from 'redux/otomiApi'
 import { makeStyles } from 'tss-react/mui'
 import { getDomain } from 'layouts/Shell'
 import useSettings from 'hooks/useSettings'
 import Link from '@mui/material/Link'
 import { Link as RouterLink } from 'react-router-dom'
+import { GetTeamApiResponse } from 'redux/otomiApi'
 import UpgradeVersion from './UpgradeVersion'
 
 // styles -----------------------------------------------------------

src/components/ImgButtonGroup.tsx

@@ -30,6 +30,7 @@ const StyledTypography = styled(Typography)<{ selected: boolean }>(({ theme, sel
 
 interface ImgButtonGroupProps {
   title?: string
+  description?: string
   name: string
   control: any
   value: string
@@ -38,7 +39,16 @@ interface ImgButtonGroupProps {
   disabled?: boolean
 }
 
-function ImgButtonGroup({ title, name, control, value, options, onChange, disabled = false }: ImgButtonGroupProps) {
+function ImgButtonGroup({
+  title,
+  description,
+  name,
+  control,
+  value,
+  options,
+  onChange,
+  disabled = false,
+}: ImgButtonGroupProps) {
   return (
     <Controller
       name={name}
@@ -51,6 +61,7 @@ function ImgButtonGroup({ title, name, control, value, options, onChange, disabl
               <Typography variant='h6' sx={{ fontSize: 16, fontWeight: 400 }}>
                 {title}
               </Typography>
+              {description && <Typography>{description}</Typography>}
             </Box>
           )}
           <Box sx={{ display: 'flex', gap: 1 }}>

src/components/InformationBanner.tsx

@@ -1,25 +1,28 @@
-import { Box, Typography, styled, useTheme } from '@mui/material'
+import { Box, SxProps, Typography, styled, useTheme } from '@mui/material'
 import React from 'react'
 import Iconify from './Iconify'
 
-const StyledInfoBanner = styled(Box)({
+const StyledInfoBanner = styled(Box)<{ small?: boolean }>(({ theme, small }) => ({
   backgroundColor: '#f2f2894d',
-  padding: '10px',
+  padding: small ? '5px' : '10px',
   border: '1px solid #d4d402',
   borderRadius: '8px',
   display: 'flex',
   alignItems: 'center',
-})
+  maxWidth: small ? '800px' : 'inherit',
+}))
 
 interface Props {
-  message: string
+  message: string | React.ReactNode
+  small?: boolean
   children?: React.ReactNode
+  sx?: SxProps
 }
 
-export default function InformationBanner({ message, children }: Props) {
+export default function InformationBanner({ message, children, small, sx }: Props) {
   const theme = useTheme()
   return (
-    <StyledInfoBanner>
+    <StyledInfoBanner small={small} sx={{ ...sx }}>
       <Iconify icon='material-symbols:info' width={40} height={28} color='#c7d030d9' />
       <Typography sx={{ color: theme.palette.text.primary }}>{message}</Typography>
       {children}