Skip to content

Commit

Permalink
feat: implement edit permissions for portal administration components
Browse files Browse the repository at this point in the history
  • Loading branch information
Noggling committed Dec 10, 2024
1 parent 7b3a0b5 commit a731fc4
Show file tree
Hide file tree
Showing 12 changed files with 190 additions and 149 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useCreateContextType, useGetContextTypes } from '../../hooks/use-contex
import { ContextTypeTable } from './ContextTypeTable';
import { InfoPopover } from '../InfoPopover';
import { useState } from 'react';
import { useAccess } from '../../hooks/use-access';

const Style = {
Content: styled.div`
Expand Down Expand Up @@ -52,7 +53,7 @@ const Style = {

export const EditContextTypeForm = () => {
const { mutateAsync: createContextType, reset: resetCreate } = useCreateContextType();

const { data: isAdmin } = useAccess();
const {
register,
handleSubmit,
Expand All @@ -77,45 +78,47 @@ export const EditContextTypeForm = () => {

return (
<Style.Content>
<Style.Card>
<Style.Row onClick={() => setActive((s) => !s)}>
<Style.Row>
<Typography variant="h6">Add Context Type</Typography>
<InfoPopover title="Add Context Type">
<Typography>
Expand the form to add new context type by pressing the chevron icon.
</Typography>
</InfoPopover>
</Style.Row>
<Button
variant="ghost_icon"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
setActive((s) => !s);
}}
>
<Icon data={active ? chevron_down : chevron_left} />
</Button>
</Style.Row>
{active && (
<Style.From onSubmit={handleSubmit(onSubmit)} id="context-type-form">
<TextField
{...register('type')}
id="textfield-context-type"
variant={errors.type && 'error'}
helperText={errors.type?.message}
inputIcon={errors.type && <Icon data={error_filled} title="Error" />}
label="Type *"
maxLength={31}
/>
<Button form="context-type-form" type="submit" disabled={isSubmitting || !isValid}>
Add
{isAdmin && (
<Style.Card>
<Style.Row onClick={() => setActive((s) => !s)}>
<Style.Row>
<Typography variant="h6">Add Context Type</Typography>
<InfoPopover title="Add Context Type">
<Typography>
Expand the form to add new context type by pressing the chevron icon.
</Typography>
</InfoPopover>
</Style.Row>
<Button
variant="ghost_icon"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
setActive((s) => !s);
}}
>
<Icon data={active ? chevron_down : chevron_left} />
</Button>
</Style.From>
)}
</Style.Card>
{contextTypes?.length && <ContextTypeTable contextTypes={contextTypes} />}
</Style.Row>
{active && (
<Style.From onSubmit={handleSubmit(onSubmit)} id="context-type-form">
<TextField
{...register('type')}
id="textfield-context-type"
variant={errors.type && 'error'}
helperText={errors.type?.message}
inputIcon={errors.type && <Icon data={error_filled} title="Error" />}
label="Type *"
maxLength={31}
/>
<Button form="context-type-form" type="submit" disabled={isSubmitting || !isValid}>
Add
</Button>
</Style.From>
)}
</Style.Card>
)}
{contextTypes?.length && <ContextTypeTable contextTypes={contextTypes} isAdmin={isAdmin} />}
</Style.Content>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Button, Icon } from '@equinor/eds-core-react';
import { delete_to_trash } from '@equinor/eds-icons';
import { useRemoveContextType } from '../../hooks/use-context-type-query';

export function ContextTypeTable({ contextTypes }: { contextTypes?: { type: string }[] }) {
export function ContextTypeTable({ contextTypes, isAdmin }: { contextTypes?: { type: string }[]; isAdmin?: boolean }) {
const ref = useRef(null);
const [_, height] = useResizeObserver(ref);
const { mutateAsync: removeContextType } = useRemoveContextType();
Expand Down Expand Up @@ -54,6 +54,7 @@ export function ContextTypeTable({ contextTypes }: { contextTypes?: { type: stri
<Button
variant="ghost"
title={`Delete ${params.data?.type}`}
disabled={!isAdmin}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const EditPortalForm = (props: {

const account = useCurrentAccount();
const canEdit = useMemo(
() => watch().admins?.some((admin) => admin.azureUniqueId === account?.localAccountId) || isAdmin,
() => watch().admins?.some((admin) => admin.azureUniqueId === account?.localAccountId), //|| isAdmin,
[watch().admins, account, isAdmin]
);

Expand All @@ -116,10 +116,10 @@ export const EditPortalForm = (props: {
<IdInput register={register} errors={errors} />
<NameInput register={register} errors={errors} canEdit={canEdit} />
<Style.Row>
<ShortNameInput register={register} errors={errors} />
<SubtextInput register={register} errors={errors} />
<ShortNameInput register={register} errors={errors} canEdit={canEdit} />
<SubtextInput register={register} errors={errors} canEdit={canEdit} />
</Style.Row>
<DescriptionInput register={register} errors={errors} />
<DescriptionInput register={register} errors={errors} canEdit={canEdit} />
</Style.From>
</Style.Card>
<Style.Card>
Expand All @@ -128,7 +128,7 @@ export const EditPortalForm = (props: {
</Style.Card>
<Style.Card>
<Typography variant="h5">Icon</Typography>
<IconInput register={register} errors={errors} icon={watch().icon} />
<IconInput register={register} errors={errors} icon={watch().icon} canEdit={canEdit} />
</Style.Card>
<Style.Card>
<Typography variant="h5">Portal Type</Typography>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { ActionBar } from './ActionBar';
import { AgStyles } from '../AgStyle';
import { Message } from '../Message';

export const PortalAppTable = ({ portalApps }: { portalApps: PortalApplication[] }) => {
export const PortalAppTable = ({ portalApps, canEdit }: { portalApps: PortalApplication[]; canEdit?: boolean }) => {
const ref = useRef(null);
const [_, height] = useResizeObserver(ref);

Expand Down Expand Up @@ -42,10 +42,10 @@ export const PortalAppTable = ({ portalApps }: { portalApps: PortalApplication[]
}}
onRowSelected={(event) => {
const selectedRows = event.api!.getSelectedRows();
setSelectedApps(selectedRows);
canEdit && setSelectedApps(selectedRows);
}}
onRowDataUpdated={() => {
setSelectedApps([]);
canEdit && setSelectedApps([]);
}}
colDefs={[
{
Expand Down Expand Up @@ -159,7 +159,7 @@ export const PortalAppTable = ({ portalApps }: { portalApps: PortalApplication[]
]}
/>

<ActionBar selection={selectedApps} />
{canEdit && <ActionBar selection={selectedApps} />}
</AgStyles.TableContent>
</AgStyles.Wrapper>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Style = {
`,
};

