Do not display tabs with no content (#2468)

ui/v2.5/src/components/Changelog/versions/v0140.md

@@ -2,6 +2,7 @@
 * Add python location in System Settings for script scrapers and plugins. ([#2409](https://github.com/stashapp/stash/pull/2409))
 
 ### 🎨 Improvements
+* Hide tabs with no content in Performer, Studio and Tag pages. ([#2468](https://github.com/stashapp/stash/pull/2468))
 * Added support for bulk editing most performer fields. ([#2467](https://github.com/stashapp/stash/pull/2467))
 * Changed video player to videojs. ([#2100](https://github.com/stashapp/stash/pull/2100))
 * Maintain lightbox settings and add lightbox settings to Interface settings page. ([#2406](https://github.com/stashapp/stash/pull/2406))

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -30,6 +30,7 @@ import { PerformerImagesPanel } from "./PerformerImagesPanel";
 import { PerformerEditPanel } from "./PerformerEditPanel";
 import { PerformerSubmitButton } from "./PerformerSubmitButton";
 import GenderIcon from "../GenderIcon";
+import renderNonZero from "src/utils/render";
 
 interface IProps {
   performer: GQL.PerformerDataFragment;
@@ -184,6 +185,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
         <Tab eventKey="details" title={intl.formatMessage({ id: "details" })}>
           <PerformerDetailsPanel performer={performer} />
         </Tab>
+        {renderNonZero(
+          performer.scene_count,
           <Tab
             eventKey="scenes"
             title={
@@ -197,6 +200,9 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           >
             <PerformerScenesPanel performer={performer} />
           </Tab>
+        )}
+        {renderNonZero(
+          performer.gallery_count,
           <Tab
             eventKey="galleries"
             title={
@@ -210,6 +216,9 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           >
             <PerformerGalleriesPanel performer={performer} />
           </Tab>
+        )}
+        {renderNonZero(
+          performer.image_count,
           <Tab
             eventKey="images"
             title={
@@ -223,6 +232,9 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           >
             <PerformerImagesPanel performer={performer} />
           </Tab>
+        )}
+        {renderNonZero(
+          performer.movie_count,
           <Tab
             eventKey="movies"
             title={
@@ -236,6 +248,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           >
             <PerformerMoviesPanel performer={performer} />
           </Tab>
+        )}
       </Tabs>
     </React.Fragment>
   );

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -28,6 +28,7 @@ import { StudioPerformersPanel } from "./StudioPerformersPanel";
 import { StudioEditPanel } from "./StudioEditPanel";
 import { StudioDetailsPanel } from "./StudioDetailsPanel";
 import { StudioMoviesPanel } from "./StudioMoviesPanel";
+import renderNonZero from "src/utils/render";
 
 interface IProps {
   studio: GQL.StudioDataFragment;
@@ -153,6 +154,15 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     }
   }
 
+  const defaultTab =
+    studio?.scene_count ?? 0 > 0
+      ? "scenes"
+      : studio?.gallery_count ?? 0 > 0
+      ? "galleries"
+      : studio?.image_count ?? 0 > 0
+      ? "images"
+      : "performers";
+
   const activeTabKey =
     tab === "childstudios" ||
     tab === "images" ||
@@ -160,7 +170,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     tab === "performers" ||
     tab === "movies"
       ? tab
-      : "scenes";
+      : defaultTab;
   const setActiveTabKey = (newTab: string | null) => {
     if (tab !== newTab) {
       const tabParam = newTab === "scenes" ? "" : `/${newTab}`;
@@ -216,6 +226,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
           activeKey={activeTabKey}
           onSelect={setActiveTabKey}
         >
+          {renderNonZero(
+            studio.scene_count,
             <Tab
               eventKey="scenes"
               title={
@@ -229,6 +241,9 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
             >
               <StudioScenesPanel studio={studio} />
             </Tab>
+          )}
+          {renderNonZero(
+            studio.gallery_count,
             <Tab
               eventKey="galleries"
               title={
@@ -242,6 +257,9 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
             >
               <StudioGalleriesPanel studio={studio} />
             </Tab>
+          )}
+          {renderNonZero(
+            studio.image_count,
             <Tab
               eventKey="images"
               title={
@@ -255,12 +273,15 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
             >
               <StudioImagesPanel studio={studio} />
             </Tab>
+          )}
           <Tab
             eventKey="performers"
             title={intl.formatMessage({ id: "performers" })}
           >
             <StudioPerformersPanel studio={studio} />
           </Tab>
+          {renderNonZero(
+            studio.movie_count,
             <Tab
               eventKey="movies"
               title={
@@ -274,6 +295,9 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
             >
               <StudioMoviesPanel studio={studio} />
             </Tab>
+          )}
+          {renderNonZero(
+            studio.child_studios?.length,
             <Tab
               eventKey="childstudios"
               title={
@@ -287,6 +311,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
             >
               <StudioChildrenPanel studio={studio} />
             </Tab>
+          )}
         </Tabs>
       </div>
       {renderDeleteAlert()}

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -30,6 +30,7 @@ import { TagGalleriesPanel } from "./TagGalleriesPanel";
 import { TagDetailsPanel } from "./TagDetailsPanel";
 import { TagEditPanel } from "./TagEditPanel";
 import { TagMergeModal } from "./TagMergeDialog";
+import renderNonZero from "src/utils/render";
 
 interface IProps {
   tag: GQL.TagDataFragment;
@@ -56,13 +57,24 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
   const [updateTag] = useTagUpdate();
   const [deleteTag] = useTagDestroy({ id: tag.id });
 
+  const defaultTab =
+    tag?.scene_count ?? 0 > 0
+      ? "scenes"
+      : tag?.image_count ?? 0 > 0
+      ? "images"
+      : tag?.gallery_count ?? 0 > 0
+      ? "galleries"
+      : tag?.scene_marker_count ?? 0 > 0
+      ? "markers"
+      : "performers";
+
   const activeTabKey =
     tab === "markers" ||
     tab === "images" ||
     tab === "performers" ||
     tab === "galleries"
       ? tab
-      : "scenes";
+      : defaultTab;
   const setActiveTabKey = (newTab: string | null) => {
     if (tab !== newTab) {
       const tabParam = newTab === "scenes" ? "" : `/${newTab}`;
@@ -298,6 +310,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
             activeKey={activeTabKey}
             onSelect={setActiveTabKey}
           >
+            {renderNonZero(
+              tag.scene_count,
               <Tab
                 eventKey="scenes"
                 title={
@@ -311,6 +325,9 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
               >
                 <TagScenesPanel tag={tag} />
               </Tab>
+            )}
+            {renderNonZero(
+              tag.image_count,
               <Tab
                 eventKey="images"
                 title={
@@ -324,6 +341,9 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
               >
                 <TagImagesPanel tag={tag} />
               </Tab>
+            )}
+            {renderNonZero(
+              tag.gallery_count,
               <Tab
                 eventKey="galleries"
                 title={
@@ -337,6 +357,9 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
               >
                 <TagGalleriesPanel tag={tag} />
               </Tab>
+            )}
+            {renderNonZero(
+              tag.scene_marker_count,
               <Tab
                 eventKey="markers"
                 title={
@@ -350,6 +373,9 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
               >
                 <TagMarkersPanel tag={tag} />
               </Tab>
+            )}
+            {renderNonZero(
+              tag.performer_count,
               <Tab
                 eventKey="performers"
                 title={
@@ -363,6 +389,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
               >
                 <TagPerformersPanel tag={tag} />
               </Tab>
+            )}
           </Tabs>
         </div>
         {renderDeleteAlert()}

ui/v2.5/src/utils/render.tsx

@@ -0,0 +1,9 @@
+function renderNonZero(count: number | undefined | null, element: JSX.Element) {
+  if (!count) {
+    return undefined;
+  }
+
+  return element;
+}
+
+export default renderNonZero;