@scality/core-ui 0.115.0

package/src/lib/icons/scality-loading.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+const LoaderIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 56 56"
+    width="50"
+    height="50"
+  >
+    <g className="container">
+      <path
+        d="M25.80000004768371,5.250000393390657 v8.2 H30.200000047683716 V5.1500003933906555 l5.7,3.3 l2.2,-3.8 l-5.8,-3.3 c-1.3,-0.8 -2.8,-1.1 -4.4,-1.1 c-1.5,0 -3,0.4 -4.3,1.2 l-5.8,3.3 l2.2,3.8 L25.80000004768371,5.250000393390657 z"
+        className="svg_3"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0s"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <path
+        d="M46.60000004768372,14.650000393390656 l-7.1,4.1 l2.2,3.8 l7.1,-4.1 l0,6.6 l4.4,0 l0,-6.7 c0,-1.5 -0.4,-3 -1.2,-4.3 c-0.8,-1.3 -1.9,-2.4 -3.2,-3.2 l-5.8,-3.3 l-2.2,3.8 L46.60000004768372,14.650000393390656 z"
+        className="svg_5"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0.3s"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <path
+        d="M46.60000004768372,41.25000039339065 L39.60000004768372,37.150000393390656 l2.2,-3.8 l7.1,4.1 l0,-6.6 l4.4,0 l0,6.7 c0,1.5 -0.4,2.9 -1.2,4.3 c-0.8,1.3 -1.9,2.4 -3.2,3.2 l-5.8,3.3 l-2.2,-3.8 L46.60000004768372,41.25000039339065 z"
+        className="svg_8"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0.55s"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <path
+        d="M25.80000004768371,50.75000039339065 v-8.2 H30.200000047683716 v8.2 l5.7,-3.3 l2.2,3.8 l-5.7,3.3 c-1.3,0.8 -2.9,1.2 -4.4,1.2 c-1.5,0 -3,-0.4 -4.3,-1.2 l-5.8,-3.3 l2.2,-3.8 L25.80000004768371,50.75000039339065 z"
+        className="svg_4"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0.75s"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <path
+        d="M7.2000000476837185,37.45000039339065 l7.1,-4.1 l2.2,3.8 l-7.1,4.1 l5.7,3.3 l-2.2,3.8 l-5.8,-3.3 c-1.3,-0.8 -2.4,-1.9 -3.1,-3.2 c-0.8,-1.3 -1.2,-2.8 -1.2,-4.3 l0,-6.7 l4.4,0 L7.2000000476837185,37.45000039339065 z"
+        className="svg_6"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0.85s"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <path
+        d="M7.2000000476837185,18.550000393390654 l7.1,4.1 l2.2,-3.8 l-7.1,-4.1 l5.7,-3.3 l-2.2,-3.8 l-5.8,3.3 c-1.3,0.8 -2.4,1.9 -3.2,3.2 c-0.8,1.3 -1.2,2.8 -1.2,4.4 l0,6.7 l4.4,0 L7.2000000476837185,18.550000393390654 z"
+        className="svg_7"
+      >
+        <animate
+          attributeName="opacity"
+          attributeType="XML"
+          values="1; 0"
+          begin="0.9"
+          dur="1s"
+          repeatCount="indefinite"
+        />
+      </path>
+      <polygon
+        points="28.60000228881836,17.649999976158142 28.60000228881836,26.950003027915955 36.70000076293945,22.34999692440033 "
+        className="svg_9"
+      />
+      <polygon
+        points="27.39999771118164,17.649999976158142 19.39999771118164,22.34999692440033 27.39999771118164,26.950003027915955 "
+        className="svg_10"
+      />
+      <polygon
+        points="26.89999771118164,27.950003027915955 18.89999771118164,23.34999692440033 18.89999771118164,32.55000340938568 "
+        className="svg_11"
+      />
+      <polygon
+        points="29.200000762939453,27.950003027915955 37.20000076293945,32.55000340938568 37.20000076293945,23.450003027915955 "
+        className="svg_12"
+      />
+      <polygon
+        points="27.39999771118164,29.05000150203705 19.500003814697266,33.650001883506775 27.39999771118164,38.34999883174896 "
+        className="svg_13"
+      />
+      <polygon
+        points="28.60000228881836,29.05000150203705 28.60000228881836,38.34999883174896 36.60000228881836,33.650001883506775 "
+        className="svg_14"
+      />
+    </g>
+  </svg>
+);
+
+export { LoaderIcon };

package/src/lib/index.css