export const RouteForm = () => {
export const RouteForm = ({ canEdit }: { canEdit?: boolean }) => {
const {
activeRoute,
root,
Expand Down Expand Up @@ -81,6 +81,7 @@ export const RouteForm = () => {
<TextField id="id" label="Route Id" readOnly value={activeRoute?.id} />
<TextField
{...register('path')}
readOnly={!canEdit}
id="path"
label="Route Path"
variant={errors.path && 'error'}
Expand All @@ -90,6 +91,7 @@ export const RouteForm = () => {
<TextField
id="pageKey"
{...register('pageKey')}
readOnly={!canEdit}
label="Page Key"
variant={errors.pageKey && 'error'}
helperText={errors.pageKey?.message}
Expand All @@ -99,6 +101,7 @@ export const RouteForm = () => {
rows={3}
multiline
{...register('description')}
readOnly={!canEdit}
id="description"
variant={errors.description && 'error'}
helperText={errors.description?.message}
Expand All @@ -111,6 +114,7 @@ export const RouteForm = () => {

<TextField
{...register('messages.errorMessage')}
readOnly={!canEdit}
id="errorMessage"
label="Error Message"
variant={errors.messages?.errorMessage && 'error'}
Expand All @@ -119,6 +123,7 @@ export const RouteForm = () => {
/>
<TextField
{...register('messages.noPageMessage')}
readOnly={!canEdit}
id="noPageMessage"
label="No Page Message"
variant={errors.messages?.noPageMessage && 'error'}
Expand All @@ -141,37 +146,39 @@ export const RouteForm = () => {
/>
</Style.CardContent>
</Card>
<Card>
<Style.CardContent>
<Typography variant="overline">Route Actions</Typography>
<Style.Row>
<Button
disabled={!activeRoute || activeRoute?.id === '' || disabled}
type="submit"
form="route"
>
Save
</Button>
<Button
variant="outlined"
onClick={() => {
createNewRoute();
}}
>
Add New route
</Button>
<Button
variant="outlined"
disabled={!activeRoute || activeRoute?.id === ''}
onClick={() => {
activeRoute && removeRouteById(activeRoute?.id);
}}
>
Delete Route
</Button>
</Style.Row>
</Style.CardContent>
</Card>
{canEdit && (
<Card>
<Style.CardContent>
<Typography variant="overline">Route Actions</Typography>
<Style.Row>
<Button
disabled={!activeRoute || activeRoute?.id === '' || disabled}
type="submit"
form="route"
>
Save
</Button>
<Button
variant="outlined"
onClick={() => {
createNewRoute();
}}
>
Add New route
</Button>
<Button
variant="outlined"
disabled={!activeRoute || activeRoute?.id === ''}
onClick={() => {
activeRoute && removeRouteById(activeRoute?.id);
}}
>
Delete Route
</Button>
</Style.Row>
</Style.CardContent>
</Card>
)}
</Style.Form>
);
};
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
import { tokens } from "@equinor/eds-tokens";
import { Route } from "../../types/router-config";
import { RouteMenu } from "./RouteMenu";
import { useRouterConfigContext } from "../../context/RouterContext";
import { Typography } from "@equinor/eds-core-react";
import styled from "styled-components";
import { TreeItem } from "../Tree/TreeItem";
import { tokens } from '@equinor/eds-tokens';
import { Route } from '../../types/router-config';
import { RouteMenu } from './RouteMenu';
import { useRouterConfigContext } from '../../context/RouterContext';
import { Typography } from '@equinor/eds-core-react';
import styled from 'styled-components';
import { TreeItem } from '../Tree/TreeItem';

const Style = {
Content: styled.div`
display: flex;
flex-direction: row;
align-items: center;
min-width: 150px;
justify-content: flex-end;
`,
Content: styled.div`
display: flex;
flex-direction: row;
align-items: center;
min-width: 150px;
justify-content: flex-end;
`,
box: styled.div`
min-width: 10px;
`,
};

export const RouteTreeItem = ({ route }: { route: Route }) => {
const { activeRoute, setActiveRoute } = useRouterConfigContext();
return (
<TreeItem
onClick={() => setActiveRoute(route.id)}
selected={
activeRoute?.id === route.id
? tokens.colors.interactive.primary__selected_highlight.hex
: undefined
}
title={route.path}
key={route.path}
Render={() => {
return (
<Style.Content>
<Typography variant="overline">- {route.pageKey}</Typography>
<RouteMenu route={route} />
</Style.Content>
);
}}
>
{route.children?.map((childRoute) => (
<RouteTreeItem route={childRoute} key={childRoute.path}></RouteTreeItem>
))}
</TreeItem>
);
export const RouteTreeItem = ({ route, canEdit }: { route: Route; canEdit?: boolean }) => {
const { activeRoute, setActiveRoute } = useRouterConfigContext();
return (
<TreeItem
onClick={() => setActiveRoute(route.id)}
selected={
activeRoute?.id === route.id ? tokens.colors.interactive.primary__selected_highlight.hex : undefined
}
title={route.path}
key={route.path}
Render={() => {
return (
<Style.Content>
<Typography variant="overline">- {route.pageKey}</Typography>
{canEdit ? <RouteMenu route={route} /> : <Style.box></Style.box>}
</Style.Content>
);
}}
>
{route.children?.map((childRoute) => (
<RouteTreeItem route={childRoute} key={childRoute.path} canEdit={canEdit}></RouteTreeItem>
))}
</TreeItem>
);
};
Loading

0 comments on commit a731fc4

Please sign in to comment.