Skip to content

Commit

Permalink
NEOS-513:Hide ids in tables (#951)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evisdrenova
evisdrenova committed Dec 21, 2023
1 parent bb90b56 commit 00ad52b
Show file tree
Hide file tree
Showing 14 changed files with 71 additions and 30 deletions.
29 changes: 28 additions & 1 deletion frontend/apps/web/app/[account]/connections/[id]/components/connection-component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use client';
import { CopyButton } from '@/components/CopyButton';
import ConnectionIcon from '@/components/connections/ConnectionIcon';
import PageHeader from '@/components/headers/PageHeader';
import { Connection, UpdateConnectionResponse } from '@neosync/sdk';
Expand Down Expand Up @@ -43,6 +44,15 @@ export function getConnectionComponentDetails(
header="PostgreSQL"
leftIcon={<ConnectionIcon name="postgres" />}
extraHeading={extraPageHeading}
description={connection.id}
copyIcon={
<CopyButton
onHoverText="Copy the Connection ID"
textToCopy={connection.id}
onCopiedText="Success!"
buttonVariant="outline"
/>
}
/>
),
body: (
Expand Down Expand Up @@ -94,7 +104,15 @@ export function getConnectionComponentDetails(
header: (
<PageHeader
header="Mysql"
description="Update this connection"
description={connection.id}
copyIcon={
<CopyButton
onHoverText="Copy the Connection ID"
textToCopy={connection.id}
onCopiedText="Success!"
buttonVariant="outline"
/>
}
leftIcon={<ConnectionIcon name="mysql" />}
extraHeading={extraPageHeading}
/>
Expand Down Expand Up @@ -147,6 +165,15 @@ export function getConnectionComponentDetails(
header="AWS S3"
leftIcon={<ConnectionIcon name="aws S3" />}
extraHeading={extraPageHeading}
description={connection.id}
copyIcon={
<CopyButton
onHoverText="Copy the Connection ID"
textToCopy={connection.id}
onCopiedText="Success!"
buttonVariant="outline"
/>
}
/>
),
body: (
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/app/[account]/connections/components/ConnectionsTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function DataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
9 changes: 9 additions & 0 deletions frontend/apps/web/app/[account]/jobs/[id]/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';
import ButtonText from '@/components/ButtonText';
import { CopyButton } from '@/components/CopyButton';
import DeleteConfirmationDialog from '@/components/DeleteConfirmationDialog';
import OverviewContainer from '@/components/containers/OverviewContainer';
import PageHeader from '@/components/headers/PageHeader';
Expand Down Expand Up @@ -101,6 +102,14 @@ export default function JobIdLayout({ children, params }: LayoutProps) {
pageHeaderContainerClassName="gap-2"
header={data?.job?.name || ''}
description={data?.job?.id || ''}
copyIcon={
<CopyButton
onHoverText="Copy the Job ID"
textToCopy={data?.job?.id || ''}
onCopiedText="Success!"
buttonVariant="outline"
/>
}
leftBadgeValue={
data.job.source?.options?.config.case == 'generate'
? 'Generate Job'
Expand Down
10 changes: 8 additions & 2 deletions frontend/apps/web/app/[account]/jobs/components/DataTable/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ interface GetJobsProps {

export function getColumns(props: GetJobsProps): ColumnDef<JobColumn>[] {
const { onDeleted, accountName } = props;

return [
{
accessorKey: 'status',
Expand Down Expand Up @@ -95,7 +94,14 @@ export function getColumns(props: GetJobsProps): ColumnDef<JobColumn>[] {
return (
<div className="flex space-x-2">
<span className="max-w-[500px] truncate font-medium">
{row.getValue('name')}
<div>
<NextLink
className="hover:underline"
href={`/${accountName}/jobs/${row.getValue('id')}`}
>
{row.getValue('name')}
</NextLink>
</div>
</span>
</div>
);
Expand Down
14 changes: 0 additions & 14 deletions frontend/apps/web/app/[account]/jobs/components/DataTable/data-table-toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,6 @@ export function DataTableToolbar<TData>({
}
className="h-8 w-[150px] lg:w-[250px]"
/>
{/* {table.getColumn('status') && (
<DataTableFacetedFilter
column={table.getColumn('status')}
title="Status"
options={statuses}
/>
)}
{table.getColumn('priority') && (
<DataTableFacetedFilter
column={table.getColumn('priority')}
title="Priority"
options={priorities}
/>
)} */}
{isFiltered && (
<Button
variant="ghost"
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/app/[account]/jobs/components/DataTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function DataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface DataTableProps {
export function DataTable({ columns, data, isError }: DataTableProps) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({ error: isError });
React.useState<VisibilityState>({ error: isError, id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
9 changes: 9 additions & 0 deletions frontend/apps/web/app/[account]/runs/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { refreshWhenJobRunning, useGetJobRun } from '@/libs/hooks/useGetJobRun';
import { JobRunStatus as JobRunStatusEnum } from '@neosync/sdk';
import { TiCancel } from 'react-icons/ti';

import { CopyButton } from '@/components/CopyButton';
import {
refreshEventsWhenEventsIncomplete,
useGetJobRunEvents,
Expand Down Expand Up @@ -109,6 +110,14 @@ export default function Page({ params }: PageProps): ReactElement {
<PageHeader
header="Job Run Details"
description={jobRun?.id || ''}
copyIcon={
<CopyButton
onHoverText="Copy the Run ID"
textToCopy={jobRun?.id || ''}
onCopiedText="Success!"
buttonVariant="outline"
/>
}
extraHeading={
<div className="flex flex-row space-x-4">
<DeleteConfirmationDialog
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/app/[account]/runs/components/JobRunsTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function DataTable<TData, TValue, TAutoRefreshInterval extends string>({
}: DataTableProps<TData, TValue, TAutoRefreshInterval>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ jobId: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/app/[account]/settings/api-keys/components/ApiKeysTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function DataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
2 changes: 1 addition & 1 deletion ...end/apps/web/app/[account]/transformers/components/SystemTransformersTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function SystemTransformersDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
2 changes: 1 addition & 1 deletion ...pps/web/app/[account]/transformers/components/UserDefinedTransformersTable/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function UserDefinedTransformersDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down
14 changes: 9 additions & 5 deletions frontend/apps/web/components/headers/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@ import { Separator } from '../ui/separator';

interface Props {
header: string;
description?: string;
description?: string | JSX.Element;
leftBadgeValue?: string;
extraHeading?: ReactNode;
leftIcon?: ReactNode;
progressSteps?: JSX.Element;
pageHeaderContainerClassName?: string;
copyIcon?: JSX.Element;
}

export default function PageHeader(props: Props) {
const {
header,
description,
copyIcon,
extraHeading,
leftIcon,
pageHeaderContainerClassName,
Expand Down Expand Up @@ -45,10 +47,12 @@ export default function PageHeader(props: Props) {

{extraHeading ? <div>{extraHeading}</div> : null}
</div>

{description ? (
<h3 className="text-muted-foreground text-sm">{description}</h3>
) : null}
<div className="flex flex-row items-center gap-4">
{description ? (
<h3 className="text-muted-foreground text-sm">{description}</h3>
) : null}
{copyIcon && copyIcon}
</div>

<Separator />
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/web/components/jobs/subsets/subset-table/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function DataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
React.useState<VisibilityState>({ id: false });
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
Expand Down

1 comment on commit 00ad52b

@vercel
Copy link

@vercel vercel bot commented on 00ad52b Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

neosync-marketing – ./marketing

neosync-marketing-neosync.vercel.app
neosync-marketing-app.vercel.app
neosync.dev
www.neosync.dev
neosync-marketing-git-main-neosync.vercel.app

Please sign in to comment.