(feat): Allow only some roles to configure Mux (#401)

Author: Jorflo

src/_exports/index.ts

@@ -13,6 +13,7 @@ export const defaultConfig: PluginConfig = {
   normalize_audio: false,
   defaultSigned: false,
   tool: DEFAULT_TOOL_CONFIG,
+  allowedRolesForConfiguration: [],
 }
 
 export const muxInput = definePlugin<Partial<PluginConfig> | void>((userConfig) => {

src/components/Input.tsx

@@ -12,6 +12,7 @@ import ErrorBoundaryCard from './ErrorBoundaryCard'
 import {InputFallback} from './Input.styled'
 import Onboard from './Onboard'
 import Uploader from './Uploader'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 export interface InputProps extends MuxInputProps {
   config: PluginConfig
@@ -22,6 +23,7 @@ const Input = (props: InputProps) => {
   const assetDocumentValues = useAssetDocumentValues(props.value?.asset)
   const poll = useMuxPolling(props.readOnly ? undefined : assetDocumentValues?.value || undefined)
   const [dialogState, setDialogState] = useDialogState()
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   const error = secretDocumentValues.error || assetDocumentValues.error || poll.error /*||
     // @TODO move errored logic to Uploader, where handleRemoveVideo can be called
@@ -44,7 +46,7 @@ const Input = (props: InputProps) => {
           ) : (
             <>
               {secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? (
-                <Onboard setDialogState={setDialogState} />
+                <Onboard setDialogState={setDialogState} config={props.config} />
               ) : (
                 <Uploader
                   {...props}
@@ -59,7 +61,7 @@ const Input = (props: InputProps) => {
                 />
               )}
 
-              {dialogState === 'secrets' && (
+              {dialogState === 'secrets' && hasConfigAccess && (
                 <ConfigureApi
                   setDialogState={setDialogState}
                   secrets={secretDocumentValues.value.secrets}

src/components/Onboard.tsx

@@ -1,17 +1,21 @@
 import {PlugIcon} from '@sanity/icons'
-import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
+import {Button, Card, Flex, Grid, Heading, Inline, Text} from '@sanity/ui'
 import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import MuxLogo from './MuxLogo'
+import {PluginConfig} from '../util/types'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 interface OnboardProps {
   setDialogState: SetDialogState
+  config: PluginConfig
 }
 
 export default function Onboard(props: OnboardProps) {
   const {setDialogState} = props
   const handleOpen = useCallback(() => setDialogState('secrets'), [setDialogState])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   return (
     <>
@@ -41,7 +45,16 @@ export default function Onboard(props: OnboardProps) {
                 </Heading>
               </Inline>
               <Inline paddingY={1}>
-                <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+                {hasConfigAccess ? (
+                  <Button mode="ghost" icon={PlugIcon} text="Configure API" onClick={handleOpen} />
+                ) : (
+                  <Card padding={[3, 3, 3]} radius={2} shadow={1} tone="critical">
+                    <Text>
+                      You do not have access to configure the Mux API. Please contact your
+                      administrator.
+                    </Text>
+                  </Card>
+                )}
               </Inline>
             </Grid>
           </Flex>

src/components/PlayerActionsMenu.tsx

@@ -27,8 +27,9 @@ import {styled} from 'styled-components'
 
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
-import type {MuxInputProps, VideoAssetDocument} from '../util/types'
+import type {MuxInputProps, PluginConfig, VideoAssetDocument} from '../util/types'
 import {FileInputMenuItem} from './FileInputMenuItem'
+import {useAccessControl} from '../hooks/useAccessControl'
 
 const LockCard = styled(Card)`
   position: absolute;
@@ -55,12 +56,14 @@ function PlayerActionsMenu(
     onSelect: (files: File[]) => void
     dialogState: DialogState
     setDialogState: SetDialogState
+    config: PluginConfig
   }
 ) {
   const {asset, readOnly, dialogState, setDialogState, onChange, onSelect} = props
   const [open, setOpen] = useState(false)
   const [menuElement, setMenuRef] = useState<HTMLDivElement | null>(null)
   const isSigned = useMemo(() => getPlaybackPolicy(asset) === 'signed', [asset])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   const onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange])
 
@@ -125,12 +128,16 @@ function PlayerActionsMenu(
               />
             )}
             <MenuDivider />
-            <MenuItem
-              icon={PlugIcon}
-              text="Configure API"
-              onClick={() => setDialogState('secrets')}
-            />
-            <MenuDivider />
+            {hasConfigAccess && (
+              <>
+                <MenuItem
+                  icon={PlugIcon}
+                  text="Configure API"
+                  onClick={() => setDialogState('secrets')}
+                />
+                <MenuDivider />
+              </>
+            )}
             <MenuItem
               tone="critical"
               icon={ResetIcon}

src/components/UploadPlaceholder.tsx

@@ -5,18 +5,22 @@ import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'
+import {useAccessControl} from '../hooks/useAccessControl'
+import {PluginConfig} from '../util/types'
 
 interface UploadPlaceholderProps {
   setDialogState: SetDialogState
   readOnly: boolean
   hovering: boolean
   needsSetup: boolean
   onSelect: FileInputButtonProps['onSelect']
+  config: PluginConfig
 }
 export default function UploadPlaceholder(props: UploadPlaceholderProps) {
   const {setDialogState, readOnly, onSelect, hovering, needsSetup} = props
   const handleBrowse = useCallback(() => setDialogState('select-video'), [setDialogState])
   const handleConfigureApi = useCallback(() => setDialogState('secrets'), [setDialogState])
+  const {hasConfigAccess} = useAccessControl(props.config)
 
   return (
     <Card
@@ -58,15 +62,17 @@ export default function UploadPlaceholder(props: UploadPlaceholderProps) {
           />
           <Button mode="bleed" icon={SearchIcon} text="Select" onClick={handleBrowse} />
 
-          <Button
-            padding={3}
-            radius={3}
-            tone={needsSetup ? 'critical' : undefined}
-            onClick={handleConfigureApi}
-            icon={PlugIcon}
-            mode="bleed"
-            title="Configure plugin credentials"
-          />
+          {hasConfigAccess && (
+            <Button
+              padding={3}
+              radius={3}
+              tone={needsSetup ? 'critical' : undefined}
+              onClick={handleConfigureApi}
+              icon={PlugIcon}
+              mode="bleed"
+              title="Configure plugin credentials"
+            />
+          )}
         </Inline>
       </Flex>
     </Card>

src/components/Uploader.tsx

@@ -364,6 +364,7 @@ export default function Uploader(props: Props) {
                   onChange={props.onChange}
                   onSelect={handleUpload}
                   readOnly={props.readOnly}
+                  config={props.config}
                 />
               }
             />
@@ -375,6 +376,7 @@ export default function Uploader(props: Props) {
             readOnly={!!props.readOnly}
             setDialogState={props.setDialogState}
             needsSetup={props.needsSetup}
+            config={props.config}
           />
         )}
       </UploadCard>

src/hooks/useAccessControl.ts

@@ -0,0 +1,12 @@
+import {useCurrentUser} from 'sanity'
+import {PluginConfig} from '../util/types'
+
+export const useAccessControl = (config: PluginConfig) => {
+  const user = useCurrentUser()
+
+  const hasConfigAccess =
+    !config?.allowedRolesForConfiguration ||
+    user?.roles?.some((role) => config.allowedRolesForConfiguration.includes(role.name))
+
+  return {hasConfigAccess}
+}

src/util/types.ts

@@ -88,6 +88,14 @@ export interface PluginConfig extends MuxInputConfig {
         title?: string
         icon?: React.ComponentType
       }
+
+  /**
+   * The roles that are allowed to configure the plugin.
+   *
+   * If not set, all roles will be allowed to configure the plugin.
+   * @defaultValue []
+   */
+  allowedRolesForConfiguration: string[]
 }
 
 export const SUPPORTED_MUX_LANGUAGES = [