@@ -0,0 +1,25 @@
+html,
+body {
+  font-family: 'Lato';
+  font-size: max(14px, 0.972vw);
+}
+
+/* Lato-Regular */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''), url('./style/fonts/Lato-Regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('./style/fonts/Lato-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* Lato-Bold */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: bold;
+  src: local(''), url('./style/fonts/Lato-Bold.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./style/fonts/Lato-Bold.woff')
+      format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

package/src/lib/index.ts

@@ -0,0 +1,75 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Banner } from './components/banner/Banner.component';
+export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
+export { Button } from './components/button/Button.component';
+export { Checkbox } from './components/checkbox/Checkbox.component';
+export { Chips } from './components/chips/Chips.component';
+export { Dropdown } from './components/dropdown/Dropdown.component';
+export { Input } from './components/input/Input.component';
+export { LOADER_SIZE } from './components/constants';
+export { Layout } from './components/layout/Layout.component';
+export { Loader } from './components/loader/Loader.component';
+export { Modal } from './components/modal/Modal.component';
+export { Navbar } from './components/navbar/Navbar.component';
+export { Notifications } from './components/notifications/Notifications.component';
+export { SearchInput } from './components/searchinput/SearchInput.component';
+export { Select } from './components/select/Select.component';
+export { Sidebar } from './components/sidebar/Sidebar.component';
+export { Steppers } from './components/steppers/Steppers.component';
+export { Toggle } from './components/toggle/Toggle.component';
+export { Tooltip } from './components/tooltip/Tooltip.component';
+export { MultiSelect } from './components/multiselect/MultiSelect.component';
+export { VegaChart } from './components/vegachart/VegaChart.component';
+export { LineChart } from './components/linechart/LineChart.component';
+export { ProgressBar } from './components/progressbar/ProgressBar.component';
+export { TextArea } from './components/textarea/TextArea.component';
+export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
+export { Sparkline } from './components/sparkline/SparkLine.component';
+export { BarChart } from './components/barchart/BarChart.component';
+export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
+export { AreaChart } from './components/areachart/AreaChart.component';
+export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
+export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
+export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
+export { EmptyState } from './components/emptystate/Emptystate.component';
+export { EmptyTable } from './components/emptytable/Emptytable.component';
+export { ScrollbarWrapper } from './components/scrollbarwrapper/ScrollbarWrapper.component';
+export { ErrorPage401 } from './components/error-pages/ErrorPage401.component';
+export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
+export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
+export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
+export { TextBadge } from './components/textbadge/TextBadge.component';
+export { SpacedBox } from './components/spacedbox/SpacedBox';
+export { Layout as Layout2 } from './components/layout/v2';
+export { TwoPanelLayout } from './components/layout/v2/panels';
+export { AppContainer } from './components/layout/v2/AppContainer';
+export {
+  BasicText,
+  SecondaryText,
+  LargerText,
+  EmphaseText,
+  StatusText,
+  LargeText,
+  SmallerText,
+  ChartTitleText,
+  Text,
+  Link,
+} from './components/text/Text.component';
+export { Card } from './components/card/Card.component';
+export { PrettyBytes } from './components/prettybytes/PrettyBytes.component';
+export { Icon } from './components/icon/Icon.component';
+export { StatusWrapper } from './components/statuswrapper/Statuswrapper.component';
+export { Stack, Wrap, spacing } from './spacing';
+export { Form, FormSection, FormGroup } from './components/form/Form.component';
+export { FormattedDateTime } from './components/date/FormattedDateTime';
+export { getDateDaysDiff } from './components/date/dateDiffer';
+export { IconHelp } from './components/IconHelper';
+export { Dropzone } from './components/dropzone/Dropzone';
+export { Toast } from './components/toast/Toast.component';
+export { ToastProvider, useToast } from './components/toast/ToastProvider';
+export { useMutationsHandler } from './components/toast/useMutationsHandler';
+export { Stepper } from './components/steppers/Stepper.component';
+export { InfoMessage } from './components/infomessage/InfoMessage.component';
+export { InputList } from './components/inputlist/InputList.component';

package/src/lib/next.ts

@@ -0,0 +1,17 @@
+import '@fortawesome/fontawesome-free/css/all.css';
+import './index.css';
+export { Button } from './components/buttonv2/Buttonv2.component';
+export { CopyButton } from './components/buttonv2/CopyButton.component';
+export { Tabs, Tab } from './components/tabsv2/Tabsv2.component';
+export { Table } from './components/tablev2/Tablev2.component';
+export { LineTemporalChart } from './components/linetemporalchart/LineTemporalChart.component';
+export {
+  MetricsTimeSpanProvider,
+  useMetricsTimeSpan,
+} from './components/linetemporalchart/MetricTimespanProvider';
+export { SyncedCursorCharts } from './components/vegachartv2/SyncedCursorCharts';
+export { Select } from './components/selectv2/Selectv2.component';
+export { HealthSelector } from './components/healthselectorv2/HealthSelector.component';
+export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
+export { Box } from './components/box/Box';
+export { Input } from './components/inputv2/inputv2';

