PackageAccessControls.vue

<script setup lang="ts">
import type { NewOperation } from '~/composables/useConnector'
import { buildScopeTeam } from '~/utils/npm'

const props = defineProps<{
  packageName: string
}>()

const {
  isConnected,
  lastExecutionTime,
  listOrgTeams,
  listPackageCollaborators,
  addOperation,
  error: connectorError,
} = useConnector()

// Extract org name from scoped package (e.g., "@nuxt/kit" -> "nuxt")
const orgName = computed(() => {
  if (!props.packageName.startsWith('@')) return null
  const match = props.packageName.match(/^@([^/]+)\//)
  return match ? match[1] : null
})

// Data
const collaborators = ref<Record<string, 'read-only' | 'read-write'>>({})
const teams = ref<string[]>([])
const isLoadingCollaborators = ref(false)
const isLoadingTeams = ref(false)
const error = ref<string | null>(null)

// Grant access form
const showGrantAccess = ref(false)
const selectedTeam = ref('')
const permission = ref<'read-only' | 'read-write'>('read-only')
const isGranting = ref(false)

// Computed collaborator list with type detection
const collaboratorList = computed(() => {
  return Object.entries(collaborators.value)
    .map(([name, perm]) => {
      // Check if this looks like a team (org:team format) or user
      const isTeam = name.includes(':')
      return {
        name,
        permission: perm,
        isTeam,
        displayName: isTeam ? name.split(':')[1] : name,
      }
    })
    .sort((a, b) => {
      // Teams first, then users
      if (a.isTeam !== b.isTeam) return a.isTeam ? -1 : 1
      return a.name.localeCompare(b.name)
    })
})

// Load collaborators
async function loadCollaborators() {
  if (!isConnected.value) return

  isLoadingCollaborators.value = true
  error.value = null

  try {
    const result = await listPackageCollaborators(props.packageName)
    if (result) {
      collaborators.value = result
    } else {
      error.value = connectorError.value || 'Failed to load collaborators'
    }
  } finally {
    isLoadingCollaborators.value = false
  }
}

// Load teams for dropdown
async function loadTeams() {
  if (!isConnected.value || !orgName.value) return

  isLoadingTeams.value = true

  try {
    const result = await listOrgTeams(orgName.value)
    if (result) {
      // Teams come as "org:team" format, extract just the team name
      teams.value = result.map((t: string) => t.replace(`${orgName.value}:`, ''))
    }
  } finally {
    isLoadingTeams.value = false
  }
}

// Grant access
async function handleGrantAccess() {
  if (!selectedTeam.value || !orgName.value) return

  isGranting.value = true
  try {
    const scopeTeam = buildScopeTeam(orgName.value, selectedTeam.value)
    const operation: NewOperation = {
      type: 'access:grant',
      params: {
        permission: permission.value,
        scopeTeam,
        pkg: props.packageName,
      },
      description: `Grant ${permission.value} access to ${scopeTeam} for ${props.packageName}`,
      command: `npm access grant ${permission.value} ${scopeTeam} ${props.packageName}`,
    }

    await addOperation(operation)
    selectedTeam.value = ''
    showGrantAccess.value = false
  } finally {
    isGranting.value = false
  }
}

// Revoke access
async function handleRevokeAccess(collaboratorName: string) {
  // For teams, we use the full org:team format
  // For users... actually npm access revoke only works for teams
  // Users get access via maintainers/owners which is managed separately

  const operation: NewOperation = {
    type: 'access:revoke',
    params: {
      scopeTeam: collaboratorName,
      pkg: props.packageName,
    },
    description: `Revoke ${collaboratorName} access to ${props.packageName}`,
    command: `npm access revoke ${collaboratorName} ${props.packageName}`,
  }

  await addOperation(operation)
}

// Load on mount when connected
watch(
  isConnected,
  connected => {
    if (connected && orgName.value) {
      loadCollaborators()
      loadTeams()
    }
  },
  { immediate: true },
)

// Reload when package changes
watch(
  () => props.packageName,
  () => {
    if (isConnected.value && orgName.value) {
      loadCollaborators()
      loadTeams()
    }
  },
)

// Refresh data when operations complete
watch(lastExecutionTime, () => {
  if (isConnected.value && orgName.value) {
    loadCollaborators()
    loadTeams()
  }
})
</script>

<template>
  <section v-if="isConnected && orgName" aria-labelledby="access-heading">
    <div class="flex items-center justify-between mb-3">
      <h2 id="access-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
        Team Access
      </h2>
      <button
        type="button"
        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        aria-label="Refresh team access"
        :disabled="isLoadingCollaborators"
        @click="loadCollaborators"
      >
        <span
          class="i-carbon-renew block w-3.5 h-3.5"
          :class="{ 'animate-spin': isLoadingCollaborators }"
          aria-hidden="true"
        />
      </button>
    </div>

    <!-- Loading state -->
    <div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
      <span
        class="i-carbon-rotate block w-4 h-4 text-fg-muted animate-spin mx-auto"
        aria-hidden="true"
      />
    </div>

    <!-- Error state -->
    <div v-else-if="error" class="text-xs text-red-400 mb-2" role="alert">
      {{ error }}
    </div>

    <!-- Collaborators list -->
    <ul v-if="collaboratorList.length > 0" class="space-y-1 mb-3" aria-label="Team access list">
      <li
        v-for="collab in collaboratorList"
        :key="collab.name"
        class="flex items-center justify-between py-1"
      >
        <div class="flex items-center gap-2 min-w-0">
          <span
            v-if="collab.isTeam"
            class="i-carbon-group w-3.5 h-3.5 text-fg-subtle shrink-0"
            aria-hidden="true"
          />
          <span
            v-else
            class="i-carbon-user w-3.5 h-3.5 text-fg-subtle shrink-0"
            aria-hidden="true"
          />
          <span class="font-mono text-sm text-fg-muted truncate">
            {{ collab.isTeam ? collab.displayName : `@${collab.name}` }}
          </span>
          <span
            class="px-1 py-0.5 font-mono text-xs rounded shrink-0"
            :class="
              collab.permission === 'read-write'
                ? 'bg-green-500/20 text-green-400'
                : 'bg-fg-subtle/20 text-fg-muted'
            "
          >
            {{ collab.permission === 'read-write' ? 'rw' : 'ro' }}
          </span>
        </div>
        <!-- Only show revoke for teams (users are managed via owners) -->
        <button
          v-if="collab.isTeam"
          type="button"
          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
          :aria-label="`Revoke ${collab.displayName} access`"
          @click="handleRevokeAccess(collab.name)"
        >
          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
        </button>
        <span v-else class="text-xs text-fg-subtle"> owner </span>
      </li>
    </ul>

    <p v-else-if="!isLoadingCollaborators && !error" class="text-xs text-fg-subtle mb-3">
      No team access configured
    </p>

    <!-- Grant access form -->
    <div v-if="showGrantAccess">
      <form class="space-y-2" @submit.prevent="handleGrantAccess">
        <div class="flex items-center gap-2">
          <label for="grant-team-select" class="sr-only">Select team</label>
          <select
            id="grant-team-select"
            v-model="selectedTeam"
            name="grant-team"
            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
            :disabled="isLoadingTeams"
          >
            <option value="" disabled>
              {{ isLoadingTeams ? 'Loading teams…' : 'Select team' }}
            </option>
            <option v-for="team in teams" :key="team" :value="team">
              {{ orgName }}:{{ team }}
            </option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label for="grant-permission-select" class="sr-only">Permission level</label>
          <select
            id="grant-permission-select"
            v-model="permission"
            name="grant-permission"
            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
          >
            <option value="read-only">read-only</option>
            <option value="read-write">read-write</option>
          </select>
          <button
            type="submit"
            :disabled="!selectedTeam || isGranting"
            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
          >
            {{ isGranting ? '…' : 'grant' }}
          </button>
          <button
            type="button"
            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
            aria-label="Cancel granting access"
            @click="showGrantAccess = false"
          >
            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
          </button>
        </div>
      </form>
    </div>
    <button
      v-else
      type="button"
      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
      @click="showGrantAccess = true"
    >
      + Grant team access
    </button>
  </section>
</template>