sts-sponsors team mailing list archive

[Jones Ogolo <mp+438107@xxxxxxxxxxxxxxxxxx>]

Diff comments:

> diff --git a/frontend/src/components/Placeholder/Placeholder.tsx b/frontend/src/components/Placeholder/Placeholder.tsx
> new file mode 100644
> index 0000000..cab700c
> --- /dev/null
> +++ b/frontend/src/components/Placeholder/Placeholder.tsx
> @@ -0,0 +1,38 @@
> +import type { ReactNode } from "react";
> +
> +import classNames from "classnames";
> +
> +import "./Placeholder.scss";
> +
> +type Props = {
> +  className?: string;
> +  isLoading?: boolean;
> +} & (
> +  | {
> +      text?: never;
> +      children: ReactNode;
> +    }
> +  | {
> +      text: string;
> +      children?: never;
> +    }
> +);
> +
> +const Placeholder = ({ text, children, className, isLoading = false }: Props) => {
> +  const delay = Math.floor(Math.random() * 750);
> +  if (isLoading) {
> +    return (
> +      <span
> +        aria-hidden={true}
> +        className={classNames("p-placeholder", className)}
> +        data-testid="placeholder"

Is there a better alternative we can use in this case? Since we're trying to move on from using testIds.

> +        style={{ animationDelay: `${delay}ms` }}
> +      >
> +        {text || children}
> +      </span>
> +    );
> +  }
> +  return <>{children}</>;
> +};
> +
> +export default Placeholder;
> diff --git a/frontend/src/components/SitesList/components/SitesTable.tsx b/frontend/src/components/SitesList/components/SitesTable.tsx
> index 1aa8054..7791887 100644
> --- a/frontend/src/components/SitesList/components/SitesTable.tsx
> +++ b/frontend/src/components/SitesList/components/SitesTable.tsx
> @@ -175,39 +190,46 @@ const SitesTable = ({ data }: { data: Site[] }) => {
>    });
>  
>    return (
> -    <table aria-label="sites" className="u-table-layout--auto">
> -      <thead>
> -        {table.getHeaderGroups().map((headerGroup) => (
> -          <tr key={headerGroup.id}>
> -            {headerGroup.headers.map((header) => {
> +    <>
> +      <SitesTableControls allColumns={table.getAllLeafColumns()} data={data} isLoading={isLoading} />
> +      <table aria-label="sites" className="sites-table">
> +        <thead>
> +          {table.getHeaderGroups().map((headerGroup) => (
> +            <tr key={headerGroup.id}>
> +              {headerGroup.headers.map((header) => {
> +                return (
> +                  <th colSpan={header.colSpan} key={header.id}>
> +                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
> +                    {header.column.getCanResize() && (
> +                      <div
> +                        className={`resizer ${header.column.getIsResizing() ? "isResizing" : ""}`}
> +                        onMouseDown={header.getResizeHandler()}
> +                        onTouchStart={header.getResizeHandler()}
> +                      ></div>
> +                    )}
> +                  </th>
> +                );
> +              })}
> +            </tr>
> +          ))}
> +        </thead>
> +        {isLoading && !isFetchedAfterMount ? (
> +          <caption>Loading...</caption>
> +        ) : (
> +          <tbody>
> +            {table.getRowModel().rows.map((row) => {
>                return (

We could use an implicit return here if there's no operations before the return statement

> -                <th colSpan={header.colSpan} key={header.id}>
> -                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
> -                  {header.column.getCanResize() && (
> -                    <div
> -                      className={`resizer ${header.column.getIsResizing() ? "isResizing" : ""}`}
> -                      onMouseDown={header.getResizeHandler()}
> -                      onTouchStart={header.getResizeHandler()}
> -                    ></div>
> -                  )}
> -                </th>
> +                <tr key={row.id}>
> +                  {row.getVisibleCells().map((cell) => {
> +                    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>;
> +                  })}
> +                </tr>
>                );
>              })}
> -          </tr>
> -        ))}
> -      </thead>
> -      <tbody>
> -        {table.getRowModel().rows.map((row) => {
> -          return (
> -            <tr key={row.id}>
> -              {row.getVisibleCells().map((cell) => {
> -                return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>;
> -              })}
> -            </tr>
> -          );
> -        })}
> -      </tbody>
> -    </table>
> +          </tbody>
> +        )}
> +      </table>
> +    </>
>    );
>  };
>  


-- 
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/438107
Your team MAAS Committers is subscribed to branch ~petermakowski/maas-site-manager:add-hidden-columns-MAASENG-1391.