package/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx

@@ -0,0 +1,311 @@
+import { ComponentType, useState } from 'react';
+import { Column, Table } from '../../components/tablev2/Tablev2.component';
+import { Box, Button } from '../../next';
+import { useMutation, UseMutationOptions } from 'react-query';
+import { AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+import { useTheme } from 'styled-components';
+import { useHistory } from 'react-router';
+import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
+
+type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
+
+//The entity is the "thing" you want to attach to the resource, sorry about the naming :(
+export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
+  attachmentOperations,
+  getAttachmentMutationOptions,
+  resourceType,
+  resourceName,
+  redirectUrl,
+  EntityIcon,
+  cancelButtonDisabled,
+  onCancel,
+  onExit,
+}: {
+  attachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+  getAttachmentMutationOptions: () => UseMutationOptions<
+    unknown,
+    unknown,
+    {
+      action: AttachmentAction;
+      type: ENTITY_TYPE;
+      entityName: string;
+      id: string;
+    }
+  >;
+  resourceName: string;
+  resourceType: RESOURCE_TYPE;
+  redirectUrl: string;
+  EntityIcon: ComponentType<{ type: ENTITY_TYPE | RESOURCE_TYPE }>;
+  cancelButtonDisabled?: boolean;
+  onCancel?: () => void;
+  onExit?: (
+    successfullOperations: AttachmentOperation<ENTITY_TYPE>[],
+    failedOperations: AttachmentOperation<ENTITY_TYPE>[],
+  ) => void;
+}) {
+  const history = useHistory();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+  };
+
+  const [attachmentOperationsStatuses, setAttachmentOperationsStatuses] =
+    useState<Record<string, AttachmentStatus>>({});
+
+  const attachmentMutation = useMutation({
+    ...getAttachmentMutationOptions(),
+    onSettled: (_, error, flatEntity) => {
+      setAttachmentOperationsStatuses((statuses) => ({
+        ...statuses,
+        [flatEntity.id]: error ? 'Error' : 'Success',
+      }));
+    },
+  });
+
+  const attachmentOperationsFlat: {
+    action: AttachmentAction;
+    type: ENTITY_TYPE;
+    entityName: string;
+    id: string;
+  }[] = attachmentOperations.map(
+    (attachmentOperation: AttachmentOperation<ENTITY_TYPE>) => {
+      return {
+        action: attachmentOperation.action,
+        type: attachmentOperation.entity.type,
+        entityName: attachmentOperation.entity.name,
+        id: attachmentOperation.entity.id,
+      };
+    },
+  );
+
+  const attach = () => {
+    attachmentOperationsFlat.forEach((attachmentOperationFlat) => {
+      if (
+        attachmentOperationsStatuses[attachmentOperationFlat.id] ===
+          'Waiting for confirmation' ||
+        attachmentOperationsStatuses[attachmentOperationFlat.id] === 'Error' ||
+        !attachmentOperationsStatuses[attachmentOperationFlat.id]
+      ) {
+        setAttachmentOperationsStatuses((attachmentOperationsStatuses) => {
+          return {
+            ...attachmentOperationsStatuses,
+            [attachmentOperationFlat.id]: 'Waiting for confirmation',
+          };
+        });
+        attachmentMutation.mutate({
+          ...attachmentOperationFlat,
+        });
+      }
+    });
+  };
+  const isAttachNotDone = attachmentOperationsFlat.find(
+    (attachmentOperation) =>
+      !attachmentOperationsStatuses[attachmentOperation.id],
+  );
+  const handleExit = () => {
+    if (onExit) {
+      const successfulOperations = Object.entries(attachmentOperationsStatuses)
+        .filter(([_, status]) => status === 'Success')
+        .flatMap(([operationId]) => {
+          const op = attachmentOperations.find(
+            (op) => op.entity.id === operationId,
+          );
+          if (op) return [op];
+          return [];
+        });
+      const failedOperations = Object.entries(attachmentOperationsStatuses)
+        .filter(([_, status]) => status === 'Error')
+        .flatMap(([operationId]) => {
+          const op = attachmentOperations.find(
+            (op) => op.entity.id === operationId,
+          );
+          if (op) return [op];
+          return [];
+        });
+      onExit(successfulOperations, failedOperations);
+    }
+    handleClose();
+    history.push(redirectUrl);
+  };
+  const modalFooter = () => {
+    return (
+      <Wrap>
+        <p></p>
+        <>
+          {isAttachNotDone ? (
+            <Stack>
+              <Button variant="outline" onClick={handleClose} label="Cancel" />
+              <Button
+                icon={<Icon name="Arrow-right" />}
+                variant="primary"
+                onClick={attach}
+                label="Confirm"
+                disabled={attachmentMutation.isLoading}
+              />
+            </Stack>
+          ) : (
+            <Button
+              icon={<Icon name="Arrow-right" />}
+              variant="primary"
+              onClick={() => {
+                handleExit();
+              }}
+              label="Exit"
+            />
+          )}
+        </>
+      </Wrap>
+    );
+  };
+
+  function AttachmentList() {
+    const theme = useTheme();
+    const columns: Column<{
+      action: AttachmentAction;
+      type: ENTITY_TYPE;
+      entityName: string;
+      id: string;
+    }>[] = [
+      {
+        Header: 'Action',
+        accessor: 'action',
+        cellStyle: {
+          width: '12.5%',
+        },
+        Cell: ({ value }: { value: AttachmentAction }) => {
+          return value === AttachmentAction.ADD ? (
+            <span>
+              <Icon name="Link" /> Attach
+            </span>
+          ) : (
+            <Box color={theme.statusCritical}>
+              <Icon name="Unlink" /> Detach
+            </Box>
+          );
+        },
+      },
+      {
+        Header: 'Type',
+        accessor: 'type',
+        cellStyle: {
+          width: '12.5%',
+        },
+        Cell: ({ value }: { value: ENTITY_TYPE }) => {
+          return <EntityIcon type={value} />;
+        },
+      },
+      {
+        Header: 'Entity name',
+        accessor: 'entityName',
+        cellStyle: {
+          width: '42.5%',
+        },
+      },
+      {
+        Header: 'Attachment status',
+        accessor: 'id',
+        cellStyle: {
+          width: '32.5%',
+        },
+        Cell: ({ value: resourceId }: { value: string }) => {
+          if (attachmentOperationsStatuses[resourceId] === 'Error') {
+            return (
+              <Box display="flex" gap={8} alignItems="center">
+                <Icon color="statusCritical" name="Times-circle" />
+                {attachmentOperationsStatuses[resourceId]}{' '}
+                <Button
+                  size="inline"
+                  onClick={attach}
+                  variant="outline"
+                  label="Retry"
+                />
+              </Box>
+            );
+          }
+          if (attachmentOperationsStatuses[resourceId] === 'Success') {
+            return (
+              <Box display="flex" gap={8} alignItems="center">
+                <Icon color="statusHealthy" name="Check-circle" />
+                {attachmentOperationsStatuses[resourceId]}
+              </Box>
+            );
+          }
+          return (
+            <>
+              {attachmentOperationsStatuses[resourceId] ||
+                'Waiting for confirmation'}
+            </>
+          );
+        },
+      },
+    ];
+
+    return (
+      <div style={{ height: '25rem', width: '50rem' }}>
+        <div>The following entities will be attached or detached: </div>
+        <Box display="flex" gap={24} alignItems="center">
+          <SecondaryText>
+            <EntityIcon type={resourceType} />
+          </SecondaryText>
+          <p>{resourceName}</p>
+        </Box>
+        <Table
+          columns={columns}
+          data={attachmentOperationsFlat}
+          defaultSortingKey={'entityName'}
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h32"
+            separationLineVariant="backgroundLevel3"
+            backgroundVariant="backgroundLevel1"
+            children={(Rows) => {
+              return <>{Rows}</>;
+            }}
+          ></Table.SingleSelectableContent>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        label="Cancel"
+        variant="outline"
+        disabled={cancelButtonDisabled}
+        onClick={() => {
+          if (onCancel) onCancel();
+          history.push(redirectUrl);
+        }}
+      />
+      <Button
+        icon={<Icon name="Save" />}
+        label="Save"
+        onClick={() => {
+          setAttachmentOperationsStatuses({});
+          setIsModalOpen(true);
+        }}
+        variant="primary"
+        disabled={attachmentOperations.length === 0}
+      />
+
+      <Modal
+        close={isAttachNotDone ? handleClose : handleExit}
+        footer={modalFooter()}
+        isOpen={isModalOpen}
+        title={
+          <Box display="flex" gap={8}>
+            <LargerText>
+              <Icon name="Link" />
+            </LargerText>
+            <LargerText>Attachment</LargerText>
+          </Box>
+        }
+      >
+        <AttachmentList />
+      </Modal>
+    </>
+  );
+}