<script setup>
...
function reloadTable() {
    cells = [];
    baseStore.entities.forEach(entity => {
        const entityName = entity.type === 'A/B test' ? 'experiment' : 'instrument';
        const entityCapitalize = entityName.charAt(0).toUpperCase() + entityName.slice(1);
        const url = '/update-' + entityName + '/';
        let actions = [
            { label: 'Edit Configuration', value: 'edit', icon: cdxIconEdit, url: url + entity.slug },
            { label: 'View Phab Ticket', value: 'phab', icon: cdxIconLinkExternal, url: entity.task, urlNewTab: true },
            { label: 'Contact Owner', value: 'contact', icon: cdxIconMessage },
            { label: entity.status ? 'Turn '+ entityCapitalize +' Off' : 'Turn '+ entityCapitalize +' On', value: 'status',
                icon: cdxIconPower, disabled: true },
            { label: 'Delete '+ entityCapitalize +'', value: 'delete', icon: cdxIconTrash },
        ];
        cells.push({
            name: entity.name,
            team: entity.owner.join(", "),
            type: entity.type,
            start_date: new Date(entity.utc_start_dt),
            progress: Math.round(entity.progress * 100) + ' %',
            status: entity.status ? 'On' : 'Off',
            actions: actions,
            slug: entity.slug,
            instrument: entity
        })
    });

    data.value = cells;
}

...

function setMenuItems(row) {
    // Add first object to action menu
    let actions = [{ label: 'Edit', value: row.instrument.type === 'A/B test' ? 'update-experiment' : 'update-instrument', icon: cdxIconEdit }];

    let canBeActivatedStartTime = true;
    let canBeActivatedRiskLevel = true;
    let entity = row.experiment === undefined ? 'instrument' : 'experiment';

    const activationMessage = 'Turn ' + (row[entity].status ? 'Off' : 'On');
    let activationDescription;

    // Update actions menu with activation message and results if the item row is an experiment
    if (row[entity].type === 'A/B test') {
        // Calculates whether the experiment can be activated and the corresponding message
        if (row[entity].status === 0) {
            let todayPlus24Hours = new UTCDate();
            todayPlus24Hours.setDate(todayPlus24Hours.getDate() + 1);

            const entityStartDate = new Date(row[entity].utc_start_dt);
            canBeActivatedStartTime = entityStartDate > todayPlus24Hours;
            if (!canBeActivatedStartTime) {
                activationDescription = 'Start date must be 24h in the future. Currently set to ' + row[entity].utc_start_dt;
            }
        }

        // Determines whether the experiment's results can be accessed and the corresponding message
        let analytics_uri = registerExperimentLink;
        if (experimentStore.registeredExperiments.includes(row[entity].slug)) {
            analytics_uri = getAnalyticsUri( row[entity].name, row[entity].sample_unit );
        }
        const experimentResultsLabel = analytics_uri === registerExperimentLink ?
            'View results - This experiment is not registered for automated analysis. Learn more' :
            'View results in Superset';
        const experimentResults = {
            label: experimentResultsLabel,
            value: 'analytics',
            icon: cdxIconChart,
            url: analytics_uri,
            urlNewTab: true
        };
        actions.push(experimentResults);
    }

    // Calculates whether an experiment/instrument can be activated based on its risk level
    if (row[entity].status === 0) {
        canBeActivatedRiskLevel = row[entity].risk_level !== 'Risk assessment pending';
        if (!canBeActivatedRiskLevel) {
            activationDescription = 'Risk level must be set with along the security legal review when needed'
        }
    }

    const canBeActivated = canBeActivatedStartTime && canBeActivatedRiskLevel;

    // Append the rest of the action menu items
    actions.push(
        { label: 'View Phabricator task', value: 'phab', icon: cdxIconLinkExternal, urlNewTab: true },
        { label: 'Contact Owner', value: 'contact', icon: cdxIconMessage },
        { label: activationMessage, description: activationDescription, value: 'status', icon: cdxIconPower, disabled: !canBeActivated },
        { label: 'Delete', value: 'delete', icon: cdxIconTrash, action: 'destructive'}
    );

    return actions;
}

...

function handleAction(row) {
    let entity = row.experiment === undefined ? 'instrument' : 'experiment';
    baseStore.setEntity(row[entity]);

    switch (selection.value) {
        case 'update-experiment':
            router.push(row.actions[0].url);
        case 'update-instrument':
            router.push(row.actions[0].url);
            break;
        case 'phab':
            window.location.href = row.actions[1].url;
            break;
        case 'status':
            activationWarning.value = true
            break;
        case 'delete':
            deleteWarning.value = true;
            break;
    }

    selection.value = null;
}
...

</script>
<template>
...
        <cdx-table ref="table"
            v-model:sort="sort"
            class="cdx-docs-table-with-sort"
            caption="Experiments and instruments"
            :columns="columns"
            :data="data"
            @update:sort="onSort"
            :paginate="true"
            :paginationSizeOptions="[ { value: 10 }, { value: 20 }, { value: 30 } ]"
            :pagination-size-default="10"
        >
            <template #header>
                <cdx-search-input
                    placeholder="Search"
                    @update:model-value="onSearch($event)"
                    autofocus
                />
            </template>

            <template #item-name="{ row, item }">
                <router-link class="cdx-docs-link" :to="`/${ row.type === 'instrument' ? 'instrument' : 'experiment' }/${ row.slug }`">
                    {{ item }}
                </router-link>
            </template>

            <template #item-start_date="{ item }">
                {{ getFormattedDate( item ) }}
            </template>

            <!-- Get data for the entire row to grab the block id and perform an action. -->
            <template #item-actions="{ row }">
                <div class="cdx-docs-table-custom-cells__actions">
                    <cdx-menu-button
                        v-model:selected="selection"
                        :menu-items="setMenuItems(row)"
                        @update:selected="handleAction(row)"
                        aria-label="Change input type"
                    >
                        <cdx-icon :icon="cdxIconEllipsis" />
                    </cdx-menu-button>
                </div>
            </template>

            <template #empty-state>
                {{ emptyMessage }}
            </template>
        </cdx-table>
...
</template>