@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/page/page.scss

@@ -0,0 +1,408 @@
+@import '../scss/variables';
+@import '../scss//normalize';
+@import '../scss//helper-classes';
+@import '../scss//flex-grid';
+@import '../scss/toasts.scss';
+@import '../scss/global.scss';
+@import '../scss/upload-modal';
+
+.page {
+  min-height: 400px;
+}
+.text-danger {
+  color: $on-light-red;
+}
+.loading-dataset {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 70vh;
+}
+
+.warning-text {
+  color: $on-light-red;
+}
+
+// admin page
+.admin.route-wrapper {
+  margin: 20px auto;
+  max-width: 1000px;
+  width: 90%;
+  .nav-pills.tabs {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li a {
+      padding: 20px;
+      display: block;
+    }
+  }
+  input {
+    display: inline-block;
+    appearance: none;
+    box-sizing: border-box;
+    border-radius: 0;
+    border: 0.1rem solid #dfdfdf;
+    padding: 10px 12px;
+    max-width: 100%;
+    line-height: 12px;
+  }
+  .header-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .filters {
+    button {
+      margin: 0 10px;
+    }
+  }
+  .users-panel-wrap {
+    .user-panel {
+      display: flex;
+      justify-content: space-between;
+      margin: 20px 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      padding: 10px;
+      > .user-col {
+        flex: auto;
+        label {
+          display: block;
+          font-weight: 600;
+          font-size: 14px;
+        }
+      }
+      .user-panel-inner {
+        display: flex;
+        justify-content: space-between;
+        > .user-col {
+          flex: 1;
+        }
+      }
+      .uc-summary .summary-data,
+      .uc-provider {
+        font-size: 12px;
+        margin: 0 0 10px;
+      }
+      .uc-name {
+        font-size: 20px;
+        display: flex;
+        align-items: flex-start;
+        .badge {
+          font-size: 12px;
+          color: #fff;
+          background: red;
+          display: inline-block;
+          padding: 5px;
+          border-radius: 4px;
+          font-weight: bold;
+        }
+        .dataset-tools-wrap-admin .tools {
+          display: flex;
+          button {
+            background-color: transparent;
+            border: 0;
+            outline: 0;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+//api page
+
+.container.api {
+  width: 767px;
+  margin: 40px auto 80px;
+  max-width: 90%;
+  h2 {
+    text-align: center;
+  }
+  h3 {
+    text-align: center;
+    margin-top: 50px;
+  }
+  pre {
+    white-space: normal;
+    word-break: break-all;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+
+  .copy-key.ck-wrap {
+    margin: 30px;
+    display: flex;
+    justify-content: center;
+  }
+  .on-button--primary.on-button {
+    margin: 10px auto;
+    display: block;
+  }
+}
+
+.feedback-form.feedback-modal .grid.modal {
+  width: 670px;
+  max-height: 80%;
+}
+
+.edit-description-field {
+  font-size: 16px;
+  line-height: 24px;
+  width: 100%;
+}
+
+.description-btn {
+  color: var(--current-theme-primary);
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.dataset-header .description-btn {
+  color: var(--current-theme-primary-light);
+}
+
+.edit-list-group-item,
+.edit-list-group {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  .on-button--small {
+    padding: 10px;
+    margin-left: 10px;
+  }
+}
+
+.edit-list-group-item {
+  align-items: center;
+  padding: 5px;
+  .on-no-background.icon-text,
+  .on-no-background.img-icon-text {
+    padding: 0;
+    margin-left: 5px;
+  }
+}
+
+.update-field-save {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+//file tree
+
+.filetree-wrapper {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0;
+  margin-bottom: 25px;
+
+  .accordion-content {
+    margin: 0;
+  }
+  .accordion-item {
+    overflow: visible;
+  }
+  .accordion-item.collapsed {
+    display: none;
+  }
+
+  .filetree-item {
+    list-style-type: none;
+    padding: 10px 0 10px 15px;
+    border-left: 1px solid #e3e3e3;
+    font-size: 14px;
+    > div {
+      margin-bottom: 10px;
+    }
+  }
+  > div > .filetree-item:first-of-type {
+    border-left: 0;
+    padding-right: 15px;
+  }
+
+  .filetree-dir .filetree-file:last-of-type {
+    padding-bottom: 0;
+  }
+  .filetree-item:not(:last-child) {
+    border-bottom: 1px solid #e3e3e3;
+  }
+  .filetree-dir-tools {
+    padding: 10px 0;
+    border-bottom: 1px solid #e3e3e3;
+  }
+  button.btn-warn-component {
+    padding: 0;
+    i {
+      font-size: 16px;
+    }
+  }
+
+  .filetree-dir {
+    display: flex;
+    margin-left: auto;
+    justify-content: flex-start;
+    line-height: 10px;
+    .file-tree {
+      width: 100%;
+    }
+    > span,
+    > div {
+      margin-left: 10px;
+      display: flex;
+      font-size: 12px;
+      text-align: center;
+      width: auto;
+      position: relative;
+      align-items: center;
+      cursor: pointer;
+      height: 20px;
+      i {
+        font-size: 12px;
+        margin-right: 5px;
+      }
+      &.delete-file {
+        margin-left: auto;
+      }
+      input {
+        opacity: 0;
+        filter: alpha(opacity=0);
+        position: absolute;
+        cursor: pointer;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        width: 100%;
+      }
+      .warn-btn-click {
+        button {
+          font-size: 12px;
+        }
+      }
+    }
+
+    button.btn-warn-component.success,
+    button.btn-warn-component.cancel {
+      margin: 0 2px 0;
+      font-size: 10px;
+      height: 20px;
+      width: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 11px;
+        color: #fff;
+        margin: 0;
+      }
+    }
+  }
+
+  .filetree-editfile {
+    display: flex;
+    margin-left: auto;
+    justify-content: flex-start;
+    line-height: 10px;
+    > div,
+    > span {
+      margin-left: 10px;
+      display: flex;
+      font-size: 12px;
+      text-align: center;
+      width: auto;
+      position: relative;
+      align-items: center;
+      cursor: pointer;
+      height: 20px;
+      &.fresnel-greaterThanOrEqual-medium {
+        @media (max-width: 767px) {
+          margin: 0;
+        }
+      }
+      i {
+        font-size: 12px;
+        margin-right: 0;
+      }
+      &.delete-file {
+        margin-left: auto;
+      }
+      input {
+        opacity: 0;
+        filter: alpha(opacity=0);
+        position: absolute;
+        cursor: pointer;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        width: 100%;
+      }
+      .warn-btn-click {
+        button {
+          font-size: 12px;
+        }
+      }
+    }
+
+    button.btn-warn-component.success,
+    button.btn-warn-component.cancel {
+      margin: 0 2px 0;
+      font-size: 10px;
+      height: 20px;
+      width: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 11px;
+        color: #fff;
+        margin: 0;
+      }
+    }
+  }
+
+  ul.child-files {
+    margin: 0;
+    padding: 0;
+  }
+
+  .filetree-file {
+    display: flex;
+    @media (max-width: 480px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .bulk-delete-checkbox-group,
+  .edit-file {
+    i {
+      color: var(--current-theme-primary);
+    }
+  }
+  .bulk-delete-checkbox-group {
+    label {
+      display: flex;
+      align-items: center;
+    }
+    &.added-to-bd {
+      i {
+        color: $on-light-red;
+      }
+    }
+  }
+  .added-to-bulk {
+    font-size: 10px;
+    margin-left: 10px;
+  }
+}

package/src/scripts/components/progress-bar/ProgressBar.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import "./progress-bar.scss"
+
+export interface ProgressBarProps {
+  width?: string
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ width }) => (
+  <div className="progress">
+    <div
+      className="progress-bar"
+      style={{ width: width.toString() + "%" }}
+    >
+    </div>
+  </div>
+)

package/src/scripts/components/progress-bar/progress-bar.scss

@@ -0,0 +1,34 @@
+@import '../scss/variables';
+// Outer container
+.progress {
+  overflow: hidden;
+  height: 25px;
+  margin-bottom: 0;
+  background-color: #eee;
+  border-radius: 0;
+}
+
+// Bar of progress
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  text-align: center;
+  background-color: var(--current-theme-primary);
+  transition: width 0.6s ease;
+}
+
+.progress .progress-bar {
+  animation-name: animateBar;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 0.4s;
+}
+@keyframes animateBar {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/scripts/components/radio/Radio.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import "./radio.scss"
+
+export interface RadioProps {
+  label: string
+  name: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  checked: boolean
+  value: string
+}
+
+export const Radio = ({
+  label,
+  name,
+  onChange,
+  checked,
+  value,
+}: RadioProps) => {
+  const id = name + "-" + label
+  return (
+    <span className="custom-radio">
+      <input
+        type="radio"
+        id={id}
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        value={value}
+      />
+      <label htmlFor={id}>{label}</label>
+    </span>
+  )
+}

package/src/scripts/components/radio/RadioGroup.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { Radio } from "./Radio"
+import "./radio.scss"
+
+export interface RadioGroupProps {
+  layout: string
+  // if radioArr is string[]
+  // then the string items are both the label and value for the radio buttons
+  radioArr: (
+    | string
+    | {
+      label: string
+      onChange?: React.MouseEventHandler<HTMLInputElement>
+      value: string
+    }
+  )[]
+  name: string
+  selected: string
+  setSelected: (value) => void
+}
+
+const get = (obj, property) => (typeof obj === "object" ? obj[property] : obj)
+
+export const RadioGroup = ({
+  radioArr,
+  layout,
+  name,
+  selected,
+  setSelected,
+}: RadioGroupProps) => {
+  return (
+    <div className={"on-radio-wrapper" + " " + layout}>
+      {radioArr.map((item, index) => (
+        <Radio
+          key={index}
+          name={name}
+          value={get(item, "value")}
+          label={get(item, "label")}
+          checked={selected === get(item, "value")}
+          onChange={(e) => setSelected(e.target.value)}
+        />
+      ))}
+    </div>
+  )
+}

package/src/scripts/components/radio/__tests__/RadioGroup.spec.tsx

@@ -0,0 +1,31 @@
+import { vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { RadioGroup } from "../RadioGroup"
+
+export const datasetType_available = [
+  { label: "All Public", value: "All Public" },
+  { label: "Following", value: "Following" },
+  { label: "My Datasets", value: "My Datasets" },
+  { label: "My Bookmarks", value: "My Bookmarks" },
+]
+
+describe("RadioGroup component", () => {
+  it("has selectable options", async () => {
+    const setSelected = vi.fn()
+    render(
+      <RadioGroup
+        setSelected={setSelected}
+        selected={"All Public"}
+        name="name"
+        radioArr={datasetType_available}
+        layout="row"
+      />,
+    )
+    // Check an option is rendered
+    expect(await screen.getByText(/Following/)).toBeInTheDocument()
+    const followingRadio = screen.getByText("Following")
+    fireEvent.click(followingRadio)
+    expect(setSelected).toHaveBeenCalledWith("Following")
+  })
+})